/* ui3-admin.css: the admin screens (תשתית hub, teachers list, dashboard) - 2026 staff screens, new ui only: every rule is scoped under :root[data-ui="new"]. Sizes in px. */

/* ============================== shared page parts ============================== */
:root[data-ui="new"] .a3-page { display: flex; flex-direction: column; gap: 18px; color: #12233f; font-family: "Rubik", system-ui, sans-serif; font-variant-numeric: tabular-nums; }
:root[data-ui="new"] .a3-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
:root[data-ui="new"] .a3-head-tx { flex: 1 1 260px; min-width: 0; }
:root[data-ui="new"] .a3-head h1 { margin: 0; font-family: inherit; font-size: 26px; font-weight: 800; line-height: 1.25; color: #12233f; }
:root[data-ui="new"] .a3-sub { font-size: 14px; color: #5b6b85; margin-top: 4px; }
:root[data-ui="new"] .a3-card { background: #fff; border: 1px solid #dfe8f4; border-radius: 20px; }
:root[data-ui="new"] .a3-page .p3-ico { flex-shrink: 0; display: block; }

:root[data-ui="new"] .a3-search {
    flex: 0 1 320px; min-width: 0; display: flex; align-items: center; gap: 10px; height: 44px; margin: 0; padding: 0 14px;
    border-radius: 14px; background: #fff; border: 1px solid #dfe8f4; color: #5b6b85; font-weight: 400; cursor: text;
}
:root[data-ui="new"] .a3-search:focus-within { border-color: #175bb0; box-shadow: 0 0 0 3px rgba(23, 91, 176, .16); }
:root[data-ui="new"] .a3-search input::placeholder { color: #7b8aa3; }
:root[data-ui="new"] .a3-search input { flex: 1; min-width: 0; height: 40px; border: 0; background: transparent; color: #12233f; font-size: 14px; outline: none; box-shadow: none; padding: 0; }

:root[data-ui="new"] .a3-chip { flex-shrink: 0; font-size: 12px; font-weight: 700; line-height: 1.5; color: #114591; background: #e6efff; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
:root[data-ui="new"] .a3-chip.mint { color: #0a6f5d; background: #dcf5ee; }
:root[data-ui="new"] .a3-chip.ok { color: #0b6b4a; background: #e1f4ea; }

/* ============================== תשתית hub (settings.html#!/infra) ============================== */
:root[data-ui="new"] .a3-infra { gap: 20px; }
:root[data-ui="new"] .a3-infra-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 18px; align-items: start; }
:root[data-ui="new"] .a3-group { padding: 16px 18px 8px; min-width: 0; }
:root[data-ui="new"] .a3-group h2 { margin: 0 0 6px; font-family: inherit; font-size: 17px; font-weight: 800; color: #12233f; }
:root[data-ui="new"] a.a3-item { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid #eef2f8; color: #12233f !important; text-decoration: none !important; }
:root[data-ui="new"] a.a3-item:last-child { border-bottom: 0; }
:root[data-ui="new"] a.a3-item:hover b { color: #0d3f80; }
:root[data-ui="new"] a.a3-item:focus-visible { outline: 2px solid #175bb0 !important; outline-offset: 2px !important; border-radius: 12px; }
:root[data-ui="new"] .a3-item-ico { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; background: #e6efff; color: #114591; display: flex; align-items: center; justify-content: center; }
:root[data-ui="new"] .a3-item-ico.mint { background: #dcf5ee; color: #0a6f5d; }
:root[data-ui="new"] .a3-item-tx { flex: 1; min-width: 0; }
:root[data-ui="new"] .a3-item-tx b { display: block; font-size: 15px; font-weight: 700; line-height: 1.35; }
:root[data-ui="new"] .a3-item-tx span { display: block; font-size: 13px; color: #5b6b85; line-height: 1.4; }
:root[data-ui="new"] .a3-item-go { display: inline-flex; color: #8090a8; }
:root[data-ui="new"] .a3-empty { padding: 28px 18px; text-align: center; color: #5b6b85; font-size: 14px; }

/* buttons of the page headers */
:root[data-ui="new"] .a3-btn {
    display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: 12px; cursor: pointer;
    background: #fff; border: 1px solid #dfe8f4; color: #12233f !important; font-family: inherit; font-size: 14px; font-weight: 600;
    text-decoration: none !important; white-space: nowrap; line-height: 1;
}
:root[data-ui="new"] .a3-btn:hover { border-color: #175bb0; color: #114591 !important; }
:root[data-ui="new"] .a3-btn.primary { background: #175bb0; border-color: #175bb0; color: #fff !important; font-weight: 700; padding: 0 16px; box-shadow: 0 8px 18px rgba(23, 91, 176, .28); }
:root[data-ui="new"] .a3-btn.primary:hover { background: #114591; border-color: #114591; color: #fff !important; }
:root[data-ui="new"] .a3-btn:focus-visible { outline: 2px solid #175bb0 !important; outline-offset: 2px !important; }

/* ============================== רשימת המורים (settings.html#!/settings/teachers) ============================== */
:root[data-ui="new"] .a3-teachers { gap: 16px; }
:root[data-ui="new"] .a3-table-card { padding: 16px 18px; min-width: 0; }
/* the table's own toolbar: quiet pills instead of the gradient buttons */
:root[data-ui="new"] .a3-teachers .datatable-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px; padding: 0; }
:root[data-ui="new"] .a3-teachers .datatable-toolbar > span { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 !important; white-space: normal; }
:root[data-ui="new"] .a3-teachers .datatable-toolbar .btn {
    margin: 0 !important; height: 36px; padding: 0 12px !important; border-radius: 999px !important; display: inline-flex; align-items: center; gap: 6px;
    background: #fff !important; border: 1px solid #dfe8f4 !important; color: #4a5a73 !important; box-shadow: none !important; filter: none !important;
    font-size: 13px; font-weight: 600;
}
:root[data-ui="new"] .a3-teachers .datatable-toolbar .btn:hover { border-color: #b9d3f4 !important; background: #f4f8fe !important; color: #114591 !important; transform: none; }
:root[data-ui="new"] .a3-teachers .datatable-toolbar .btn .glyphicon { font-size: 12px; top: 0; }
:root[data-ui="new"] .a3-teachers .datatable-toolbar .btn .badge { background: #175bb0 !important; padding: 2px 7px; font-size: 11px; }
/* the table itself */
:root[data-ui="new"] .a3-teachers .table-responsive { border: 0; margin: 0; }
:root[data-ui="new"] .a3-teachers table.table-editor { background: transparent; border-radius: 0; overflow: visible; margin: 0; font-size: 14px; color: #12233f; }
:root[data-ui="new"] .a3-teachers table.table-editor > thead > tr > th {
    background: transparent !important; border-bottom: 1px solid #e6edf6 !important; border-top: 0 !important; color: #5b6b85 !important;
    font-size: 12px; font-weight: 700; padding: 0 6px 8px !important; white-space: nowrap; vertical-align: bottom;
}
:root[data-ui="new"] .a3-teachers table.table-editor > thead > tr > th .glyphicon { font-size: 10px; color: #8090a8; }
:root[data-ui="new"] .a3-teachers table.table-editor > thead > tr.filters > th { padding: 8px 4px !important; border-bottom: 1px solid #e6edf6 !important; vertical-align: top; }
:root[data-ui="new"] .a3-teachers table.table-editor > tbody > tr,
:root[data-ui="new"] .a3-teachers table.table-editor > tbody > tr.teven { background: #fff !important; }
:root[data-ui="new"] .a3-teachers table.table-editor > tbody > tr:hover { background: #f7f9fc !important; }
:root[data-ui="new"] .a3-teachers table.table-editor > tbody > tr.selected { background: #f4f8fe !important; }
:root[data-ui="new"] .a3-teachers table.table-editor > tbody > tr > td { padding: 9px 6px !important; border-top: 0 !important; border-bottom: 1px solid #eef2f8; vertical-align: middle; }
:root[data-ui="new"] .a3-teachers table.table-editor > tbody > tr:last-child > td { border-bottom: 0; }
:root[data-ui="new"] .a3-teachers table.table-editor td.num { color: #8090a8; font-size: 12px; }
:root[data-ui="new"] .a3-mask { color: #4a5a73; white-space: nowrap; unicode-bidi: isolate; letter-spacing: .3px; }
/* row actions: soft grey buttons - the three named ones read as words, edit/delete stay icons */
:root[data-ui="new"] .a3-teachers td.actions { width: 1%; }
:root[data-ui="new"] .a3-teachers td.actions .btn {
    height: 34px; min-width: 34px; margin: 0 1px !important; padding: 0 9px !important; border-radius: 10px !important; display: inline-flex; align-items: center; justify-content: center;
    background: #f1f4f9 !important; border: 0 !important; color: #12233f !important; box-shadow: none !important; font-size: 13px; font-weight: 500; vertical-align: middle;
}
:root[data-ui="new"] .a3-teachers td.actions .btn:hover { background: #e6efff !important; color: #114591 !important; transform: none; }
:root[data-ui="new"] .a3-teachers td.actions .btn:nth-child(-n+3) > .glyphicon { display: none; }
:root[data-ui="new"] .a3-teachers td.actions .btn > .glyphicon { top: 0; font-size: 12px; }
:root[data-ui="new"] .a3-teachers td.actions .btn .glyphicon-remove { color: #b0202d; }
:root[data-ui="new"] .a3-teachers .pagination { margin: 14px 0 0; }

/* ============================== TableEditor in the 2026 look (components/TableEditor.js te3View) ==============================
   Every settings list drawn by TableEditor (teachers, students, groups, roles...): one toolbar row (search, chips, pill
   tools), the sky bar of the selected rows, a table with a sticky #f7f9fc header, row hover, a tinted selected row, soft
   row actions (delete / duplicate under ⋮), "מוצגים 1–20 מתוך 51" + the pager. The teachers list adds the merged
   "מורה" column, the phone list and the teacher's sheet (settings/SettingTeachers.js). */
:root[data-ui="new"] .te3 { font-variant-numeric: tabular-nums; color: #12233f; }
:root[data-ui="new"] .te3-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; }
:root[data-ui="new"] .te3-search {
    flex: 1 1 220px; max-width: 360px; min-width: 0; height: 42px; margin: 0; padding: 0 12px; box-sizing: border-box; display: flex; align-items: center; gap: 8px;
    border: 1px solid #dfe8f4; border-radius: 12px; background: #f7f9fc; color: #5b6b85; font-weight: 400; cursor: text;
}
:root[data-ui="new"] .te3-search:focus-within { border-color: #175bb0; background: #fff; box-shadow: 0 0 0 3px rgba(23, 91, 176, .16); }
:root[data-ui="new"] .te3-search input {
    flex: 1; min-width: 0; height: 40px; padding: 0; border: 0; background: transparent; box-sizing: border-box; box-shadow: none; outline: none;
    -webkit-appearance: none; appearance: none; font-family: inherit; font-size: 14px; color: #12233f;
}
:root[data-ui="new"] .te3-search input::placeholder { color: #7b8aa3; }
:root[data-ui="new"] .te3-chips { display: flex; flex-wrap: wrap; gap: 6px; }
:root[data-ui="new"] .te3-chip {
    flex-shrink: 0; height: 36px; padding: 0 13px; border-radius: 999px; border: 1.5px solid #dfe8f4; background: #fff; color: #4a5a73;
    font-family: inherit; font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
:root[data-ui="new"] .te3-chip b { font-weight: inherit; }
:root[data-ui="new"] .te3-chip:hover { border-color: #b9d3f4; color: #114591; }
:root[data-ui="new"] .te3-chip[aria-pressed="true"] { background: #e6efff; border-color: #9cc2f2; color: #114591; font-weight: 700; }
:root[data-ui="new"] .te3-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-inline-start: auto; }
:root[data-ui="new"] .te3-tool {
    display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid #dfe8f4; background: #fff;
    color: #12233f; font-family: inherit; font-size: 13.5px; font-weight: 700; white-space: nowrap; cursor: pointer; line-height: 1;
}
:root[data-ui="new"] .te3-tool:hover { border-color: #b9d3f4; background: #f4f8fe; color: #114591; }
:root[data-ui="new"] .te3-tool[aria-pressed="true"] { background: #e6efff; border-color: #9cc2f2; color: #114591; }
:root[data-ui="new"] .te3-tools .btn { height: 40px; margin: 0 !important; border-radius: 12px !important; }
:root[data-ui="new"] :is(.te3-tool, .te3-chip, .te3-act, .te3-ibtn, .te3-bulk-b, .te3-th, .te3-prow, .te3-sh-tile, .te3-sh-out):focus-visible { outline: 2px solid #175bb0; outline-offset: 2px; }

/* the bar of the selected rows */
:root[data-ui="new"] .te3-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; margin: 0 0 12px; border-radius: 14px; background: #175bb0; color: #fff; }
:root[data-ui="new"] .te3-bulk > b { font-size: 14px; font-weight: 700; }
:root[data-ui="new"] .te3-bulk-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-inline-start: auto; }
:root[data-ui="new"] .te3-bulk-b {
    display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .4);
    background: rgba(255, 255, 255, .14); color: #fff; font-family: inherit; font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer;
}
:root[data-ui="new"] .te3-bulk-b:hover { background: rgba(255, 255, 255, .24); }
:root[data-ui="new"] .te3-bulk-b.ghost { border-color: transparent; background: transparent; font-weight: 600; }
:root[data-ui="new"] .te3-bulk-b:focus-visible { outline-color: #fff; }

/* the table: framed, scrolls sideways inside the card; a long page scrolls inside it so the header stays in view */
:root[data-ui="new"] .te3-scroll { max-width: 100%; overflow-x: auto; border: 1px solid #dfe8f4; border-radius: 16px; background: #fff; -webkit-overflow-scrolling: touch; }
@media (min-width: 768px) {
    :root[data-ui="new"] .te3-scroll:has(> table > tbody > tr:nth-child(16)) { max-height: calc(100vh - 170px); overflow-y: auto; overscroll-behavior: contain; }
}
:root[data-ui="new"] table.te3-table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; background: transparent; font-size: 14px; color: #12233f; }
:root[data-ui="new"] table.te3-table > thead > tr > th {
    position: sticky; top: 0; z-index: 2; background: #f7f9fc; padding: 10px 8px; border: 0; border-bottom: 1px solid #dfe8f4;
    text-align: start; vertical-align: middle; white-space: nowrap; font-size: 12.5px; font-weight: 700; color: #4a5a73;
}
:root[data-ui="new"] table.te3-table > thead > tr.filters > th { position: static; padding: 8px 6px; background: #fff; border-bottom: 1px solid #eef2f8; vertical-align: top; font-weight: 400; }
:root[data-ui="new"] table.te3-table > thead > tr.filters .form-control { min-width: 90px; height: 36px; padding: 0 10px; border-radius: 10px; font-size: 13px; }
:root[data-ui="new"] table.te3-table > thead > tr > th.sorted { color: #114591; }
:root[data-ui="new"] .te3-th { display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; white-space: nowrap; cursor: pointer; }
:root[data-ui="new"] .te3-th:hover { color: #114591; }
:root[data-ui="new"] .te3-sort { display: inline-flex; opacity: 0; transition: opacity .15s; }
:root[data-ui="new"] .te3-th:hover .te3-sort { opacity: .55; }
:root[data-ui="new"] .te3-sort.on { opacity: 1; color: #114591; }
:root[data-ui="new"] .te3-sort.desc .p3-ico { transform: rotate(180deg); }
:root[data-ui="new"] .te3-fstack { display: grid; gap: 6px; }
:root[data-ui="new"] .te3-f { display: block; margin: 0; font-weight: 400; }
:root[data-ui="new"] .te3-f > small { display: block; margin: 0 0 2px; font-size: 11.5px; font-weight: 600; color: #5b6b85; }
:root[data-ui="new"] table.te3-table > tbody > tr > td { height: 54px; padding: 8px; border: 0; border-bottom: 1px solid #eef2f8; vertical-align: middle; background: transparent; }
:root[data-ui="new"] table.te3-table > tbody > tr:last-child > td { border-bottom: 0; }
:root[data-ui="new"] table.te3-table > tbody > tr.selected { background: transparent; font-weight: inherit; }
/* the row actions stay in view on the end side while a wide table scrolls sideways */
:root[data-ui="new"] table.te3-table > thead > tr > th.actions { inset-inline-end: 0; z-index: 3; }
:root[data-ui="new"] table.te3-table > tbody > tr > td.actions { position: sticky; inset-inline-end: 0; z-index: 1; background: #fff; }
:root[data-ui="new"] table.te3-table > tfoot > tr > td.actions { position: sticky; inset-inline-end: 0; z-index: 1; }
:root[data-ui="new"] table.te3-table :is(th, td).actions { border-inline-start: 1px solid #eef2f8; }
:root[data-ui="new"] table.te3-table > tbody > tr:hover > td { background: #f7f9fc; }
:root[data-ui="new"] table.te3-table > tbody > tr.selected > td { background: #f3f8ff; }
:root[data-ui="new"] table.te3-table > tfoot > tr > td { padding: 10px; background: #f7f9fc; border-top: 1px solid #dfe8f4; font-weight: 700; }
:root[data-ui="new"] table.te3-table :is(th, td).num { width: 1%; white-space: nowrap; color: #8090a8; font-size: 12px; text-align: center; }
:root[data-ui="new"] table.te3-table :is(th, td).tchk { width: 40px; text-align: center; }
:root[data-ui="new"] table.te3-table td.te3-empty { height: auto; padding: 28px 16px; text-align: center; color: #5b6b85; font-size: 14px; }
:root[data-ui="new"] table.te3-table > tbody > tr:has(> td.te3-empty):hover > td { background: transparent; }
:root[data-ui="new"] table.te3-table a:not(.btn) { color: #114591; font-weight: 600; }
/* row actions: soft sky pills with a word, grey icon buttons for edit and ⋮ */
:root[data-ui="new"] table.te3-table :is(th, td).actions { width: 1%; white-space: nowrap; }
:root[data-ui="new"] .te3-acts { display: inline-flex; align-items: center; gap: 4px; }
:root[data-ui="new"] .te3-act {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 32px; min-width: 32px; padding: 0 10px; border: 0; border-radius: 9px;
    background: #eef5ff; color: #114591; font-family: inherit; font-size: 12.5px; font-weight: 700; white-space: nowrap; cursor: pointer; line-height: 1;
}
:root[data-ui="new"] .te3-act:hover { background: #e0ecff; }
:root[data-ui="new"] .te3-act.ico { padding: 0; }
:root[data-ui="new"] .te3-act .glyphicon { top: 0; font-size: 12px; }
:root[data-ui="new"] .te3-act[disabled] { opacity: .55; cursor: default; }
:root[data-ui="new"] .te3-ibtn {
    display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 9px;
    background: #f4f7fb; color: #4a5a73; cursor: pointer;
}
:root[data-ui="new"] .te3-ibtn:hover { background: #e6efff; color: #114591; }
/* the footer: the count on the start side, the store's pager on the end side (its own "דף 1 מתוך 3" line is replaced) */
:root[data-ui="new"] .te3-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 14px 0 0; }
:root[data-ui="new"] .te3-count { font-size: 13px; color: #5b6b85; }
:root[data-ui="new"] .te3-foot .pager { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0; margin-inline-start: auto; padding: 0; border: 0; }
:root[data-ui="new"] .te3-foot .paging-info { display: none; }
:root[data-ui="new"] .te3-foot .pagination { margin: 0; }
:root[data-ui="new"] .te3-foot .pagination > li > a { min-width: 40px; height: 40px; border-radius: 12px !important; font-size: 14px; font-weight: 700; }

/* the teachers list: short values on one line, the merged "מורה" cell, the e-mail status */
:root[data-ui="new"] .a3-teachers table.te3-table > tbody > tr > td { white-space: nowrap; }
:root[data-ui="new"] td.te3-merged { min-width: 200px; }
:root[data-ui="new"] .te3-who { display: flex; align-items: center; gap: 10px; }
:root[data-ui="new"] .te3-who-tx { min-width: 0; }
:root[data-ui="new"] .te3-who-tx > b { display: block; font-size: 14.5px; font-weight: 700; white-space: nowrap; }
:root[data-ui="new"] .te3-who-tx > small { display: block; font-size: 12px; color: #5b6b85; unicode-bidi: isolate; text-align: start; }
:root[data-ui="new"] .te3-ini {
    width: 36px; height: 36px; flex-shrink: 0; border-radius: 11px; background: #e6efff; color: #114591;
    display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; line-height: 1;
}
:root[data-ui="new"] .te3-ini.mint { background: #dcf5ee; color: #0a6f5d; }
:root[data-ui="new"] .te3-ini.mute { background: #f1f4f9; color: #4a5a73; }
:root[data-ui="new"] .te3-ini.off { background: #f1f4f9; color: #8090a8; }
:root[data-ui="new"] .te3-ini.lg { width: 48px; height: 48px; border-radius: 14px; font-size: 16px; }
:root[data-ui="new"] .te3-yes { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: #0b6b4a; white-space: nowrap; }
:root[data-ui="new"] .te3-no { font-size: 12.5px; color: #8090a8; white-space: nowrap; }

/* the slim rows: the teachers on a phone (grouped by letter) and the inactive teachers */
:root[data-ui="new"] .te3-letter { margin: 14px 4px 6px; font-family: inherit; font-size: 13px; font-weight: 800; color: #114591; line-height: 1.3; }
:root[data-ui="new"] .te3-pgroup:first-child > .te3-letter { margin-top: 2px; }
:root[data-ui="new"] .te3-pbox { background: #fff; border: 1px solid #dfe8f4; border-radius: 16px; padding: 0 14px; }
:root[data-ui="new"] .te3-prow {
    width: 100%; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 0; box-sizing: border-box; margin: 0;
    border: 0; border-bottom: 1px solid #eef2f8; background: none; color: #12233f; font-family: inherit; text-align: start; cursor: pointer;
}
:root[data-ui="new"] .te3-prow:last-child { border-bottom: 0; }
:root[data-ui="new"] .te3-prow.static { cursor: default; }
:root[data-ui="new"] .te3-prow > .te3-ini { width: 40px; height: 40px; border-radius: 12px; font-size: 13px; }
:root[data-ui="new"] .te3-prow > .p3-ico { color: #8090a8; }
:root[data-ui="new"] .te3-prow-tx { flex: 1; min-width: 0; }
:root[data-ui="new"] .te3-prow-tx > b { display: block; font-size: 15px; font-weight: 700; line-height: 1.35; }
:root[data-ui="new"] .te3-prow-tx > small { display: block; font-size: 12.5px; color: #5b6b85; line-height: 1.4; }
:root[data-ui="new"] .te3-prow-tx .a3-mask { color: inherit; }
:root[data-ui="new"] .te3-none { padding: 28px 16px; text-align: center; color: #5b6b85; font-size: 14px; }
:root[data-ui="new"] .te3-inactive { min-width: 0; }
:root[data-ui="new"] .te3-sec { margin: 22px 2px 8px; font-family: inherit; font-size: 15px; font-weight: 800; color: #12233f; }
/* on a phone the list is the page: no card around the letter boxes */
:root[data-ui="new"] .a3-table-card:has(> .te3-phone) { padding: 0; background: transparent; border: 0; }

/* the teacher's sheet (a bottom sheet on a phone) */
:root[data-ui="new"] .te3-sh-head { display: flex; align-items: center; gap: 12px; padding: 0 0 10px; }
:root[data-ui="new"] .te3-sh-tx { flex: 1; min-width: 0; }
:root[data-ui="new"] .te3-sh-tx > b { display: block; font-size: 18px; font-weight: 800; line-height: 1.3; }
:root[data-ui="new"] .te3-sh-tx > small { display: block; font-size: 12.5px; color: #5b6b85; unicode-bidi: isolate; text-align: start; overflow-wrap: anywhere; }
:root[data-ui="new"] .te3-sh-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 4px 0 8px; }
:root[data-ui="new"] .te3-sh-tile {
    height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; margin: 0; padding: 0 4px; border: 0; border-radius: 14px;
    background: #eef5ff; color: #114591; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
:root[data-ui="new"] .te3-sh-tile:hover { background: #e0ecff; }
:root[data-ui="new"] .te3-sh-row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 0; border-bottom: 1px solid #eef2f8; }
:root[data-ui="new"] .te3-sh-l { width: 104px; flex-shrink: 0; font-size: 13px; color: #5b6b85; }
:root[data-ui="new"] .te3-sh-v { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600; }
:root[data-ui="new"] .te3-sh-v .a3-mask { color: inherit; }
:root[data-ui="new"] .te3-sh-v a { color: #114591; text-decoration: none; }
:root[data-ui="new"] .te3-sh-out {
    width: 100%; height: 46px; margin: 12px 0 0; display: flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid #f3c1c6; border-radius: 13px;
    background: #fff7f8; color: #b0202d; font-family: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer;
}
:root[data-ui="new"] .te3-sh-out:hover { background: #fde6e8; }

@media (max-width: 767px) {
    :root[data-ui="new"] .te3-search { flex: 1 1 100%; max-width: none; height: 44px; }
    :root[data-ui="new"] .te3-chips { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
    :root[data-ui="new"] .te3-chip { height: 40px; }
    :root[data-ui="new"] .te3-tools { margin-inline-start: 0; }
    :root[data-ui="new"] .te3-tool { height: 44px; }
    :root[data-ui="new"] .te3-bulk-acts { margin-inline-start: 0; }
    :root[data-ui="new"] .te3-bulk-b { height: 40px; }
    :root[data-ui="new"] .te3-act,
    :root[data-ui="new"] .te3-ibtn { height: 40px; min-width: 40px; }
    :root[data-ui="new"] .te3-foot { justify-content: center; }
    :root[data-ui="new"] .te3-foot .pager { margin-inline-start: 0; justify-content: center; }
}

/* ============================== לוח בקרה (reports.html#!/dashboard) ============================== */
:root[data-ui="new"] .a3-dash { gap: 18px; }
/* the tab bar */
:root[data-ui="new"] .a3-tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid #dfe8f4; }
:root[data-ui="new"] .a3-tab {
    height: 44px; padding: 0 16px; margin-bottom: -1px; border: 0; border-bottom: 3px solid transparent; background: transparent; border-radius: 0;
    color: #4a5a73; font-family: inherit; font-size: 15px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
:root[data-ui="new"] .a3-tab:hover { color: #114591; }
:root[data-ui="new"] .a3-tab[aria-selected="true"] { border-bottom-color: #175bb0; color: #114591; font-weight: 700; }
:root[data-ui="new"] .a3-tab:focus-visible { outline: 2px solid #175bb0 !important; outline-offset: -2px !important; border-radius: 8px 8px 0 0; }
/* the KPI cards */
:root[data-ui="new"] .a3-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 0 0 16px; }
:root[data-ui="new"] .a3-kpis:empty { display: none; }
:root[data-ui="new"] .a3-kpi { padding: 16px 18px; border-radius: 18px; background: #fff; border: 1px solid #dfe8f4; min-width: 0; }
:root[data-ui="new"] .a3-kpi-l { font-size: 13px; color: #5b6b85; }
:root[data-ui="new"] .a3-kpi-v { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 6px; }
:root[data-ui="new"] .a3-kpi-v b { font-size: 30px; font-weight: 800; line-height: 1.1; color: #12233f; }
:root[data-ui="new"] .a3-kpi-v span { font-size: 12px; font-weight: 600; color: #5b6b85; }
:root[data-ui="new"] .a3-kpi-s { font-size: 12px; color: #5b6b85; margin-top: 2px; }
:root[data-ui="new"] .a3-kpi-bar { height: 6px; border-radius: 999px; background: #e6edf6; overflow: hidden; margin-top: 8px; }
:root[data-ui="new"] .a3-kpi-bar > span { display: block; height: 100%; background: #2ec4a5; border-radius: 999px; }
:root[data-ui="new"] .a3-kpi.warn { border-color: #f2c98a; }
:root[data-ui="new"] .a3-kpi.warn .a3-kpi-l { color: #8a4a00; }

/* status tab: the role / period panel becomes a toolbar + cards */
:root[data-ui="new"] .a3-dash .dash-wrapper { min-height: 0; }
:root[data-ui="new"] .a3-dash .dash-wrapper.panel { background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible; border-radius: 0 !important; margin: 0; }
:root[data-ui="new"] .a3-dash .dash-wrapper.panel:hover { box-shadow: none !important; }
:root[data-ui="new"] .a3-dash .dash-wrapper > .panel-heading {
    background: #fff !important; border: 1px solid #dfe8f4 !important; border-radius: 16px; padding: 10px 16px !important; font-weight: 400; font-size: 14px;
}
:root[data-ui="new"] .a3-dash .dash-wrapper > .panel-heading > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
:root[data-ui="new"] .a3-dash .dash-wrapper > .panel-heading > div > strong { font-size: 15px; font-weight: 700; color: #12233f; }
:root[data-ui="new"] .a3-dash .dash-wrapper > .panel-heading small { font-size: 13px; color: #5b6b85; }
:root[data-ui="new"] .a3-dash .dash-wrapper > .panel-heading .pull-right { float: none !important; margin-inline-start: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
:root[data-ui="new"] .a3-dash .dash-wrapper > .panel-heading .clearfix { display: none; }
:root[data-ui="new"] .a3-dash .dash-wrapper em { color: #5b6b85; font-size: 14px; font-weight: 400; font-style: normal; }
:root[data-ui="new"] .a3-dash .dash-wrapper > .panel-body { padding: 16px 0 0 !important; }
:root[data-ui="new"] .a3-dash .dash-part {
    background: #fff; border: 1px solid #dfe8f4; border-radius: 20px; padding: 18px 20px; margin: 0 0 16px; color: #5b6b85; font-size: 14px;
}
:root[data-ui="new"] .a3-dash .dash-part > .h5 {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px;
    font-family: inherit; font-size: 17px; font-weight: 800; color: #12233f;
}
:root[data-ui="new"] .a3-dash .dash-part .btn.sky,
:root[data-ui="new"] .a3-dash .dash-part .btn {
    background: #e6efff !important; border: 0 !important; color: #114591 !important; box-shadow: none !important; border-radius: 999px !important;
    font-size: 13px; font-weight: 700; padding: 6px 12px; display: inline-flex; align-items: center; gap: 6px;
}
:root[data-ui="new"] .a3-dash .dash-part .btn:hover { background: #d6e5fb !important; transform: none; }
:root[data-ui="new"] .a3-dash .dash-part .btn .glyphicon { top: 0; font-size: 12px; }
:root[data-ui="new"] .a3-dash .dash-part .btn .badge { background: #175bb0 !important; padding: 2px 7px; font-size: 11px; }
:root[data-ui="new"] .a3-dash .dash-part ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; list-style: none; margin: 0; padding: 0; }
:root[data-ui="new"] .a3-dash .dash-part ul li { float: none; margin: 0; white-space: normal; display: flex; align-items: baseline; gap: 0; padding: 10px 12px; border-radius: 12px; background: #f4f8fe; color: #5b6b85; }
:root[data-ui="new"] .a3-dash .dash-part li + li::before { content: none; }
:root[data-ui="new"] .a3-dash .dash-part ul li > a { color: #12233f !important; font-size: 14px; text-decoration: none !important; }
:root[data-ui="new"] .a3-dash .dash-part ul li > a:hover { color: #114591 !important; text-decoration: underline !important; }
:root[data-ui="new"] .a3-dash .dash-part ul li > strong { margin-inline-start: auto; font-size: 17px; font-weight: 800; color: #114591; }
:root[data-ui="new"] .a3-dash .dash-part ul li:has(> .btn) { background: transparent; padding: 0; align-items: center; }
:root[data-ui="new"] .a3-dash .dash-part .clearfix { display: none; }
/* the tables of the tabs */
:root[data-ui="new"] .a3-dash .dash-part table.table,
:root[data-ui="new"] .a3-dash-certs table.table { width: 100%; background: transparent; border-radius: 0; margin: 0; font-size: 14px; color: #12233f; }
:root[data-ui="new"] .a3-dash table.table > thead > tr > th {
    background: transparent !important; border-bottom: 1px solid #e6edf6 !important; border-top: 0 !important; color: #5b6b85 !important;
    font-size: 12px; font-weight: 700; padding: 0 8px 8px !important; white-space: nowrap;
}
:root[data-ui="new"] .a3-dash table.table > tbody > tr > td { padding: 9px 8px !important; border-top: 0 !important; border-bottom: 1px solid #eef2f8; vertical-align: middle; }
:root[data-ui="new"] .a3-dash table.table > tbody > tr:last-child > td { border-bottom: 0; }
:root[data-ui="new"] .a3-dash table.table > tbody > tr,
:root[data-ui="new"] .a3-dash table.table > tbody > tr.teven { background: transparent !important; }
:root[data-ui="new"] .a3-dash table.table > tbody > tr:hover { background: #f7f9fc !important; }
:root[data-ui="new"] .a3-dash table.table a { color: #114591; font-weight: 600; }
:root[data-ui="new"] .a3-dash-certs { padding: 16px 18px; overflow-x: auto; }
/* absences + climate tabs: the report becomes a card */
:root[data-ui="new"] .a3-dash .dash-wrapper > .pad { padding: 0; }
:root[data-ui="new"] .a3-dash .dash-wrapper > .pad > .a3-kpis { margin: 16px 0 0; }
:root[data-ui="new"] .a3-dash .dash-wrapper .h5 { font-family: inherit; font-size: 17px; font-weight: 800; color: #12233f; margin: 18px 0 10px; }
:root[data-ui="new"] .a3-dash .reports-table { background: #fff; border: 1px solid #dfe8f4; border-radius: 20px; padding: 14px 18px; }
:root[data-ui="new"] .a3-dash .reports-table-toolsbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; white-space: normal; margin: 0 0 12px; }
:root[data-ui="new"] .a3-dash .reports-table button { margin-left: 0; }

@media (max-width: 767px) {
    :root[data-ui="new"] .a3-page { gap: 14px; }
    :root[data-ui="new"] .a3-head h1 { font-size: 23px; }
    :root[data-ui="new"] .a3-search { flex: 1 1 100%; }
    :root[data-ui="new"] .a3-group { padding: 14px 14px 6px; }
    :root[data-ui="new"] .a3-table-card { padding: 12px; }
    :root[data-ui="new"] .a3-head .a3-btn { flex: 1 1 0; justify-content: center; min-height: 44px; }
    :root[data-ui="new"] .a3-teachers .datatable-toolbar .btn,
    :root[data-ui="new"] .a3-teachers td.actions .btn { min-height: 40px !important; font-size: 13px !important; padding: 0 10px !important; }
    :root[data-ui="new"] .a3-tabs { flex-wrap: nowrap; overflow-x: auto; gap: 0; scrollbar-width: none; }
    :root[data-ui="new"] .a3-tab { padding: 0 12px; font-size: 14px; }
    :root[data-ui="new"] .a3-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    :root[data-ui="new"] .a3-kpi { padding: 12px 14px; }
    :root[data-ui="new"] .a3-kpi-v b { font-size: 24px; }
    :root[data-ui="new"] .a3-dash .dash-part,
    :root[data-ui="new"] .a3-dash .reports-table { padding: 14px; }
    :root[data-ui="new"] .a3-dash .dash-wrapper > .panel-heading .pull-right { margin-inline-start: 0; }
}

/* =====================================================================================================
   settings pages (settings.html) - the page level of the 2026 look: page head, cards, page layouts,
   empty states, phones. The shared components inside them (TableEditor / DataTable toolbars and
   tables, form controls, modals, paging) are styled in ui3-pages.css. Markup: settings/components/A3Page.js
   ===================================================================================================== */

/* ---------- shared parts ---------- */
/* the chip tones the settings pages add */
:root[data-ui="new"] .a3-chip.mute { color: #5b6b85; background: #f1f4f9; }
:root[data-ui="new"] .a3-chip.warn { color: #8a4a00; background: #fff1df; }
:root[data-ui="new"] .a3-chip.bad { color: #b0202d; background: #fde6e8; }
/* the centered empty / prompt state */
:root[data-ui="new"] .a3-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 36px 18px; color: #5b6b85; font-size: 14px; line-height: 1.5; }
:root[data-ui="new"] .a3-state-ico { width: 40px; height: 40px; border-radius: 50%; background: #e6efff; color: #114591; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
:root[data-ui="new"] .a3-state > b { font-size: 15px; font-weight: 700; color: #12233f; }
:root[data-ui="new"] .a3-state > .a3-btn { margin-top: 10px; }
/* a segmented bar (two views of the same page) */
:root[data-ui="new"] .a3-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: #fff; border: 1px solid #dfe8f4; border-radius: 14px; }
:root[data-ui="new"] .a3-seg-b {
    display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent;
    color: #4a5a73; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
:root[data-ui="new"] .a3-seg-b:hover { color: #114591; }
:root[data-ui="new"] .a3-seg-b[aria-pressed="true"] { background: #e6efff; color: #114591; font-weight: 700; cursor: default; }
:root[data-ui="new"] .a3-seg-b:focus-visible { outline: 2px solid #175bb0 !important; outline-offset: 1px !important; }
/* the smaller header button, and the row buttons (soft grey pills, like the row actions of the teachers list) */
:root[data-ui="new"] .a3-btn.sm { height: 36px; padding: 0 12px; border-radius: 10px; font-size: 13px; gap: 6px; }
:root[data-ui="new"] .a3-pill {
    display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px; border: 0; border-radius: 10px; cursor: pointer;
    background: #f1f4f9; color: #12233f; font-family: inherit; font-size: 13px; font-weight: 500; white-space: nowrap; line-height: 1;
}
:root[data-ui="new"] .a3-pill:hover { background: #e6efff; color: #114591; }
:root[data-ui="new"] .a3-pill.bad { color: #b0202d; background: transparent; }
:root[data-ui="new"] .a3-pill.bad:hover { background: #fde6e8; color: #b0202d; }
:root[data-ui="new"] .a3-pill:focus-visible { outline: 2px solid #175bb0 !important; outline-offset: 1px !important; }
:root[data-ui="new"] .a3-pill-n {
    min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: #175bb0; color: #fff;
    font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
/* a card with a toolbar row: title + count chip on the start side, actions on the end side */
:root[data-ui="new"] .a3-set .a3-card-pad { padding: 16px 18px; min-width: 0; }
:root[data-ui="new"] .a3-cbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
:root[data-ui="new"] .a3-cbar h2 { margin: 0; font-family: inherit; font-size: 17px; font-weight: 800; color: #12233f; }
:root[data-ui="new"] .a3-cbar .a3-cbar-end { margin-inline-start: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
:root[data-ui="new"] .a3-cbar p { flex-basis: 100%; margin: 0; font-size: 13px; color: #5b6b85; }

/* ---------- כיתות וחלוקה לקבוצות (settings/groups) ---------- */
:root[data-ui="new"] .a3-grades { display: flex; flex-direction: column; gap: 16px; }
:root[data-ui="new"] .a3-grade { padding: 16px 18px 8px; min-width: 0; }
:root[data-ui="new"] .a3-grade-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-bottom: 12px; border-bottom: 1px solid #eef2f8; }
:root[data-ui="new"] .a3-grade-badge {
    width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; background: #e6efff; color: #114591;
    display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800;
}
:root[data-ui="new"] .a3-grade-tx { flex: 1 1 200px; min-width: 0; }
:root[data-ui="new"] .a3-grade-tx h2 { margin: 0; font-family: inherit; font-size: 17px; font-weight: 800; line-height: 1.3; color: #12233f; }
:root[data-ui="new"] .a3-grade-tx > span { display: block; font-size: 13px; color: #5b6b85; }
:root[data-ui="new"] .a3-grade-alias { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 400; }
:root[data-ui="new"] .a3-grade-alias > span,
:root[data-ui="new"] .a3-gl-type > span { font-size: 13px; color: #5b6b85; white-space: nowrap; }
:root[data-ui="new"] .a3-grade-alias input { width: 170px; height: 40px; }
:root[data-ui="new"] .a3-gls { display: flex; flex-direction: column; }
:root[data-ui="new"] .a3-gl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-height: 52px; padding: 8px 0; border-bottom: 1px solid #eef2f8; }
:root[data-ui="new"] .a3-gls > .a3-gl:last-child { border-bottom: 0; }
:root[data-ui="new"] .a3-gl-main { display: flex; align-items: center; gap: 10px; flex: 0 1 340px; min-width: 0; }
:root[data-ui="new"] .a3-gl-title { width: 92px; flex-shrink: 0; font-size: 14px; font-weight: 700; color: #12233f; }
:root[data-ui="new"] .a3-gl-input { flex: 1; min-width: 0; height: 38px; }
:root[data-ui="new"] .a3-gl-type { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 400; }
:root[data-ui="new"] .a3-gl-type select { width: 150px; height: 38px; margin: 0; }
:root[data-ui="new"] .a3-gl-acts { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
:root[data-ui="new"] .a3-gl-acts > .a3-pill.bad { margin-inline-start: auto; }
:root[data-ui="new"] .a3-gl-cls { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 13px; color: #5b6b85; }
:root[data-ui="new"] .a3-pill.a3-gl-cls { color: #12233f; }
:root[data-ui="new"] .a3-grade-sub {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
    margin: 12px 0 4px; padding: 8px 12px; border-radius: 12px; background: #f7f9fc;
}
:root[data-ui="new"] .a3-grade-sub h3 { margin: 0; font-family: inherit; font-size: 14px; font-weight: 700; color: #4a5a73; }

/* ---------- גורמי קשר - הורים / פרטי קשר תלמידים (settings/relatives, settings/contacts) ---------- */
:root[data-ui="new"] .a3-linkbar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; min-width: 0; }
:root[data-ui="new"] .a3-linkbar-ico { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: #dcf5ee; color: #0a6f5d; display: flex; align-items: center; justify-content: center; }
:root[data-ui="new"] .a3-linkbar-tx { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-width: 0; }
:root[data-ui="new"] .a3-linkbar-tx > a { font-size: 14px; font-weight: 700; color: #114591 !important; }
:root[data-ui="new"] .a3-linkbar-tx > span { font-size: 13px; color: #5b6b85; overflow-wrap: anywhere; unicode-bidi: isolate; }
:root[data-ui="new"] .a3-wordbar { margin: 0; }
:root[data-ui="new"] .a3-wordbar .checkit { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; font-weight: 500; color: #12233f; }
:root[data-ui="new"] .a3-wordbar > a { font-size: 14px; color: #114591 !important; }
:root[data-ui="new"] .a3-families { overflow-x: auto; }
:root[data-ui="new"] .a3-families table ul,
:root[data-ui="new"] .a3-families table ol { margin: 0; padding-inline-start: 18px; }

/* the hidden Word-template uploader of the relatives page takes no slot in the page's gap */
:root[data-ui="new"] .a3-set-relatives > form { display: contents; }

/* ---------- lists of values (CollectionEditor) as cards: subjects, rooms, lesson data (settings/subjects, rooms, student-events) ---------- */
:root[data-ui="new"] .a3-set-body { min-width: 0; }
:root[data-ui="new"] .a3-coll-grid,
:root[data-ui="new"] .a3-coll-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr)); gap: 16px; align-items: start; }
:root[data-ui="new"] .a3-coll-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
:root[data-ui="new"] .a3-set .collection-editor {
    max-width: none; min-width: 0; margin: 0 !important; background: #fff !important; border: 1px solid #dfe8f4 !important;
    border-radius: 20px !important; box-shadow: none !important; overflow: hidden;
}
:root[data-ui="new"] .a3-set .collection-editor:hover { box-shadow: none !important; }
:root[data-ui="new"] .a3-set .collection-editor > .panel-heading {
    background: #fff !important; color: #12233f !important; border: 0 !important; border-bottom: 1px solid #eef2f8 !important; padding: 12px 18px !important;
}
:root[data-ui="new"] .a3-set .collection-editor > .panel-heading .panel-title {
    display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; font-family: inherit; font-size: 16px; font-weight: 800; line-height: 1.35; color: #12233f;
}
:root[data-ui="new"] .a3-set .collection-editor > .panel-heading .panel-title > .btn {
    float: none !important; order: 2; height: 34px; min-width: 34px; margin: 0 !important; padding: 0 12px !important; border-radius: 10px !important;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: #fff !important; border: 1px solid #dfe8f4 !important; color: #114591 !important; box-shadow: none !important; filter: none !important;
    font-size: 13px; font-weight: 700; transform: none !important;
}
:root[data-ui="new"] .a3-set .collection-editor > .panel-heading .panel-title > .btn:not(.btn-recycle) { margin-inline-start: auto !important; }
:root[data-ui="new"] .a3-set .collection-editor > .panel-heading .panel-title > .btn.btn-recycle { order: 3; padding: 0 !important; width: 34px; color: #4a5a73 !important; }
:root[data-ui="new"] .a3-set .collection-editor > .panel-heading .panel-title > .btn:hover { border-color: #b9d3f4 !important; background: #f4f8fe !important; }
:root[data-ui="new"] .a3-set .collection-editor .glyphicon { top: 0; font-size: 12px; }
:root[data-ui="new"] .a3-set .collection-editor > .panel-body { padding: 6px 18px 10px !important; }
:root[data-ui="new"] .a3-set .collection-editor table.table { width: 100%; margin: 0; background: transparent; font-size: 14px; color: #12233f; }
:root[data-ui="new"] .a3-set .collection-editor table.table > thead > th,
:root[data-ui="new"] .a3-set .collection-editor table.table > thead > tr > th { padding: 8px 4px 10px !important; border: 0 !important; border-bottom: 1px solid #eef2f8 !important; background: transparent !important; vertical-align: middle; }
:root[data-ui="new"] .a3-set .collection-editor table.table > thead input.form-control { height: 38px; border-radius: 10px; font-size: 14px; }
:root[data-ui="new"] .a3-set .collection-editor table.table > thead .btn {
    margin: 0 !important; height: 34px; padding: 0 12px !important; border-radius: 999px !important; box-shadow: none !important; transform: none !important;
    display: inline-flex; align-items: center; white-space: nowrap; line-height: 1;
    background: #fff !important; border: 1px solid #dfe8f4 !important; color: #4a5a73 !important; font-size: 13px; font-weight: 600;
}
:root[data-ui="new"] .a3-set .collection-editor table.table > tbody > tr { background: #fff !important; }
:root[data-ui="new"] .a3-set .collection-editor table.table > tbody > tr:hover { background: #f7f9fc !important; }
:root[data-ui="new"] .a3-set .collection-editor table.table > tbody > tr > td { padding: 7px 4px !important; border-top: 0 !important; border-bottom: 1px solid #eef2f8; vertical-align: middle; }
:root[data-ui="new"] .a3-set .collection-editor table.table > tbody > tr:last-child > td { border-bottom: 0; }
:root[data-ui="new"] .a3-set .collection-editor td.item-name { font-weight: 500; }
:root[data-ui="new"] .a3-set .collection-editor td.item-name b { color: #5b6b85; font-weight: 600; font-variant-numeric: tabular-nums; }
:root[data-ui="new"] .a3-set .collection-editor td.item-actions { width: 1%; white-space: nowrap; color: #8090a8; font-size: 12px; text-align: end; }
:root[data-ui="new"] .a3-set .collection-editor tbody .btn {
    height: 32px; min-width: 32px; margin: 0 1px !important; padding: 0 9px !important; border-radius: 10px !important; vertical-align: middle;
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    background: #f1f4f9 !important; border: 0 !important; color: #12233f !important; box-shadow: none !important; font-size: 13px; font-weight: 500; transform: none !important;
}
:root[data-ui="new"] .a3-set .collection-editor tbody .btn:hover { background: #e6efff !important; color: #114591 !important; }
:root[data-ui="new"] .a3-set .collection-editor tbody .btn .glyphicon-pencil { color: #114591; }
:root[data-ui="new"] .a3-set .collection-editor tbody .btn .glyphicon-remove { color: #b0202d; }
/* the settings screens that keep their own (classic) layout, inside one card */
:root[data-ui="new"] .a3-legacy { overflow-x: auto; }

/* ---------- קבצים בית ספריים (settings/files) ---------- */
:root[data-ui="new"] .a3-files { padding: 4px 18px; min-width: 0; }
:root[data-ui="new"] .a3-files-cat { border-bottom: 1px solid #eef2f8; }
:root[data-ui="new"] .a3-files-cat:last-child { border-bottom: 0; }
:root[data-ui="new"] button.a3-files-head {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 0; border: 0; background: transparent;
    color: #12233f; font-family: inherit; text-align: start; cursor: pointer;
}
:root[data-ui="new"] button.a3-files-head:hover .a3-files-name { color: #0d3f80; }
:root[data-ui="new"] button.a3-files-head:focus-visible { outline: 2px solid #175bb0 !important; outline-offset: 2px !important; border-radius: 12px; }
:root[data-ui="new"] .a3-files-name { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; line-height: 1.35; }
:root[data-ui="new"] .a3-files-chev { display: inline-flex; color: #8090a8; transition: transform .15s; }
:root[data-ui="new"] .a3-files-cat.open .a3-files-chev { transform: rotate(180deg); }
:root[data-ui="new"] .a3-files-body { padding: 0 0 16px; padding-inline-start: 52px; }

@media (max-width: 767px) {
    :root[data-ui="new"] .a3-set .collection-editor > .panel-heading { padding: 12px 14px !important; }
    :root[data-ui="new"] .a3-set .collection-editor > .panel-body { padding: 6px 14px 10px !important; }
    :root[data-ui="new"] .a3-set .collection-editor .btn { min-height: 40px !important; padding: 0 10px !important; font-size: 13px !important; }
    :root[data-ui="new"] .a3-set .collection-editor tbody .btn { min-width: 40px; }
    :root[data-ui="new"] .a3-files { padding: 2px 14px; }
    :root[data-ui="new"] .a3-files-body { padding-inline-start: 0; }
}

@media (max-width: 767px) {
    :root[data-ui="new"] .a3-head .a3-seg { flex: 1 1 100%; }
    :root[data-ui="new"] .a3-seg-b { flex: 1 1 0; justify-content: center; min-height: 40px; }
    :root[data-ui="new"] .a3-pill { height: auto; min-height: 44px; }
    :root[data-ui="new"] .a3-btn.sm { min-height: 44px; }
    :root[data-ui="new"] .a3-set .a3-card-pad { padding: 14px; }
    :root[data-ui="new"] .a3-grade { padding: 14px 14px 6px; }
    :root[data-ui="new"] .a3-grade-alias { flex: 1 1 100%; }
    :root[data-ui="new"] .a3-grade-alias input { flex: 1; width: auto; height: 44px; }
    :root[data-ui="new"] .a3-grade-head .a3-btn { flex: 1 1 100%; justify-content: center; min-height: 44px; }
    :root[data-ui="new"] .a3-gl { padding: 12px 0; }
    :root[data-ui="new"] .a3-gl-main { flex: 1 1 100%; }
    :root[data-ui="new"] .a3-gl-title { width: auto; min-width: 64px; }
    :root[data-ui="new"] .a3-gl-input,
    :root[data-ui="new"] .a3-gl-type select { height: 44px; }
    :root[data-ui="new"] .a3-gl-type { flex: 1 1 100%; }
    :root[data-ui="new"] .a3-gl-type select { flex: 1; width: auto; }
    :root[data-ui="new"] .a3-gl-acts > .a3-pill.bad { margin-inline-start: 0; }
}

/* ---------- form parts of the settings pages: filter cards, inline fields, banners, plain tables ---------- */
/* a filter / form card: labels above the controls in a responsive grid */
:root[data-ui="new"] .a3-filters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 16px; align-items: end; }
:root[data-ui="new"] .a3-field { display: flex; flex-direction: column; gap: 6px; margin: 0; min-width: 0; font-weight: 400; }
:root[data-ui="new"] .a3-field > span { font-size: 13px; font-weight: 600; color: #4a5a73; }
:root[data-ui="new"] .a3-field select,
:root[data-ui="new"] .a3-field .form-control { width: 100% !important; max-width: none; height: 42px; margin: 0 !important; }
:root[data-ui="new"] .a3-field-act { justify-content: flex-end; }
:root[data-ui="new"] .a3-field-act .a3-btn { justify-content: center; }
/* a label + control on one line (the head's settings number, a toolbar filter) */
:root[data-ui="new"] .a3-inline-field { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 400; }
:root[data-ui="new"] .a3-inline-field > span { font-size: 13px; font-weight: 600; color: #4a5a73; white-space: nowrap; }
:root[data-ui="new"] .a3-inline-field select,
:root[data-ui="new"] .a3-inline-field .form-control { width: auto !important; min-width: 120px; height: 40px; margin: 0 !important; display: inline-block; }
/* one-line notices: info (sky), warn, bad - an icon and the text, never bare colored text */
:root[data-ui="new"] .a3-banner { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: #eef5ff; color: #114591; font-size: 14px; line-height: 1.5; }
:root[data-ui="new"] .a3-banner .p3-ico { margin-top: 1px; }
:root[data-ui="new"] .a3-banner.warn { background: #fff1df; color: #8a4a00; }
:root[data-ui="new"] .a3-banner.bad { background: #fde6e8; color: #b0202d; }
/* the plain tables the settings pages draw themselves (not TableEditor / DataTable) */
:root[data-ui="new"] .a3-tablewrap { overflow-x: auto; }
:root[data-ui="new"] .a3-set table.a3-table,
:root[data-ui="new"] .a3-sync table.table,
:root[data-ui="new"] .a3-families table.table { width: 100%; margin: 0; background: transparent; border: 0 !important; border-radius: 0; font-size: 14px; color: #12233f; }
:root[data-ui="new"] .a3-set table.a3-table > thead > tr > th,
:root[data-ui="new"] .a3-sync table.table > thead > tr > th,
:root[data-ui="new"] .a3-families table.table > thead > tr > th {
    background: #f7f9fc !important; color: #4a5a73 !important; font-size: 13px; font-weight: 600; padding: 12px 10px !important;
    border: 0 !important; border-bottom: 1px solid #eef2f8 !important; white-space: nowrap; vertical-align: middle;
}
:root[data-ui="new"] .a3-set table.a3-table > tbody > tr,
:root[data-ui="new"] .a3-sync table.table > tbody > tr,
:root[data-ui="new"] .a3-families table.table > tbody > tr { background: #fff !important; }
:root[data-ui="new"] .a3-set table.a3-table > tbody > tr:hover,
:root[data-ui="new"] .a3-sync table.table > tbody > tr:hover,
:root[data-ui="new"] .a3-families table.table > tbody > tr:hover { background: #f7f9fc !important; }
:root[data-ui="new"] .a3-set table.a3-table > tbody > tr > td,
:root[data-ui="new"] .a3-sync table.table > tbody > tr > td,
:root[data-ui="new"] .a3-families table.table > tbody > tr > td { height: 50px; padding: 8px 10px !important; border: 0 !important; border-bottom: 1px solid #eef2f8 !important; vertical-align: middle; }
:root[data-ui="new"] .a3-set table.a3-table > tbody > tr:last-child > td,
:root[data-ui="new"] .a3-sync table.table > tbody > tr:last-child > td,
:root[data-ui="new"] .a3-families table.table > tbody > tr:last-child > td { border-bottom: 0 !important; }
:root[data-ui="new"] .a3-set table.a3-table td.num { color: #8090a8; font-size: 12px; width: 1%; }
:root[data-ui="new"] .a3-sync table.table > tbody > tr.warning { background: #fff8ee !important; }

/* ---------- מרכיבים להערכה תקופתית (settings/study-periods/cert-assesments) ---------- */
:root[data-ui="new"] .a3-cert-part .a3-state { padding: 20px 12px 8px; }
:root[data-ui="new"] .a3-state-opts { display: flex; flex-direction: column; gap: 4px; max-width: 620px; margin-top: 6px; text-align: start; }
:root[data-ui="new"] .a3-state-opts ul,
:root[data-ui="new"] ul.a3-import-steps { margin: 0; padding-inline-start: 18px; color: #4a5a73; font-size: 13px; line-height: 1.6; text-align: start; }
:root[data-ui="new"] .a3-cbar .a3-cbar-end select { height: 36px; width: auto !important; margin: 0 !important; }

/* ---------- ייבוא נתונים (settings/imports) ---------- */
:root[data-ui="new"] .a3-import .a3-state { padding: 28px 12px 20px; }
:root[data-ui="new"] .a3-import .a3-state > .a3-btn { margin-top: 12px; }
:root[data-ui="new"] .a3-import-tpl { margin-top: 10px; font-size: 13px; font-weight: 600; color: #114591 !important; }
:root[data-ui="new"] .a3-import-loading { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 0; color: #5b6b85; font-size: 14px; }
:root[data-ui="new"] .a3-import-settings { margin-top: 6px; padding-top: 14px; border-top: 1px solid #eef2f8; display: flex; flex-direction: column; gap: 10px; }
:root[data-ui="new"] .a3-import-kind { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
:root[data-ui="new"] .a3-import-kind > b { font-size: 14px; font-weight: 700; color: #12233f; }
/* the import kind (RadioBox) as pill toggles */
:root[data-ui="new"] .a3-import-kind .radioselect { margin: 0; }
:root[data-ui="new"] .a3-import-kind .radioselect .checkboxes { display: flex; flex-wrap: wrap; gap: 6px; }
:root[data-ui="new"] .a3-import-kind .radioselect .checkboxes > .clearfix { display: none; }
:root[data-ui="new"] .a3-import-kind .radioselect label {
    float: none !important; display: inline-flex !important; align-items: center; gap: 8px; height: 38px; margin: 0 !important; padding: 0 14px !important;
    border-radius: 999px !important; border: 1px solid #dfe8f4 !important; background: #fff !important; color: #4a5a73 !important;
    font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: none !important; white-space: nowrap;
}
:root[data-ui="new"] .a3-import-kind .radioselect label.selected { background: #e6efff !important; border-color: #b9d3f4 !important; color: #114591 !important; font-weight: 700; }
:root[data-ui="new"] .a3-import-kind .radioselect label input { margin: 0; accent-color: #175bb0; }
:root[data-ui="new"] .a3-import-note { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #8a4a00; }
/* the column picker */
:root[data-ui="new"] .a3-map-rows { display: flex; flex-direction: column; margin: 4px 0 14px; }
:root[data-ui="new"] .a3-map-row { display: grid; grid-template-columns: minmax(140px, 220px) minmax(180px, 320px) 1fr; align-items: center; gap: 8px 16px; min-height: 52px; padding: 6px 0; border-bottom: 1px solid #eef2f8; }
:root[data-ui="new"] .a3-map-row:last-child { border-bottom: 0; }
:root[data-ui="new"] .a3-map-label { font-size: 14px; font-weight: 700; }
:root[data-ui="new"] .a3-req { color: #b0202d; }
:root[data-ui="new"] .a3-map-row select { width: 100% !important; height: 40px; margin: 0 !important; }
:root[data-ui="new"] .a3-map-sample { font-size: 13px; color: #5b6b85; overflow-wrap: anywhere; }
:root[data-ui="new"] .a3-map-acts { display: flex; flex-wrap: wrap; gap: 8px; }
:root[data-ui="new"] .a3-remarks { overflow-x: auto; }
/* the RSS links */
:root[data-ui="new"] .a3-rss { display: flex; flex-direction: column; gap: 16px; }
:root[data-ui="new"] .a3-rss-list { display: flex; flex-direction: column; }
:root[data-ui="new"] .a3-rss-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; min-height: 48px; padding: 12px 0; border-bottom: 1px solid #eef2f8; font-size: 14px; }
:root[data-ui="new"] .a3-rss-row:last-child { border-bottom: 0; }
:root[data-ui="new"] .a3-rss-row > b { min-width: 80px; }
:root[data-ui="new"] .a3-rss-row > a { color: #114591 !important; font-weight: 600; }
:root[data-ui="new"] .a3-rss-url { flex-basis: 100%; color: #5b6b85; font-size: 12px; overflow-wrap: anywhere; unicode-bidi: isolate; }

/* ---------- סנכרון נתונים משה״ח (settings/sync-manbas): the classic sections inside a card ---------- */
:root[data-ui="new"] .a3-sync { overflow-x: auto; }
:root[data-ui="new"] .a3-sync .view-import { margin: 0; padding: 0; }
:root[data-ui="new"] .a3-sync .view-import .table-responsive { float: none !important; margin: 0 0 12px !important; border: 0; }
:root[data-ui="new"] .a3-sync .view-import table.pull-left { float: none !important; }
:root[data-ui="new"] .a3-sync .view-import > div[style] { float: none !important; margin: 16px 0 0 !important; }
:root[data-ui="new"] .a3-sync .h6 { margin: 0 0 10px; font-family: inherit; font-size: 16px; font-weight: 800; color: #12233f; }
:root[data-ui="new"] .a3-sync em { display: block; margin-top: 10px; font-style: normal; font-size: 13px; color: #5b6b85; }
:root[data-ui="new"] .a3-sync .radioselect { margin: 8px 0; }
:root[data-ui="new"] .a3-sync table.table > tbody > tr > td[colspan] { white-space: normal; }

/* ---------- בקרת ניהול - דוחות מערכת (dashboard) ---------- */
:root[data-ui="new"] .a3-set-dash .a3-seg { align-self: flex-start; }
:root[data-ui="new"] .a3-dash-rep { overflow-x: auto; }
:root[data-ui="new"] .a3-dash-rep > .toolbar { margin: 0 0 12px; }

@media (max-width: 767px) {
    :root[data-ui="new"] .a3-filters-grid { grid-template-columns: 1fr; }
    :root[data-ui="new"] .a3-field select,
    :root[data-ui="new"] .a3-field .form-control,
    :root[data-ui="new"] .a3-inline-field select { height: 44px; }
    :root[data-ui="new"] .a3-field-act .a3-btn { width: 100%; min-height: 44px; }
    :root[data-ui="new"] .a3-cbar .a3-cbar-end { margin-inline-start: 0; flex-basis: 100%; }
    :root[data-ui="new"] .a3-cbar .a3-cbar-end .a3-inline-field { flex: 1 1 100%; }
    :root[data-ui="new"] .a3-cbar .a3-cbar-end .a3-inline-field select { flex: 1; }
    :root[data-ui="new"] .a3-head .a3-inline-field { flex: 1 1 100%; }
    :root[data-ui="new"] .a3-head .a3-inline-field select { flex: 1; }
    :root[data-ui="new"] .a3-map-row { grid-template-columns: 1fr; gap: 6px; padding: 10px 0; }
    :root[data-ui="new"] .a3-map-row select { height: 44px; }
    :root[data-ui="new"] .a3-map-acts .a3-btn { flex: 1 1 100%; justify-content: center; min-height: 44px; }
    :root[data-ui="new"] .a3-import-kind .radioselect label { height: auto; min-height: 44px; white-space: normal; }
    :root[data-ui="new"] .a3-set-dash .a3-seg { align-self: stretch; display: grid; grid-template-columns: 1fr 1fr; }
    :root[data-ui="new"] .a3-set-dash .a3-seg-b { height: auto; min-height: 44px; padding: 6px 10px; white-space: normal; text-align: start; line-height: 1.3; justify-content: flex-start; }
}