/* The 2026 student card (reports/StudentFile.js): hero, KPI tiles, tabs and the timeline cards.
   Every rule is scoped to [data-ui="new"]. Brand: sky #175bb0 + mint #2ec4a5, Rubik. */

/* Markup: client/src/reports/components/StudentCard3.js (hero, tiles, tabs, contacts, files) and StudentLists3.js
   (the lists - ReportsTable's list pattern, ui3-tables.css .t3l-*). Sizes in px (the root font-size is 10px in the
   reports app). Logical properties only - the page is RTL. Tones: red #b0202d/#fde6e8 · amber #8a4a00/#fff1df ·
   mint #0a6f5d/#dcf5ee · green #0b6b4a/#e1f4ea · sky #114591/#e6efff · grey #4a5a73/#f1f4f9 */

:root[data-ui="new"] .sf3 {
    display: flex; flex-direction: column; gap: 16px; min-width: 0;
    font-family: "Rubik", system-ui, sans-serif; font-size: 14px; line-height: 1.45; color: #12233f; font-variant-numeric: tabular-nums;
}
:root[data-ui="new"] .sf3 .p3-ico { flex-shrink: 0; display: block; }
:root[data-ui="new"] .sf3 button { font-family: inherit; }
:root[data-ui="new"] .sf3 :is(.sf3-act, .sf3-kpi, .sf3-tab, .sf3-pill):focus-visible { outline: 2px solid #175bb0; outline-offset: 2px; }
:root[data-ui="new"] .sf3 .sf3-hero :is(.sf3-act):focus-visible { outline-color: #fff; }

/* ------------------------------------------------------------ hero -- */
:root[data-ui="new"] .sf3-hero {
    position: relative; border-radius: 24px; color: #fff; padding: 26px 28px 60px; overflow: hidden; isolation: isolate;
    background-color: #175bb0;
    background-image:
        radial-gradient(520px 260px at 0% 0%, rgba(46, 196, 165, .30), transparent 70%),
        radial-gradient(420px 220px at 100% 120%, rgba(17, 69, 145, .65), transparent 70%),
        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);
    box-shadow: 0 18px 40px rgba(16, 42, 92, .16);
}
:root[data-ui="new"] .sf3-hero.flat { padding-bottom: 26px; }
/* a soft ring behind the avatar */
:root[data-ui="new"] .sf3-hero::before {
    content: ""; position: absolute; z-index: -1; width: 240px; height: 240px; border-radius: 50%;
    inset-inline-start: -70px; top: -90px; border: 34px solid rgba(255, 255, 255, .05);
}
:root[data-ui="new"] .sf3-hero-in { display: flex; align-items: center; gap: 18px 24px; flex-wrap: wrap; }

:root[data-ui="new"] .sf3-ava {
    position: relative; flex-shrink: 0; width: 108px; height: 108px; border-radius: 30px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(150deg, #ffffff 0%, #e6efff 55%, #dcf5ee 100%); color: #114591;
    border: 3px solid rgba(255, 255, 255, .9); box-shadow: 0 12px 26px rgba(8, 30, 70, .30);
}
:root[data-ui="new"] .sf3-ava-ini { font-size: 38px; font-weight: 800; line-height: 1; letter-spacing: .5px; }
:root[data-ui="new"] .sf3-ava-ph { position: absolute; inset: 0; }
:root[data-ui="new"] .sf3-ava-ph img { width: 100%; height: 100%; object-fit: cover; display: block !important; }
:root[data-ui="new"] .sf3-ava-ph img:not([src]) { visibility: hidden; }
:root[data-ui="new"] .sf3-ava-busy { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .78); }

:root[data-ui="new"] .sf3-who { flex: 1 1 340px; min-width: 0; }
:root[data-ui="new"] .sf3-kicker {
    display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px;
    background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3);
    font-size: 12.5px; font-weight: 700; letter-spacing: .2px; color: #fff;
}
:root[data-ui="new"] .sf3 .sf3-name {
    margin: 8px 0 12px; font-family: inherit; font-size: 34px; font-weight: 800; line-height: 1.15; letter-spacing: 0;
    color: #fff; overflow-wrap: anywhere; text-shadow: 0 2px 12px rgba(8, 30, 70, .18);
}
:root[data-ui="new"] .sf3-facts { display: flex; flex-wrap: wrap; gap: 8px; }
:root[data-ui="new"] .sf3-fact {
    display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 4px 12px; border-radius: 999px; box-sizing: border-box;
    background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .92); font-size: 13.5px; line-height: 1.3;
}
:root[data-ui="new"] .sf3-fact b { color: #fff; font-weight: 700; }
:root[data-ui="new"] .sf3-fact .p3-ico { opacity: .85; }
:root[data-ui="new"] .sf3-fact.sf3-status { font-weight: 700; border: 0; }
:root[data-ui="new"] .sf3-fact.sf3-status.red { background: #fde6e8; color: #b0202d; }
:root[data-ui="new"] .sf3-fact.sf3-status.amber { background: #fff1df; color: #8a4a00; }
:root[data-ui="new"] .sf3-fact.sf3-status.mint { background: #dcf5ee; color: #0a6f5d; }
:root[data-ui="new"] .sf3-fact.sf3-status.grey { background: #f1f4f9; color: #4a5a73; }

:root[data-ui="new"] .sf3-acts { display: flex; flex-direction: column; align-items: stretch; gap: 8px; align-self: center; }
:root[data-ui="new"] .sf3-act {
    height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .34); background: rgba(255, 255, 255, .13);
    color: #fff; font-size: 13.5px; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px; transition: background .15s, transform .15s;
}
:root[data-ui="new"] .sf3-act:hover { background: rgba(255, 255, 255, .24); }
:root[data-ui="new"] .sf3-act:first-child { background: #fff; border-color: #fff; color: #114591; box-shadow: 0 8px 18px rgba(8, 30, 70, .22); }
:root[data-ui="new"] .sf3-act:first-child:hover { background: #eef5ff; }
:root[data-ui="new"] .sf3-act.ghost { background: transparent; border-color: rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .9); }

/* "נתוני מחצית א׳ ———" - the period of the tiles below */
:root[data-ui="new"] .sf3-kcap { display: flex; align-items: center; gap: 10px; margin-top: 20px; font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .86); }
:root[data-ui="new"] .sf3-kcap::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, .22); }

/* ------------------------------------------------------------ KPI tiles (overlap the hero's bottom) -- */
:root[data-ui="new"] .sf3-kpis {
    position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 12px;
    margin: -62px 20px 0; /* the .sf3 gap (16px) included: the tiles cover the hero's last 46px */
}
:root[data-ui="new"] .sf3-kpi {
    position: relative; flex: 1 1 150px; max-width: 300px; min-width: 0; margin: 0; padding: 14px 16px 15px; box-sizing: border-box; text-align: start;
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    background: #fff; border: 1px solid #dfe8f4; border-radius: 20px; color: #12233f; cursor: pointer;
    box-shadow: 0 14px 30px rgba(16, 42, 92, .10); transition: transform .15s, box-shadow .15s, border-color .15s;
}
:root[data-ui="new"] .sf3-kpi:hover { transform: translateY(-2px); border-color: #b9d3f4; box-shadow: 0 18px 34px rgba(16, 42, 92, .15); }
:root[data-ui="new"] .sf3-kpi-ic { width: 34px; height: 34px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 6px; background: #e6efff; color: #114591; }
:root[data-ui="new"] .sf3-kpi-n { font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -.3px; color: #12233f; }
:root[data-ui="new"] .sf3-kpi-l { font-size: 13.5px; font-weight: 700; color: #12233f; line-height: 1.3; }
:root[data-ui="new"] .sf3-kpi-s { font-size: 12px; color: #5b6b85; line-height: 1.35; }
:root[data-ui="new"] .sf3-kpi-pair { display: inline-flex; align-items: baseline; gap: 12px; }
:root[data-ui="new"] .sf3-kpi-pair .pos { color: #0a6f5d; }
:root[data-ui="new"] .sf3-kpi-pair .neg { color: #8a4a00; }
:root[data-ui="new"] .sf3-kpi.red .sf3-kpi-ic { background: #fde6e8; color: #b0202d; }
:root[data-ui="new"] .sf3-kpi.red .sf3-kpi-n { color: #b0202d; }
:root[data-ui="new"] .sf3-kpi.amber .sf3-kpi-ic { background: #fff1df; color: #8a4a00; }
:root[data-ui="new"] .sf3-kpi.amber .sf3-kpi-n { color: #8a4a00; }
:root[data-ui="new"] .sf3-kpi.mint .sf3-kpi-ic { background: #dcf5ee; color: #0a6f5d; }
:root[data-ui="new"] .sf3-kpi.mint .sf3-kpi-n { color: #0a6f5d; }
:root[data-ui="new"] .sf3-kpi.green .sf3-kpi-ic { background: #e1f4ea; color: #0b6b4a; }
:root[data-ui="new"] .sf3-kpi.green .sf3-kpi-n { color: #0b6b4a; }
:root[data-ui="new"] .sf3-kpi.sky .sf3-kpi-ic { background: #e6efff; color: #114591; }
:root[data-ui="new"] .sf3-kpi.grey .sf3-kpi-ic { background: #f1f4f9; color: #4a5a73; }
/* loading outline */
:root[data-ui="new"] .sf3-kpi.is-skel { height: 122px; cursor: default; border-color: #e7eef7; background: linear-gradient(100deg, #f4f7fb 30%, #eaf0f8 50%, #f4f7fb 70%); background-size: 220% 100%; animation: sf3-shim 1.3s linear infinite; }
:root[data-ui="new"] .sf3-kpi.is-skel:hover { transform: none; }
:root[data-ui="new"] .sf3-loading .sf3-skel { height: 14px; border-radius: 99px; background: rgba(255, 255, 255, .22); margin: 10px 0; }
:root[data-ui="new"] .sf3-loading .sf3-skel.w1 { width: 110px; height: 22px; }
:root[data-ui="new"] .sf3-loading .sf3-skel.w2 { width: min(320px, 70%); height: 30px; }
:root[data-ui="new"] .sf3-loading .sf3-skel.w3 { width: min(420px, 85%); }
@keyframes sf3-shim { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* ------------------------------------------------------------ tabs: a sticky pill row under the frame's header -- */
:root[data-ui="new"] .sf3-tabs {
    position: sticky; top: 70px; z-index: 20; margin: 0 -4px; padding: 6px 4px;
    background: linear-gradient(#eef3fa 78%, rgba(238, 243, 250, 0));
}
:root[data-ui="new"] .sf3-tabs-in {
    display: flex; gap: 4px; padding: 5px; background: #fff; border: 1px solid #dfe8f4; border-radius: 16px;
    overflow-x: auto; scrollbar-width: none; box-shadow: 0 6px 18px rgba(16, 42, 92, .06);
}
:root[data-ui="new"] .sf3-tabs-in::-webkit-scrollbar { display: none; }
:root[data-ui="new"] .sf3-tab {
    flex: 1 0 auto; justify-content: center; height: 42px; padding: 0 14px; margin: 0; border: 0; border-radius: 12px; background: transparent;
    color: #4a5a73; font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px; transition: background .15s, color .15s;
}
:root[data-ui="new"] .sf3-tab:hover { background: #f4f7fb; color: #114591; }
:root[data-ui="new"] .sf3-tab[aria-selected="true"] { background: #175bb0; color: #fff; font-weight: 700; box-shadow: 0 6px 14px rgba(23, 91, 176, .26); }
:root[data-ui="new"] .sf3-tab-n {
    min-width: 22px; height: 22px; padding: 0 7px; box-sizing: border-box; border-radius: 999px; background: #eef2f8; color: #4a5a73;
    font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
:root[data-ui="new"] .sf3-tab[aria-selected="true"] .sf3-tab-n { background: rgba(255, 255, 255, .24); color: #fff; }

/* ------------------------------------------------------------ cards -- */
:root[data-ui="new"] .sf3-body { min-width: 0; }
:root[data-ui="new"] .sf3-pane { display: flex; flex-direction: column; gap: 16px; min-width: 0; animation: sf3-in .18s ease-out; }
@keyframes sf3-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
:root[data-ui="new"] .sf3-card { background: #fff; border: 1px solid #dfe8f4; border-radius: 20px; padding: 20px 22px; min-width: 0; box-sizing: border-box; }
:root[data-ui="new"] .sf3-auto:empty { display: none; }
:root[data-ui="new"] .sf3-card-h { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 16px; }
:root[data-ui="new"] .sf3-card-tx { flex: 1 1 auto; min-width: 0; }
:root[data-ui="new"] .sf3 .sf3-card-h h2 { margin: 0; font-family: inherit; font-size: 19px; font-weight: 800; line-height: 1.25; color: #12233f; letter-spacing: 0; }
:root[data-ui="new"] .sf3-card-sub { font-size: 13px; color: #5b6b85; margin-top: 2px; }
:root[data-ui="new"] .sf3-card-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
:root[data-ui="new"] .sf3 .sf3-seg .t3l-seg-b { height: 38px; }
:root[data-ui="new"] .sf3 h3.sf3-h3 { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; font-family: inherit; font-size: 15.5px; font-weight: 800; color: #12233f; }
:root[data-ui="new"] .sf3 h3.sf3-h3 .p3-ico { color: #175bb0; }
:root[data-ui="new"] .sf3-alert { background: #fff1df; border: 1px solid #f3c98f; color: #6b3a00; border-radius: 16px; padding: 12px 16px; font-size: 14px; }

/* ------------------------------------------------------------ the lists (period on top, then search + chips + timeline) -- */
:root[data-ui="new"] .sf3-ltools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 16px; }
:root[data-ui="new"] .sf3-ltools > .t3l-btn { margin-inline-start: auto; }
:root[data-ui="new"] .sf3-pp { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; min-width: 0; }
:root[data-ui="new"] .sf3-pp .r3-field { min-width: 150px; }
:root[data-ui="new"] .sf3-pp .r3-field.r3-date { min-width: 0; }
:root[data-ui="new"] .sf3-pp .r3-label { font-size: 12.5px; }
:root[data-ui="new"] .sf3-pp select.form-control { height: 40px !important; border-radius: 12px !important; min-width: 150px; }
:root[data-ui="new"] .sf3-pp .r3-static { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 12px; background: #f4f7fb; font-weight: 700; }
:root[data-ui="new"] .sf3-lwrap { min-width: 0; }

/* the day headings joined by a timeline on the start side */
:root[data-ui="new"] .sf3 .t3l-list { position: relative; padding-inline-start: 24px; }
:root[data-ui="new"] .sf3 .t3l-list:not(.bare)::before {
    content: ""; position: absolute; inset-inline-start: 7px; top: 26px; bottom: 34px; width: 2px; border-radius: 2px;
    background: linear-gradient(#cfe0f5, #e8eff8);
}
:root[data-ui="new"] .sf3 .t3l-day { position: relative; }
:root[data-ui="new"] .sf3 .t3l-day::before {
    content: ""; position: absolute; inset-inline-start: -23px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%;
    box-sizing: border-box; background: #fff; border: 3px solid #175bb0; box-shadow: 0 0 0 4px #fff;
}
:root[data-ui="new"] .sf3 .t3l-group:first-child .t3l-day { margin-top: 6px; }
:root[data-ui="new"] .sf3 .t3l-box { border-color: #e3ebf6; box-shadow: 0 2px 8px rgba(16, 42, 92, .04); }
:root[data-ui="new"] .sf3 .t3l-foot { margin-inline-start: -24px; }
:root[data-ui="new"] .sf3 .t3l-summary { margin: 0 0 14px; }
:root[data-ui="new"] .sf3 .t3l-filter { margin-bottom: 4px; }

:root[data-ui="new"] .sf3-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 10px 12px; border-radius: 14px; background: #f7f9fc; }
:root[data-ui="new"] .sf3-sum-l { font-size: 13.5px; font-weight: 700; color: #12233f; margin-inline-end: 4px; }
:root[data-ui="new"] .sf3-racts { display: flex; gap: 4px; }
:root[data-ui="new"] .sf3-priv { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
:root[data-ui="new"] .sf3-just { flex-shrink: 0; }
:root[data-ui="new"] .sf3-just select.form-control { height: 34px !important; min-width: 120px; border-radius: 10px !important; margin: 0; }

/* grades: a bigger tone box, the group's average on the end */
:root[data-ui="new"] .sf3 .sf3-grow .t3l-grade { min-width: 52px; height: 48px; border-radius: 14px; font-size: 20px; }
:root[data-ui="new"] .sf3-gavg { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; min-width: 70px; padding: 4px 8px; border-radius: 12px; background: #f7f9fc; }
:root[data-ui="new"] .sf3-gavg small { font-size: 11px; color: #5b6b85; white-space: nowrap; }
:root[data-ui="new"] .sf3-gavg b { font-size: 15px; font-weight: 800; color: #12233f; }
:root[data-ui="new"] .sf3-avg { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
:root[data-ui="new"] .sf3-avg b { font-size: 15px; font-weight: 800; }
:root[data-ui="new"] .sf3-avg small { font-size: 11.5px; font-weight: 500; opacity: .8; }
:root[data-ui="new"] .sf3-avg.green { background: #e1f4ea; color: #0b6b4a; }
:root[data-ui="new"] .sf3-avg.sky { background: #e6efff; color: #114591; }
:root[data-ui="new"] .sf3-avg.amber { background: #fff1df; color: #8a4a00; }
:root[data-ui="new"] .sf3-avg.red { background: #fde6e8; color: #b0202d; }

/* the note editor */
:root[data-ui="new"] .sf3-editor { background: #f6f9fe; border: 1px solid #d6e4f7; border-radius: 18px; padding: 16px 18px; margin: 0 0 16px; }
:root[data-ui="new"] .sf3-editor-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
:root[data-ui="new"] .sf3 .sf3-editor-h h3 { margin: 0; font-family: inherit; font-size: 16px; font-weight: 800; color: #12233f; }
:root[data-ui="new"] .sf3-editor-txt textarea.form-control { width: 100%; min-height: 96px; border-radius: 12px !important; }
:root[data-ui="new"] .sf3-editor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-top: 12px; }
:root[data-ui="new"] .sf3-efield { display: flex; flex-direction: column; gap: 5px; margin: 0; min-width: 0; font-weight: 400; }
:root[data-ui="new"] .sf3-elbl { font-size: 12.5px; font-weight: 600; color: #4a5a73; }
:root[data-ui="new"] .sf3-efield select.form-control { width: 100%; height: 40px !important; border-radius: 12px !important; margin: 0; }
:root[data-ui="new"] .sf3-editor-meta { margin-top: 10px; font-size: 12.5px; color: #5b6b85; }
:root[data-ui="new"] .sf3-editor-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* ------------------------------------------------------------ contacts as person cards -- */
:root[data-ui="new"] .sf3-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
:root[data-ui="new"] .sf3-person {
    display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px; box-sizing: border-box;
    border: 1px solid #dfe8f4; border-radius: 18px; background: #fff;
}
:root[data-ui="new"] .sf3-person.is-st { background: linear-gradient(180deg, #f2f7ff, #fff 70%); border-color: #cfe0f5; }
:root[data-ui="new"] .sf3-person-top { display: flex; align-items: center; gap: 12px; }
:root[data-ui="new"] .sf3-pini { width: 46px; height: 46px; flex-shrink: 0; border-radius: 14px; background: #dcf5ee; color: #0a6f5d; font-size: 16px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
:root[data-ui="new"] .sf3-person.is-st .sf3-pini { background: #e6efff; color: #114591; }
:root[data-ui="new"] .sf3-person-who { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
:root[data-ui="new"] .sf3-person-n { font-size: 16px; font-weight: 700; color: #12233f; overflow-wrap: anywhere; line-height: 1.25; }
:root[data-ui="new"] .sf3-person-r { display: inline-flex; height: 22px; align-items: center; padding: 0 9px; border-radius: 999px; background: #f1f4f9; color: #4a5a73; font-size: 12px; font-weight: 600; }
:root[data-ui="new"] .sf3-person.is-st .sf3-person-r { background: #e6efff; color: #114591; }
:root[data-ui="new"] .sf3-person-l { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #4a5a73; min-width: 0; }
:root[data-ui="new"] .sf3-person-l .p3-ico { color: #8090a8; }
:root[data-ui="new"] .sf3-person-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 2px; }
:root[data-ui="new"] .sf3-pill {
    display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; height: 34px; padding: 0 12px; margin: 0; box-sizing: border-box;
    border-radius: 999px; border: 1px solid #dfe8f4; background: #fff; color: #114591 !important; font-size: 13px; font-weight: 600; line-height: 1;
    text-decoration: none !important; white-space: nowrap; cursor: pointer;
}
:root[data-ui="new"] .sf3-pill > span[dir="ltr"] { overflow: hidden; text-overflow: ellipsis; }
:root[data-ui="new"] :is(a, button).sf3-pill:hover { background: #eef5ff; border-color: #b9d3f4; }
:root[data-ui="new"] .sf3-pill.static { cursor: default; background: #f7f9fc; border-color: #eef2f8; color: #12233f !important; }
:root[data-ui="new"] .sf3-pill.static .p3-ico { color: #8090a8; }
:root[data-ui="new"] .sf3-pill.soft { background: #eef5ff; border-color: #eef5ff; }
:root[data-ui="new"] .sf3-pill.wa { background: #f0fbf7; border-color: #c4ebdf; color: #0a6f5d !important; }
:root[data-ui="new"] .sf3-pill.off { color: #8090a8 !important; }
:root[data-ui="new"] .sf3-warn { height: 20px; padding: 0 7px; border-radius: 999px; background: #fff1df; color: #8a4a00; font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; }

/* ------------------------------------------------------------ personal files as file cards -- */
:root[data-ui="new"] .sf3-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
:root[data-ui="new"] .sf3-file { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px; border: 1px solid #dfe8f4; border-radius: 16px; background: #fff; transition: border-color .15s, box-shadow .15s; }
:root[data-ui="new"] .sf3-file:hover { border-color: #b9d3f4; box-shadow: 0 8px 20px rgba(16, 42, 92, .07); }
:root[data-ui="new"] .sf3-file-ic { width: 48px; height: 54px; flex-shrink: 0; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
:root[data-ui="new"] .sf3-file-ic small { font-size: 10px; font-weight: 800; letter-spacing: .4px; line-height: 1; }
:root[data-ui="new"] .sf3-file-ic.red { background: #fde6e8; color: #b0202d; }
:root[data-ui="new"] .sf3-file-ic.mint { background: #dcf5ee; color: #0a6f5d; }
:root[data-ui="new"] .sf3-file-ic.green { background: #e1f4ea; color: #0b6b4a; }
:root[data-ui="new"] .sf3-file-ic.sky { background: #e6efff; color: #114591; }
:root[data-ui="new"] .sf3-file-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
:root[data-ui="new"] .sf3-file-d { font-size: 14.5px; font-weight: 700; color: #12233f; overflow-wrap: anywhere; line-height: 1.3; }
:root[data-ui="new"] .sf3-file-n { font-size: 12.5px; color: #4a5a73; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-ui="new"] .sf3-file-m { font-size: 12px; color: #5b6b85; }
:root[data-ui="new"] .sf3-file-acts { flex-shrink: 0; display: flex; align-items: center; gap: 6px; }
:root[data-ui="new"] .sf3-upload { margin: 0 0 16px; padding: 14px 16px; border: 1.5px dashed #b9d3f4; border-radius: 16px; background: #f7faff; }
:root[data-ui="new"] .sf3-upload-row { display: flex; flex-wrap: wrap; gap: 12px; }
:root[data-ui="new"] .sf3-efield.grow { flex: 1 1 260px; }
:root[data-ui="new"] .sf3-upload textarea.form-control { border-radius: 12px !important; min-height: 44px; }
:root[data-ui="new"] .sf3-fileinput { max-width: 100%; font-size: 13px; padding: 9px 0; }
:root[data-ui="new"] .sf3-upload-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
:root[data-ui="new"] .sf3-hint { font-size: 12px; color: #5b6b85; flex: 1 1 260px; }
:root[data-ui="new"] .sf3-upload-acts { display: flex; gap: 8px; margin-inline-start: auto; }

/* ------------------------------------------------------------ נוכחות סדירה: tiles and date chips -- */
:root[data-ui="new"] .sf3-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 18px; }
:root[data-ui="new"] .sf3-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; padding: 12px 14px; border: 1px solid #dfe8f4; border-radius: 16px; background: #fff; }
:root[data-ui="new"] .sf3-stat-ic { width: 30px; height: 30px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 4px; background: #f1f4f9; color: #4a5a73; }
:root[data-ui="new"] .sf3-stat-n { font-size: 24px; font-weight: 800; line-height: 1.15; color: #12233f; }
:root[data-ui="new"] .sf3-stat-l { font-size: 13px; font-weight: 700; color: #12233f; }
:root[data-ui="new"] .sf3-stat-s { font-size: 12px; color: #5b6b85; }
:root[data-ui="new"] .sf3-stat.red .sf3-stat-ic { background: #fde6e8; color: #b0202d; }
:root[data-ui="new"] .sf3-stat.red .sf3-stat-n { color: #b0202d; }
:root[data-ui="new"] .sf3-stat.amber .sf3-stat-ic { background: #fff1df; color: #8a4a00; }
:root[data-ui="new"] .sf3-stat.amber .sf3-stat-n { color: #8a4a00; }
:root[data-ui="new"] .sf3-stat.mint .sf3-stat-ic { background: #dcf5ee; color: #0a6f5d; }
:root[data-ui="new"] .sf3-stat.mint .sf3-stat-n { color: #0a6f5d; }
:root[data-ui="new"] .sf3-stat.sky .sf3-stat-ic { background: #e6efff; color: #114591; }
:root[data-ui="new"] .sf3-dates { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; }
:root[data-ui="new"] .sf3-dates-l { font-size: 13px; font-weight: 700; color: #4a5a73; }
:root[data-ui="new"] .sf3-dchips { display: flex; flex-wrap: wrap; gap: 6px; }
:root[data-ui="new"] .sf3-dchip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
:root[data-ui="new"] .sf3-dchip small { font-size: 11px; font-weight: 600; opacity: .85; }
:root[data-ui="new"] .sf3-dchip.red { background: #fde6e8; color: #b0202d; }
:root[data-ui="new"] .sf3-dchip.amber { background: #fff1df; color: #8a4a00; }
:root[data-ui="new"] .sf3-dchip.green { background: #e1f4ea; color: #0b6b4a; }

/* ------------------------------------------------------------ the parts drawn as before (timetable, adjustments, profile, periodic assessments) -- */
:root[data-ui="new"] .sf3-tt { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
:root[data-ui="new"] .sf3-tt .weekly-schedule .xprint textarea.form-control { min-height: 44px; height: 44px; border-radius: 12px !important; margin-bottom: 10px; }
:root[data-ui="new"] .sf3-tt .setting-list-teachers { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
:root[data-ui="new"] .sf3-tt .set-sched {
    display: inline-flex; align-items: center; gap: 6px; min-height: 34px; margin: 0; padding: 0 12px; border-radius: 999px; border: 1px solid #dfe8f4;
    background: #fff; color: #4a5a73; font-size: 13px; font-weight: 600; white-space: nowrap;
}
:root[data-ui="new"] .sf3-tt .set-sched:has(> input:checked) { background: #e6efff; border-color: #b9d3f4; color: #114591; }
:root[data-ui="new"] .sf3-tt .set-sched input[type="checkbox"] { margin: 0; flex-shrink: 0; }
:root[data-ui="new"] .sf3-tt .weekly-schedule table.table { width: 100%; }
:root[data-ui="new"] .sf3 :is(.sf3-legacy, .sf3-card) .seperator-header { border: 0; margin: 4px 0 12px; text-align: start; line-height: 1.3; }
:root[data-ui="new"] .sf3 :is(.sf3-legacy, .sf3-card) .seperator-header span { background: none; padding: 0; }
:root[data-ui="new"] .sf3 :is(.sf3-legacy, .sf3-card) .seperator-header .tab-header { font-size: 16px; font-weight: 800; color: #12233f; }
:root[data-ui="new"] .sf3 .sf3-legacy .pad { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin-bottom: 14px; }
:root[data-ui="new"] .sf3 .sf3-legacy .pad > a.btn {
    height: 36px; padding: 0 14px; border-radius: 999px; border: 1.5px solid #dfe8f4; background: #fff; color: #4a5a73;
    font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; box-shadow: none;
}
:root[data-ui="new"] .sf3 .sf3-legacy .pad > a.btn:hover { border-color: #b9d3f4; color: #114591; }
:root[data-ui="new"] .sf3 .sf3-legacy .pad > a.btn.active { background: #e6efff; border-color: #9cc2f2; color: #114591; font-weight: 700; }
:root[data-ui="new"] .sf3 .sf3-tala h6.feature { background: #e6efff !important; color: #114591; border-radius: 10px; padding: 8px 12px; font-size: 14px; font-weight: 700; }
:root[data-ui="new"] .sf3 .sf3-tala .feature { margin: 6px 0; }
:root[data-ui="new"] .sf3 .sf3-card > .pull-right.xprint { float: none !important; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
:root[data-ui="new"] .sf3 .sf3-card-tools > .pull-right { float: none !important; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
:root[data-ui="new"] .sf3 .sf3-card-tools .btn { border-radius: 999px; height: 34px; padding: 0 12px; display: inline-flex; align-items: center; gap: 5px; }
:root[data-ui="new"] .sf3 .sf3-card-tools .btn .glyphicon { top: 0; }
/* the student profile: one soft tile per field (label above, the answer below) */
:root[data-ui="new"] .sf3 .sf3-skills .p-skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px; }
:root[data-ui="new"] .sf3 .sf3-skills .p-skills > :not(.p-skill) { grid-column: 1 / -1; }
:root[data-ui="new"] .sf3 .sf3-skills .p-skill { display: block; margin: 0; padding: 12px 14px; min-width: 0; background: #f7f9fc; border: 1px solid #eef2f8; border-radius: 14px; font-size: 14px; font-weight: 600; color: #12233f; overflow-wrap: anywhere; }
:root[data-ui="new"] .sf3 .sf3-skills .p-skill .u { display: block; margin-bottom: 4px; font-size: 12.5px; font-weight: 600; color: #5b6b85; text-decoration: none; }
:root[data-ui="new"] .sf3 .sf3-skills .p-skill .em { color: #5b6b85; }
:root[data-ui="new"] .sf3 .sf3-skills .p-skill textarea { width: 100%; border-radius: 10px !important; }
:root[data-ui="new"] .sf3 .sf3-legacy .student-assesments-report > p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
:root[data-ui="new"] .sf3 .sf3-legacy .table-responsive { border: 0; margin: 0; }
:root[data-ui="new"] .sf3 .sf3-aklim { margin-top: 26px; padding-top: 18px; border-top: 1px solid #eef2f8; }

/* ------------------------------------------------------------ tablets -- */
@media (max-width: 1099px) {
    :root[data-ui="new"] .sf3-acts { flex-direction: row; flex-wrap: wrap; flex-basis: 100%; }
}

/* ------------------------------------------------------------ phones (< 768px): compact hero, 2-column tiles, no sideways scroll -- */
@media (max-width: 767px) {
    :root[data-ui="new"] .sf3 { gap: 12px; }
    :root[data-ui="new"] .sf3-hero { border-radius: 20px; padding: 18px 16px 56px; }
    :root[data-ui="new"] .sf3-hero.flat { padding-bottom: 18px; }
    :root[data-ui="new"] .sf3-hero::before { width: 170px; height: 170px; border-width: 24px; inset-inline-start: -60px; top: -70px; }
    :root[data-ui="new"] .sf3-hero-in { gap: 14px; align-items: flex-start; }
    :root[data-ui="new"] .sf3-ava { width: 68px; height: 68px; border-radius: 20px; border-width: 2px; }
    :root[data-ui="new"] .sf3-ava-ini { font-size: 24px; }
    :root[data-ui="new"] .sf3-who { flex: 1 1 0; }
    :root[data-ui="new"] .sf3-kicker { height: 22px; font-size: 11.5px; padding: 0 9px; }
    :root[data-ui="new"] .sf3 .sf3-name { font-size: 23px; margin: 6px 0 0; }
    :root[data-ui="new"] .sf3-facts { flex-basis: 100%; gap: 6px; }
    :root[data-ui="new"] .sf3-fact { min-height: 28px; padding: 3px 10px; font-size: 12.5px; }
    :root[data-ui="new"] .sf3-acts { gap: 6px; }
    :root[data-ui="new"] .sf3-act { height: 38px; padding: 0 13px; font-size: 13px; }
    :root[data-ui="new"] .sf3-kcap { margin-top: 14px; }

    :root[data-ui="new"] .sf3-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: -54px 8px 0; }
    :root[data-ui="new"] .sf3-kpi { max-width: none; }
    :root[data-ui="new"] .sf3-kpis.odd > :last-child { grid-column: 1 / -1; }
    /* compact tiles: the icon goes to the top end corner, the number starts the tile */
    :root[data-ui="new"] .sf3-kpi { padding: 11px 12px 12px; border-radius: 18px; }
    :root[data-ui="new"] .sf3-kpi-ic { position: absolute; top: 10px; inset-inline-end: 10px; width: 28px; height: 28px; border-radius: 9px; margin: 0; }
    :root[data-ui="new"] .sf3-kpi-ic .p3-ico { width: 16px; height: 16px; }
    :root[data-ui="new"] .sf3-kpi-n { font-size: 25px; padding-inline-end: 30px; }
    :root[data-ui="new"] .sf3-kpi-l { font-size: 13px; }
    :root[data-ui="new"] .sf3-kpi.is-skel { height: 92px; }

    :root[data-ui="new"] .sf3-tabs { top: 64px; margin: 0 -10px; padding: 6px 10px; }
    :root[data-ui="new"] .sf3-tabs-in { border-radius: 14px; }
    :root[data-ui="new"] .sf3-tab { flex: 0 0 auto; height: 40px; padding: 0 12px; font-size: 13.5px; }

    :root[data-ui="new"] .sf3-card { padding: 14px; border-radius: 18px; }
    :root[data-ui="new"] .sf3-card-h { margin-bottom: 12px; }
    :root[data-ui="new"] .sf3 .sf3-card-h h2 { font-size: 17px; }
    :root[data-ui="new"] .sf3-card-tools { flex-basis: 100%; }
    :root[data-ui="new"] .sf3-card-tools > .t3l-seg { display: flex; width: 100%; }
    :root[data-ui="new"] .sf3-card-tools > .t3l-seg > .t3l-seg-b { flex: 1 0 auto; justify-content: center; }

    :root[data-ui="new"] .sf3-ltools { gap: 10px; }
    :root[data-ui="new"] .sf3-ltools > .t3l-btn { margin: 0; flex: 1 1 100%; }
    :root[data-ui="new"] .sf3-pp { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    :root[data-ui="new"] .sf3-pp .r3-field { min-width: 0; }
    :root[data-ui="new"] .sf3-pp select.form-control { min-width: 0; width: 100%; }
    :root[data-ui="new"] .sf3 .t3l-list { padding-inline-start: 18px; }
    :root[data-ui="new"] .sf3 .t3l-list:not(.bare)::before { inset-inline-start: 5px; }
    :root[data-ui="new"] .sf3 .t3l-day::before { inset-inline-start: -18px; width: 12px; height: 12px; margin-top: -6px; }
    :root[data-ui="new"] .sf3 .t3l-foot { margin-inline-start: -18px; }
    :root[data-ui="new"] .sf3 .sf3-grow .t3l-grade { min-width: 46px; height: 44px; font-size: 18px; }
    /* an event with the justification select: the select takes its own line */
    :root[data-ui="new"] .sf3 .t3l-row:has(> .sf3-just) { flex-wrap: wrap; }
    :root[data-ui="new"] .sf3-just { order: 3; flex: 1 1 100%; }
    :root[data-ui="new"] .sf3-just select.form-control { width: 100%; }
    :root[data-ui="new"] .sf3 .sf3-seg .t3l-seg-b { padding: 0 10px; }
    :root[data-ui="new"] .sf3 .sf3-seg .t3l-seg-b .p3-ico { display: none; }
    :root[data-ui="new"] .sf3-gavg { display: none; }

    :root[data-ui="new"] .sf3-person { padding: 14px; }
    :root[data-ui="new"] .sf3-file { flex-wrap: wrap; }
    :root[data-ui="new"] .sf3-file-acts { width: 100%; justify-content: flex-end; }
    :root[data-ui="new"] .sf3-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    :root[data-ui="new"] .sf3-editor { padding: 14px; }
    :root[data-ui="new"] .sf3-upload-acts { width: 100%; }
    :root[data-ui="new"] .sf3-upload-acts > .t3l-btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
    :root[data-ui="new"] .sf3 *, :root[data-ui="new"] .sf3-kpi.is-skel { animation: none !important; transition: none !important; }
    :root[data-ui="new"] .sf3-kpi:hover { transform: none; }
}

@media print {
    :root[data-ui="new"] .sf3-hero { background: none !important; color: #12233f; box-shadow: none; padding: 0 0 12px; border-radius: 0; }
    :root[data-ui="new"] .sf3-hero::before { display: none; }
    :root[data-ui="new"] .sf3 .sf3-name, :root[data-ui="new"] .sf3-fact b, :root[data-ui="new"] .sf3-kicker { color: #12233f; text-shadow: none; }
    :root[data-ui="new"] .sf3-fact { color: #12233f; border-color: #dfe8f4; }
    :root[data-ui="new"] .sf3-kpis { margin: 0; }
    :root[data-ui="new"] .sf3-kpi { box-shadow: none; }
    :root[data-ui="new"] .sf3-tabs { display: none; }
}

/* ------------------------------------------------------------ calm tab and student switches -- */
/* StudentCard3.js holdBody / bodyHook: the content area keeps its height (an inline min-height) until the new tab has
   loaded. A remote tab shows a skeleton card, a list its skeleton rows - each fades in only after 150ms, so a quick
   answer shows no flash - and the content fades in when it arrives. */
:root[data-ui="new"] .sf3-body { overflow-anchor: none; }
@keyframes sf3-fade { from { opacity: 0; } to { opacity: 1; } }
:root[data-ui="new"] .sf3 :is(.t3l-list, .t3l-empty, .t3l-tablewrap) { animation: sf3-fade .18s ease-out; }
:root[data-ui="new"] .sf3-skelcard { animation: sf3-fade .2s ease-out .15s both; }
:root[data-ui="new"] .sf3-sk {
    height: 13px; border-radius: 99px;
    background: linear-gradient(100deg, #f1f4f9 30%, #e7edf6 50%, #f1f4f9 70%); background-size: 220% 100%; animation: sf3-shim 1.3s linear infinite;
}
:root[data-ui="new"] .sf3-sk.t { width: 210px; max-width: 60%; height: 22px; }
:root[data-ui="new"] .sf3-sk.s { width: 320px; max-width: 80%; margin: 10px 0 20px; }
:root[data-ui="new"] .sf3-sk.r { height: 52px; border-radius: 14px; margin-top: 10px; }
:root[data-ui="new"] .sf3-sk.r.short { width: 70%; }
/* a list's loading row (ui3 TableList, the period picker, the files): three skeleton rows instead of the spinner */
:root[data-ui="new"] .sf3 .t3l-loading { position: relative; display: block; padding: 0; margin: 4px 0; animation: sf3-fade .2s ease-out .15s both; }
:root[data-ui="new"] .sf3 .t3l-loading > * { display: none; }
:root[data-ui="new"] .sf3 .t3l-loading::before {
    content: ""; display: block; height: 172px; border-radius: 14px;
    background: linear-gradient(100deg, #f1f4f9 30%, #e7edf6 50%, #f1f4f9 70%); background-size: 220% 100%; animation: sf3-shim 1.3s linear infinite;
}
:root[data-ui="new"] .sf3 .t3l-loading::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(#fff, #fff) 0 52px / 100% 8px no-repeat, linear-gradient(#fff, #fff) 0 112px / 100% 8px no-repeat;
}
/* the hero's "contacts" action stays on the contacts tab (disabled), so the hero keeps its height */
:root[data-ui="new"] .sf3-act:disabled, :root[data-ui="new"] .sf3-act:disabled:hover { opacity: .55; cursor: default; background: rgba(255, 255, 255, .13); }
/* the student skeleton at the card's own heights: the actions, the period line, tiles as tall as the real ones, the tabs */
:root[data-ui="new"] .sf3-loading .sf3-skel.act { width: 150px; height: 40px; margin: 0; }
:root[data-ui="new"] .sf3-loading .sf3-skel.cap { width: 120px; height: 12px; margin: 23px 0 3px; }
:root[data-ui="new"] .sf3-kpi.is-skel { height: 144px; }
:root[data-ui="new"] .sf3-skel-tab {
    min-width: 110px; cursor: default; background: linear-gradient(100deg, #f4f7fb 30%, #eaf0f8 50%, #f4f7fb 70%);
    background-size: 220% 100%; animation: sf3-shim 1.3s linear infinite;
}
:root[data-ui="new"] .sf3-loading .sf3-tab[aria-disabled="true"] { cursor: progress; }
:root[data-ui="new"] .sf3-loading .sf3-tab[aria-disabled="true"]:not([aria-selected="true"]):hover { background: transparent; color: #4a5a73; }
@media (max-width: 767px) {
    /* ui2.css hides the page's sideways overflow on phones with overflow-x: hidden, which makes <body> a scroll
       container and stops the sticky tab bar from ever sticking; clip keeps the page from scrolling sideways without
       that (only on a page with the student card) */
    :root[data-ui="new"] body:has(.sf3) { overflow-x: clip; }
    :root[data-ui="new"] .sf3-loading .sf3-skel.act { width: 140px; height: 38px; }
    :root[data-ui="new"] .sf3-loading .sf3-skel.w3 { margin-bottom: 20px; }
    :root[data-ui="new"] .sf3-loading .sf3-skel.cap { margin-top: 17px; }
    :root[data-ui="new"] .sf3-kpi.is-skel { height: 90px; }
    :root[data-ui="new"] .sf3-skel-tab { min-width: 96px; }
    :root[data-ui="new"] .sf3 .t3l-loading::before { height: 142px; }
    :root[data-ui="new"] .sf3 .t3l-loading::after { background-position: 0 42px, 0 92px; }
}
@media (prefers-reduced-motion: reduce) {
    :root[data-ui="new"] .sf3 *::before, :root[data-ui="new"] .sf3 *::after { animation: none !important; }
}