@charset "utf-8";
/* =========================================================================
   צורבא מרבנן — מערכת ניהול מבחנים · עיצוב מחודש
   נשמרו כל השמות (selectors) מהמקור כדי שכל ה-HTML הקיים ימשיך לעבוד.
   ========================================================================= */

@font-face { font-family: myFirstFont; src: url(ico.ttf); }

:root{
  --brand:#12923f; --brand-dark:#0c7431; --brand-tint:#e9f7ee; --brand-ring:rgba(18,146,63,.25);
  --ink:#1e2a23; --muted:#6d7c72; --faint:#95a49a;
  --bg:#eef2f0; --card:#ffffff; --line:#e3e9e5; --line-soft:#eef2ef;
  --sidebar-bg:#0f2419; --sidebar-2:#13301f; --sidebar-fg:#c8d4cc; --sidebar-active:#eaf7ef;
  --danger:#d23b3b; --danger-bg:#fdecec; --danger-line:#f5c2c2;
  --ok:#12923f; --info-bg:#e7f3fb;
  --radius:12px; --radius-sm:9px; --shadow:0 6px 22px rgba(15,40,25,.09),0 2px 6px rgba(0,0,0,.05);
  --shadow-sm:0 2px 8px rgba(15,40,25,.07);
  --sbw:186px; --topbar:62px; --submenu:44px;
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }   /* חובה: מאפשר החבאה ע"י אטריביוט hidden גם כשיש display מפורש */

html{ -webkit-text-size-adjust:100%; }
body{
  font-family:Rubik,"Segoe UI",Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:var(--bg);
  margin:0;
  direction:rtl;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--brand-dark); text-decoration:none; }
a:hover{ text-decoration:none; }

/* icon font ---------------------------------------------------------------*/
#icon{ font-family:myFirstFont; font-size:18px; line-height:1; display:inline-flex; align-items:center;
  justify-content:center; width:30px; height:30px; border-radius:8px; color:var(--brand-dark);
  background:var(--brand-tint); transition:background .15s,color .15s,transform .1s; }
a:hover #icon{ background:var(--brand); color:#fff; }
#icon_m{ font-family:myFirstFont; font-size:22px; display:inline-flex; align-items:center;
  justify-content:center; width:34px; height:34px; margin-left:6px; color:inherit; }

/* =========================================================================
   Sidebar (right)
   ========================================================================= */
.sidebar{
  height:100vh; width:var(--sbw); position:fixed; z-index:20; top:0; right:0;
  background:linear-gradient(185deg,var(--sidebar-2),var(--sidebar-bg));
  overflow-x:hidden; overflow-y:auto; padding:14px 0 24px;
  box-shadow:-4px 0 18px rgba(0,0,0,.12);
}
/* the title link at top of the sidebar */
.sidebar > a:first-of-type{
  display:flex !important; align-items:center; gap:6px;
  font-size:20px !important; font-weight:700; color:#fff !important;
  padding:10px 16px 16px !important; margin-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sidebar a, .btn{
  border:none; background:transparent; text-decoration:none; text-align:right;
  font-size:16px; color:var(--sidebar-fg); display:flex; align-items:center; gap:2px;
  padding:11px 16px; margin:2px 8px; border-radius:10px;
  transition:background .15s,color .15s; cursor:pointer;
}
.sidebar a:hover, .dropdown:hover{
  background:rgba(255,255,255,.07); color:#fff; border:none;
}
.sidebar a:hover #icon_m{ color:#8ef0ab; }
/* active item */
.selcted{
  background:rgba(255,255,255,.10); border-radius:10px; margin:2px 8px;
  border:none; box-shadow:inset 3px 0 0 0 var(--brand);
}
.selcted a{
  color:#fff !important; margin:0 !important; background:transparent !important;
  box-shadow:none !important;
}
.selcted a #icon_m{ color:#8ef0ab; }

/* =========================================================================
   Top bars
   ========================================================================= */
.top{
  height:var(--topbar); width:calc(100% - var(--sbw)); position:fixed; z-index:15;
  top:0; right:var(--sbw); background:rgba(255,255,255,.9);
  backdrop-filter:saturate(140%) blur(8px); -webkit-backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; padding:0 26px;
  font-size:22px; font-weight:600; color:var(--ink); overflow:hidden;
}
.top_menu{
  height:var(--submenu); width:calc(100% - var(--sbw)); position:fixed; z-index:14;
  top:var(--topbar); right:var(--sbw); background:rgba(255,255,255,.92);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
  display:flex; align-items:stretch; gap:2px; padding:0 16px; overflow-x:auto;
}
#menu:link, #menu:visited{
  background:transparent; border:none; color:var(--muted);
  font-size:15px; font-weight:500; display:inline-flex; align-items:center;
  padding:0 16px; border-bottom:3px solid transparent; white-space:nowrap;
  transition:color .15s,border-color .15s;
}
#menu:hover, #menu:active{
  color:var(--brand-dark); border-bottom:3px solid var(--brand-ring);
}
/* index.php marks the active submenu tab with an inline solid bottom border */
#menu[style]{ color:var(--brand-dark) !important; }

/* =========================================================================
   Floating header widgets (kept fixed, but tidied & responsive)
   ========================================================================= */
.sign-out{
  position:fixed; z-index:16; top:0; left:0; height:var(--topbar);
  display:flex; align-items:center; padding:0 22px 0 0;
}
.sign-out a{
  display:inline-flex; align-items:center; gap:8px; color:var(--muted);
  font-size:14px; font-weight:500; padding:7px 12px; border-radius:20px;
  background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow-sm);
}
.sign-out a:hover{ color:var(--danger); border-color:var(--danger-line); }
.sign-out #icon{ background:transparent; width:auto; height:auto; }

.sale_active{
  position:fixed; z-index:16; top:calc(var(--topbar) + var(--submenu) + 12px); left:16px;
  background:var(--card); color:var(--ink); border:1px solid var(--line);
  border-right:4px solid var(--brand); box-shadow:var(--shadow-sm);
  padding:9px 14px; border-radius:10px; font-size:13px; max-width:44vw;
  display:flex; gap:14px; flex-wrap:wrap;
}
.sale_active b{ color:var(--brand-dark); font-weight:600; }

.button_mane{
  position:fixed; z-index:16; top:calc(var(--topbar) + var(--submenu) + 10px); left:auto; right:calc(var(--sbw) + 20px);
  display:flex; gap:10px; flex-wrap:wrap; padding:0;
}

.status{
  position:fixed; z-index:16; top:14px; left:210px; width:auto; height:auto;
  background:var(--brand); color:#fff; border:none; border-radius:20px;
  padding:8px 16px; font-size:13px; box-shadow:var(--shadow-sm);
}

/* =========================================================================
   Main content
   ========================================================================= */
.main{
  margin-right:var(--sbw);
  padding:calc(var(--topbar) + var(--submenu) + 64px) 28px 60px;
  min-height:100vh;
}

/* =========================================================================
   Buttons
   ========================================================================= */
#button:link, #button:visited, .btn-primary{
  background:var(--brand); color:#fff; padding:9px 18px; text-align:center;
  display:inline-flex; align-items:center; gap:7px; border-radius:10px;
  font-size:14px; font-weight:600; border:none; box-shadow:var(--shadow-sm);
  transition:background .15s,transform .06s,box-shadow .15s;
}
#button:hover, #button:active{ background:var(--brand-dark); text-decoration:none;
  box-shadow:0 4px 14px var(--brand-ring); transform:translateY(-1px); }
#button i{ font-size:12px; }

#submit{
  width:100%; padding:12px 16px; margin:10px 0 4px; display:block; cursor:pointer;
  border:none; border-radius:10px; background:var(--brand); color:#fff;
  font-size:15px; font-weight:600; box-shadow:var(--shadow-sm);
  transition:background .15s,transform .06s;
}
#submit:hover, #submit:active{ background:var(--brand-dark); color:#fff; transform:translateY(-1px); }

#ok:link, #ok:visited{ background:var(--muted); color:#fff; padding:6px 12px; border-radius:8px;
  text-decoration:none; display:inline-block; }
#ok:hover, #ok:active{ background:var(--ink); }

/* =========================================================================
   Tables
   ========================================================================= */
#l_table{
  font-size:13.5px; border-collapse:separate; border-spacing:0; width:100%;
  direction:rtl; text-align:right; color:var(--ink);
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); overflow:visible; box-shadow:var(--shadow-sm);
}
/* rounded corners without clipping (so tooltips can overflow the table box) */
#l_table thead tr th:first-child{ border-top-right-radius:var(--radius); }
#l_table thead tr th:last-child{ border-top-left-radius:var(--radius); }
#l_table tbody tr:last-child td:first-child{ border-bottom-right-radius:var(--radius); }
#l_table tbody tr:last-child td:last-child{ border-bottom-left-radius:var(--radius); }
#l_table thead th, #l_th{
  height:auto; padding:13px 12px; background:#eef4f0; color:var(--muted);
  font-weight:700; font-size:12px; letter-spacing:.02em; text-align:right;
  vertical-align:middle; border:none; border-bottom:2px solid var(--line); white-space:nowrap;
}
#l_table thead{ background:#eef4f0; }
#l_td{ padding:11px 12px; text-align:right; border:none;
  border-bottom:1px solid var(--line-soft); vertical-align:middle; }
#l_tr{ background:var(--card); transition:background .12s; }
#l_table tbody tr:nth-child(even){ background:#fbfdfc; }
#l_tr:hover{ background:var(--brand-tint); }
#l_tr:hover #icon{ background:#fff; }
#l_table a{ color:var(--ink); }
#l_table a:hover{ color:var(--brand-dark); }
/* action-cell icon links spacing */
#l_td .tooltip{ margin-left:3px; }
/* legacy tables that pass border='1' — neutralize the cell frames */
#l_table[border] td, #l_table[border] th{ border-width:0; }
/* pagination line (clientes) */
.pager{
  display:flex; align-items:center; gap:10px; justify-content:flex-start;
  margin:0 0 12px; padding:10px 14px; background:var(--card); border:1px solid var(--line);
  border-radius:10px; font-size:13px; color:var(--muted); box-shadow:var(--shadow-sm);
}
.pager b{ color:var(--ink); }
.pager a{ color:var(--brand-dark); font-weight:600; padding:2px 8px; border-radius:6px; }
.pager a:hover{ background:var(--brand-tint); }

/* =========================================================================
   Tooltips
   ========================================================================= */
.tooltip{ position:relative; display:inline-block; }
/* tooltips sit ABOVE the trigger — solid, high stacking, never clipped */
.tooltip .tooltiptext{
  visibility:hidden; opacity:0; width:max-content; min-width:64px; max-width:220px;
  background:#0f2419; color:#fff;
  text-align:center; border-radius:8px; padding:6px 11px; font-size:12px; font-weight:500;
  position:absolute; z-index:200; bottom:calc(100% + 9px); left:50%;
  transform:translateX(-50%) translateY(4px);
  white-space:nowrap; box-shadow:0 6px 20px rgba(10,25,15,.35);
  transition:opacity .13s,transform .13s; pointer-events:none;
}
.tooltip .tooltiptext::after{
  content:""; position:absolute; top:100%; left:50%; margin-left:-5px;
  border-width:5px; border-style:solid; border-color:#0f2419 transparent transparent transparent;
}
.tooltip:hover .tooltiptext{ visibility:visible; opacity:1; transform:translateX(-50%) translateY(0); }
#l_td.actions{ white-space:nowrap; }
#l_td.actions .tooltip{ margin-left:2px; }

/* =========================================================================
   Filter toolbar (students list — AJAX)
   ========================================================================= */
.filters{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:16px 18px; margin:0 0 16px;
}
.filters .fld{ display:flex; flex-direction:column; gap:6px; }
.filters .fld > label{ font-size:12.5px; font-weight:600; color:var(--muted); padding-right:2px; }
.filters .fld-search{ flex:1 1 280px; min-width:220px; }
/* חשוב: רק צאצא ישיר — כדי לא לתפוס את הצ'קבוקסים שבתוך ה-multiselect */
.filters .fld > input, .filters .fld > select{
  width:100%; margin:0; height:44px; padding:0 13px; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius-sm);
  font-size:14.5px; color:var(--ink);
}
.filters .fld > select{ min-width:190px; cursor:pointer; }
.filters .fld > input:focus, .filters .fld > select:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-ring);
}
.filters .fld > input::placeholder{ color:var(--faint); }
.filters .fld-actions{ flex-direction:row; gap:8px; }
.filters .fld-actions .btn-primary,
.filters .fld-actions .btn-ghost{
  height:44px; padding:0 20px; border-radius:var(--radius-sm); font-size:14.5px;
  font-weight:600; cursor:pointer; display:inline-flex; align-items:center; border:1px solid transparent;
}
.btn-primary{ background:var(--brand); color:#fff; box-shadow:var(--shadow-sm); transition:background .15s; }
.btn-primary:hover{ background:var(--brand-dark); }
.btn-ghost{ background:#fff; color:var(--muted); border:1px solid var(--line)!important; transition:.15s; }
.btn-ghost:hover{ color:var(--danger); border-color:var(--danger-line)!important; background:var(--danger-bg); }
.filters .fld-spin{ justify-content:center; }
.spin{
  display:inline-block; width:22px; height:22px; margin-bottom:11px;
  border:3px solid var(--brand-ring); border-top-color:var(--brand);
  border-radius:50%; animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
#clientsResult{ transition:opacity .1s; }

/* multi-select dropdown (yeshiva filter) */
.ms{ position:relative; min-width:210px; }
.ms-btn{
  width:100%; height:44px; padding:0 13px; display:flex; align-items:center; justify-content:space-between;
  gap:8px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  font:inherit; font-size:14.5px; color:var(--ink); cursor:pointer; transition:border-color .15s,box-shadow .15s;
}
.ms.has-sel .ms-btn{ border-color:var(--brand); color:var(--brand-dark); font-weight:600; }
.ms.open .ms-btn, .ms-btn:hover{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-ring); }
.ms-btn > span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ms-caret{
  width:0; height:0; flex:none; border-left:5px solid transparent; border-right:5px solid transparent;
  border-top:6px solid var(--muted); transition:transform .15s;
}
.ms.open .ms-caret{ transform:rotate(180deg); }
.ms-panel{
  position:absolute; z-index:120; top:calc(100% + 6px); right:0; width:min(320px,86vw);
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:10px; display:flex; flex-direction:column; gap:8px;
}
.ms-search{
  width:100%; height:38px; padding:0 11px; border:1px solid var(--line); border-radius:var(--radius-sm);
  font:inherit; font-size:14px; background:#fbfdfc;
}
.ms-search:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-ring); }
.ms-list{ max-height:240px; overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column; }
.ms-opt{
  display:flex; align-items:center; gap:9px; padding:8px; border-radius:8px; cursor:pointer;
  font-size:14px; color:var(--ink); transition:background .1s; min-width:0;
}
.ms-opt:hover{ background:var(--brand-tint); }
.ms-opt > input{ width:17px; height:17px; min-width:17px; margin:0; padding:0; accent-color:var(--brand); flex:0 0 auto; cursor:pointer; }
.ms-opt > span{ flex:1 1 auto; min-width:0; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ms-foot{ display:flex; gap:8px; justify-content:space-between; border-top:1px solid var(--line-soft); padding-top:8px; }
.ms-foot .btn-primary, .ms-foot .btn-ghost{ height:38px; padding:0 16px; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; }

/* =========================================================================
   Notes / alerts
   ========================================================================= */
p.note, .note{
  border:1px solid #bfe6cd; border-right:4px solid var(--ok);
  background:var(--brand-tint); color:#0d5a29; padding:12px 16px; border-radius:10px;
}
p.note_error, p.error_note{
  width:auto; border:1px solid var(--danger-line); border-right:4px solid var(--danger);
  background:var(--danger-bg); color:#9c1f1f; padding:12px 16px; border-radius:10px;
}

/* =========================================================================
   Modal
   ========================================================================= */
.modal{
  position:fixed; z-index:100; inset:0; width:100%; height:100%; overflow:auto;
  background:rgba(15,30,20,.5); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  padding:0;
}
.modal-content{
  background:var(--card); margin:6vh auto 8vh; border:none; width:min(560px,92vw);
  border-radius:var(--radius); box-shadow:0 20px 60px rgba(10,30,18,.28); overflow:hidden;
}
.container{ padding:22px 26px 28px; }
.imgcontainer{ text-align:center; margin:0; position:relative; }
img.avatar{ width:40%; border-radius:50%; }
.close{
  position:absolute; left:14px; right:auto; top:10px; color:var(--faint);
  font-size:26px; font-weight:400; line-height:1; z-index:2;
}
.close a{ color:var(--faint); }
.close a:hover{ color:var(--danger); }
/* the modal header title row the PHP prints (font-size:30px;text-align:center) */
.modal-content > div[style*="30px"]{
  font-size:20px !important; font-weight:700; color:var(--ink);
  padding:20px 26px 0; text-align:center;
}
.modal-content hr{ border:none; border-top:1px solid var(--line); margin:16px 0; }

.animate{ animation:animatezoom .28s cubic-bezier(.2,.8,.25,1); }
@keyframes animatezoom{ from{transform:scale(.94);opacity:0} to{transform:scale(1);opacity:1} }

/* =========================================================================
   Forms
   ========================================================================= */
input[type=date], input[type=text], input[type=file], input[type=email],
input[type=number], select[type=select], input[type=time], input[type=password],
textarea, #mySelect2, select{
  width:100%; padding:11px 13px; margin:6px 0; display:inline-block;
  border:1px solid var(--line); border-radius:var(--radius-sm); background:#fbfdfc;
  font:inherit; font-size:14.5px; color:var(--ink); box-sizing:border-box;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
input:focus, textarea:focus, select:focus, #mySelect2:focus{
  outline:none; border-color:var(--brand); background:#fff;
  box-shadow:0 0 0 3px var(--brand-ring);
}
input[type=submit]{
  width:auto; cursor:pointer; background:var(--brand); color:#fff; border:none;
  border-radius:10px; padding:11px 20px; font-weight:600; box-shadow:var(--shadow-sm);
}
input[type=submit]:hover{ background:var(--brand-dark); }
textarea{ min-height:120px; resize:vertical; line-height:1.6; }

.lible{
  display:inline-block; width:100%; max-width:520px; font-size:13px; color:var(--muted);
  padding:8px 2px;
}
.lible > div:first-child{ margin-bottom:2px; font-weight:600; color:var(--ink); font-size:13px; }
.lible input, .lible select{ width:100%; }
#lible, #input{ width:100%; padding:10px; border:none; outline:none; }

/* =========================================================================
   Login screen
   ========================================================================= */
#login_form{
  background:var(--card); margin:8vh auto; width:min(400px,92vw);
  border-radius:16px; padding:34px 32px 30px; box-shadow:var(--shadow);
  border:1px solid var(--line); text-align:right;
}
#login_form input[type=text], #login_form input[type=password]{ width:100%; }
#login_form input[type=submit]{ width:100%; margin-top:14px; }

/* =========================================================================
   Dropdowns (legacy)
   ========================================================================= */
.dropdown-content, .dropdown_aa-content{
  display:none; position:absolute; background:var(--card); min-width:160px;
  box-shadow:var(--shadow); z-index:40; border-radius:10px; overflow:hidden; border:1px solid var(--line);
}
.dropdown_aa-content{ min-width:250px; }
.dropdown-content a:hover, .dropdown_aa-content a:hover{ background:var(--brand-tint); }
.dropdown:hover .dropdown-content, .dropdown_aa:hover .dropdown_aa-content{ display:inline-block; }

.material-icons{ font-size:18px; vertical-align:middle; }

/* audio players in tables */
#l_td audio{ height:30px; vertical-align:middle; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width:820px){
  :root{ --sbw:0px; }
  .sidebar{
    width:100%; height:auto; position:sticky; top:0; right:0; display:flex; flex-wrap:wrap;
    align-items:center; padding:8px; box-shadow:0 2px 12px rgba(0,0,0,.15);
  }
  .sidebar > a:first-of-type{ width:100%; padding:6px 10px 10px !important; margin-bottom:4px; }
  .sidebar a, .selcted{ margin:3px; font-size:14px; padding:8px 10px; }
  .selcted{ box-shadow:inset 0 -3px 0 0 var(--brand); }
  .top{ position:sticky; top:0; right:0; width:100%; }
  .top_menu{ position:sticky; top:0; right:0; width:100%; }
  .sign-out{ position:static; height:auto; padding:8px; justify-content:flex-end; }
  .sale_active{ position:static; max-width:100%; margin:10px; }
  .button_mane{ position:static; right:auto; margin:12px; }
  .status{ position:static; margin:10px; display:inline-block; }
  .main{ margin-right:0; padding:18px 14px 60px; }
  #l_table thead th, #l_th{ position:static; }
  /* horizontal scroll for wide tables */
  .main{ overflow-x:hidden; }
  #l_table{ display:block; overflow-x:auto; white-space:nowrap; }
}