/* ===== EMS employee theme — "Olive & Sand" (warm, dignified) =============== */
:root{
  --bg:#F7F4EF; --surface:#FFFFFF; --surface-2:#F3F0E9; --text:#26303B; --muted:#6B7280;
  --primary:#5F7355; --primary-d:#4C5D45; --accent:#B98E33; --danger:#B45309;
  --border:#E7E1D7; --shabbat:#FBF3E2; --friday:#FBF6EE; --today-bg:#FBF4DE; --today-border:#5F7355;
  --warn-bg:#FBF4DE; --warn-bd:#E7D9B0; --warn-tx:#8A6D1F;
  --font:"Assistant","Segoe UI",Arial,sans-serif;
  --r-cell:10px; --r-btn:9px; --r-modal:16px; --gap:7px; --collapse:separate;
  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp5:24px; --sp6:32px;
  --sh1:0 1px 2px rgba(38,48,59,.06);
  --sh2:0 4px 10px rgba(38,48,59,.09);
  --sh3:0 14px 34px rgba(38,48,59,.18);
  --clock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5V12l3 1.8'/%3E%3C/svg%3E");
}

/* ============================================================================
   EMS — employee main screen.  SINGLE source of visual truth for the employee
   view. Every rule is scoped to #employeeApp, so the admin chrome is untouched.
   Design is 100% here; the HTML (Default.html + CalendarBuilder) is content only.
   The color/shape tokens live in the :root block prepended above this body.
   ============================================================================ */

/* Assistant — open-source (OFL) rounded Hebrew face; matches the אחד ועוד אחד
   logo and the modern feel. Variable font, served locally (works offline). */
@font-face{
  font-family:"Assistant";
  src:url("/fonts/Assistant.ttf") format("truetype");
  font-weight:200 800; font-style:normal; font-display:swap;
}

body:has(#employeeApp){ margin:0; background:var(--bg); }

#employeeApp{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
#employeeApp *{ box-sizing:border-box; }

/* ---------- top bar ---------- */
/* Full-bleed bar (bg+border span the screen) but its CONTENT is inset to the
   same centered 1180px column as .shalem, so the logo/buttons line up with the
   calendar edges and the whole page reads centered with equal side margins. */
#employeeApp .bigDiv{
  display:flex; align-items:center; gap:var(--sp4);
  padding-block:var(--sp3);
  padding-inline:max(var(--sp4), calc((100% - 1180px) / 2 + var(--sp4)));
  background:var(--surface);
  border:0; border-bottom:1px solid var(--border);
  box-shadow:var(--sh1);
  min-height:auto; height:auto;
}
#employeeApp .brand{ display:flex; align-items:center; }
#employeeApp .brandLogo{ height:2.3rem; width:auto; display:block; }
#employeeApp .monthNav{ display:inline-flex; align-items:center; gap:.6rem; }
#employeeApp .monthNav .label{
  color:var(--text); font-weight:700; font-size:1rem;
  min-width:7rem; text-align:center; font-variant-numeric:tabular-nums;
}
#employeeApp .navArrow{
  width:2.1rem; height:2.1rem; border-radius:50%;
  border:1px solid var(--border); background:var(--surface); color:var(--primary);
  display:grid; place-items:center; cursor:pointer; font-size:1.1rem; line-height:1;
  transition:background .15s, box-shadow .15s, border-color .15s;
  user-select:none;
}
#employeeApp .navArrow:hover{ background:var(--bg); box-shadow:var(--sh1); border-color:var(--primary); }
#employeeApp .topSpacer{ flex:1 1 auto; }
#employeeApp .userBox{ display:inline-flex; align-items:center; gap:.75rem; }
#employeeApp .userBox > *{ align-self:center; display:inline-flex; align-items:center; margin:0; }
/* #linkToAdmin is a <span> wrapping the admin button; without this it shrinks to
   text height and the taller button overflows (misaligned with יציאה). */
#employeeApp #linkToAdmin{ display:inline-flex; align-items:center; }
#employeeApp #userNameOther{ color:var(--muted); font-size:.95rem; }
#employeeApp .menulevel2{
  font-family:inherit; font-size:.9rem; font-weight:600; cursor:pointer;
  color:var(--text); background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-btn); padding:.45rem .9rem; margin:0;
  float:none; width:auto; height:auto; display:inline-block;
  transition:background .15s, color .15s, border-color .15s;
}
#employeeApp .menulevel2:hover{ background:var(--primary); color:#fff; border-color:var(--primary); text-decoration:none; }

/* ---------- content shell ---------- */
#employeeApp #mainContent{ width:100%; height:auto; display:block; padding:0; margin:0; }
#employeeApp .shalem{ width:auto; max-width:1180px; margin:0 auto; padding:0 var(--sp4) var(--sp6); }
#employeeApp .titleDate{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:var(--sp4); width:auto; margin:0; padding:var(--sp5) 0 var(--sp4);
}
#employeeApp .statistics{
  display:flex; align-items:stretch; gap:var(--sp3); flex-wrap:wrap;
  font-size:1rem; margin:0; text-align:right;
}
#employeeApp .stat{
  display:flex; flex-direction:column; gap:2px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-cell); padding:.5rem 1rem; min-width:5.5rem; box-shadow:var(--sh1);
}
#employeeApp .stat .k{ font-size:.72rem; color:var(--muted); font-weight:600; }
#employeeApp .stat .v{ font-size:1.2rem; font-weight:800; color:var(--text); text-shadow:none; font-variant-numeric:tabular-nums; }
#employeeApp .stat.hrs .v{ color:var(--primary); }

#employeeApp .btnPrimary{
  font-family:inherit; font-size:.95rem; font-weight:700; cursor:pointer;
  border:0; background:var(--primary); color:#fff; padding:.7rem 1.4rem;
  border-radius:var(--r-btn); box-shadow:var(--sh1);
  transition:background .15s, box-shadow .15s, transform .06s;
}
#employeeApp .btnPrimary:hover{ background:var(--primary-d); box-shadow:var(--sh2); }
#employeeApp .btnPrimary:active{ transform:translateY(1px); }

/* ---------- calendar ---------- */
#employeeApp .inMiddle{ width:100%; display:block; background-clip:padding-box; }
#employeeApp #calendarContainer table{
  width:100%; margin:0 auto; table-layout:fixed;
  border-collapse:var(--collapse); border-spacing:var(--gap);
  background:transparent;
}
#employeeApp #calendarContainer td.th{
  color:var(--primary); background:transparent; border:0;
  font-weight:700; font-size:.9rem; letter-spacing:.4px; text-align:center;
  height:auto; padding:.6rem 0;
}
#employeeApp #calendarContainer td{
  border:1px solid var(--border); width:auto;
  background:var(--surface); color:var(--text);
  position:relative; vertical-align:top; height:6.5rem;
  padding:.5rem .6rem; border-radius:var(--r-cell); background-clip:padding-box;
  transition:box-shadow .15s, transform .12s, border-color .15s;
}
#employeeApp #calendarContainer td:hover{
  box-shadow:var(--sh2); border-color:color-mix(in oklab, var(--primary) 45%, var(--border)); z-index:2;
}
#employeeApp .cellUpperArea{ position:relative; height:100%; display:block; }

/* clock trigger — CSS-drawn glyph, sits in the far (physical-left) top corner so
   it never collides with the day number (which sits at the RTL-right). */
#employeeApp .timesIcon{
  position:absolute; top:0; left:0; width:1.15rem; height:1.15rem;
  cursor:pointer; float:none; padding:0; opacity:.5;
  background-color:var(--muted);
  -webkit-mask:var(--clock) center/contain no-repeat;
          mask:var(--clock) center/contain no-repeat;
  transition:opacity .15s, background-color .15s;
}
#employeeApp #calendarContainer td:hover .timesIcon{ opacity:1; background-color:var(--primary); }

#employeeApp .number{
  display:block; text-align:start; font-size:1.7rem; font-weight:800; line-height:1;
  color:var(--text); font-variant-numeric:tabular-nums;
}
#employeeApp .hDate{ display:block; float:none; white-space:normal; font-size:.78rem; color:var(--muted); margin-top:2px; }

/* holiday / shabbat text bits */
#employeeApp .Parasha{ display:block; font-size:.78rem; font-weight:700; color:var(--primary); margin-top:4px; }
#employeeApp .parashaplus{ display:block; font-size:.72rem; color:var(--muted); font-weight:600; }
#employeeApp .hadlakat,
#employeeApp .mozaeihag{ display:block; font-size:.74rem; font-weight:600; color:var(--accent); margin-top:3px; }
#employeeApp .roshhodesh{
  display:inline-block; font-size:.7rem; font-weight:700; margin-top:4px; color:var(--primary);
  background:color-mix(in oklab, var(--primary) 12%, transparent); padding:1px 8px; border-radius:999px;
}
#employeeApp .specialday, #employeeApp .holiday, #employeeApp .yomtov, #employeeApp .erev,
#employeeApp .zom, #employeeApp .erevzom, #employeeApp .purim, #employeeApp .independence,
#employeeApp .holhamoed, #employeeApp .hanuka, #employeeApp .jerusalem, #employeeApp .sadday,
#employeeApp .isruhag, #employeeApp .clockchange, #employeeApp .erevhanuka, #employeeApp .erevhag{
  display:block; font-size:.74rem; font-weight:700; color:var(--danger); margin-top:3px;
}

/* reported work chips in the cell */
#employeeApp .downArea{ margin-top:6px; display:flex; flex-direction:column; gap:3px; }
#employeeApp .downArea .details{
  display:flex; justify-content:space-between; gap:6px; font-size:.74rem; font-weight:600;
  color:var(--text); background:color-mix(in oklab, var(--primary) 8%, var(--surface));
  border:1px solid color-mix(in oklab, var(--primary) 16%, var(--border));
  padding:2px 7px; border-radius:6px;
}
#employeeApp .downArea .details .proj{ display:inline-block; width:auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#employeeApp .downArea .details .hrs{ font-variant-numeric:tabular-nums; flex:0 0 auto; }
#employeeApp .downArea .details.free,
#employeeApp .downArea .details.sick{
  justify-content:center; background:var(--warn-bg); border-color:var(--warn-bd); color:var(--warn-tx);
}

/* day-type tints */
#employeeApp #calendarContainer td.friday{ background:var(--friday); }
#employeeApp #calendarContainer td.saturday,
#employeeApp #calendarContainer td.saturdayOutOfMonthDate,
#employeeApp #calendarContainer td.Vacation{ background:var(--shabbat); }
#employeeApp #calendarContainer td.Short{ background:var(--surface-2); }
#employeeApp #calendarContainer td.AnotherWorkDay{ background:var(--surface-2); }
#employeeApp #calendarContainer td.outOfMonthDate,
#employeeApp #calendarContainer td.saturdayOutOfMonthDate{ background:color-mix(in oklab, var(--bg) 55%, var(--surface)); }
#employeeApp #calendarContainer td.outOfMonthDate .number,
#employeeApp #calendarContainer td.outOfMonthDate .hDate,
#employeeApp #calendarContainer td.saturdayOutOfMonthDate .number,
#employeeApp #calendarContainer td.saturdayOutOfMonthDate .hDate{ color:#c3c8cf; }
#employeeApp #calendarContainer td.outOfMonthDate .Parasha,
#employeeApp #calendarContainer td.outOfMonthDate .mozaeihag{ opacity:.5; }
#employeeApp #calendarContainer td.today{
  border:2px solid var(--today-border); background:var(--today-bg);
}
#employeeApp #calendarContainer td.today .number{ color:var(--primary); }
/* per-request vacation coloring (data-driven: server sets --req). */
#employeeApp #calendarContainer td[style*="--req"]{ background:var(--req, var(--surface)); }

/* ---------- overlay + popups ---------- */
#employeeApp .overlay{
  position:fixed; inset:0; width:100%; height:100%; z-index:1000;
  background:rgba(17,24,39,.55); opacity:1;
  backdrop-filter:blur(3px) saturate(115%); -webkit-backdrop-filter:blur(3px) saturate(115%);
}
#employeeApp .popup{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1001;
  width:min(560px, 92vw); height:auto; max-height:88vh; overflow:auto;
  background:var(--surface); color:var(--text); font-family:var(--font); font-size:.95rem;
  border:1px solid var(--border); border-radius:var(--r-modal); box-shadow:var(--sh3);
  padding:0; display:flex; flex-direction:column; text-align:right;
}
#employeeApp .popup .dateInTitle{
  display:flex; align-items:center; gap:.75rem; text-align:right;
  padding:var(--sp4) var(--sp5); margin:0; border:0;
  border-bottom:1px solid var(--border);
  background:color-mix(in oklab, var(--primary) 6%, var(--surface));
}
#employeeApp .popup .gdate{ font-size:1.1rem; font-weight:800; color:var(--text); font-variant-numeric:tabular-nums; }
#employeeApp .popup .hdate{ font-size:.88rem; color:var(--muted); }
#employeeApp .popup .titleSpacer{ flex:1 1 auto; }
#employeeApp .popup .closeIcon{
  width:2rem !important; height:2rem; float:none; border:1px solid var(--border);
  border-radius:8px; background:var(--surface); color:var(--muted);
  display:grid; place-items:center; cursor:pointer; font-size:1rem; line-height:1;
  transition:background .15s, color .15s, border-color .15s;
}
#employeeApp .popup .closeIcon:hover{ background:var(--bg); color:var(--danger); border-color:var(--danger); }

#employeeApp .popup .dayStatusRow{
  display:flex; gap:.6rem; padding:var(--sp4) var(--sp5) 0; border:0; margin:0;
}
#employeeApp .popup .dayStatusRow label{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.6rem; border:1px solid var(--border); border-radius:var(--r-btn);
  cursor:pointer; font-weight:600; font-size:.95rem; color:var(--muted);
  background:var(--surface); transition:border-color .15s, color .15s, background .15s, box-shadow .15s;
}
#employeeApp .popup .dayStatusRow input{ accent-color:var(--primary); }
#employeeApp .popup .dayStatusRow label:has(input:checked){
  border-color:var(--primary); color:var(--primary);
  background:color-mix(in oklab, var(--primary) 8%, var(--surface)); box-shadow:var(--sh1);
}

#employeeApp .popup #addProject{ flex:1 1 auto; overflow:auto; padding:var(--sp4) var(--sp5) var(--sp5); }
#employeeApp .popup #addProject .table{ height:auto; }

/* work-hours grid inside the popup (TableMakerEx) */
#employeeApp .popup #EmployeeWorkOnDayTable{ padding:0; font-size:.9rem; }
#employeeApp .popup #EmployeeWorkOnDayTable table{ width:100%; border-collapse:collapse; background:transparent; }
#employeeApp .popup #EmployeeWorkOnDayTable th{
  color:var(--muted); font-weight:600; font-size:.8rem; text-align:right;
  padding:.5rem .6rem; border:0; border-bottom:1px solid var(--border);
  background-image:none; width:auto;
}
#employeeApp .popup #EmployeeWorkOnDayTable td{
  padding:.55rem .6rem; border:0; border-bottom:1px solid var(--border); font-size:.9rem;
}
#employeeApp .popup #EmployeeWorkOnDayTable tr:hover td{ background:color-mix(in oklab, var(--primary) 5%, var(--surface)); }

/* + add button (its "+" is the input value) and the toolbar hamburger svg */
#employeeApp .popup input.addButton, #employeeApp .popup .addButton{
  width:2.1rem; height:2.1rem; padding:0; margin:0 0 .5rem;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-btn);
  color:var(--primary); font-size:1.3rem; font-weight:700; line-height:1; cursor:pointer;
  background-image:none;
}
#employeeApp .popup input.addButton:hover, #employeeApp .popup .addButton:hover{
  background:color-mix(in oklab, var(--primary) 10%, var(--surface)); border-color:var(--primary);
}
#employeeApp .popup #menuIcon{ fill:var(--muted); height:1.6rem; width:1.6rem; cursor:pointer; vertical-align:middle; }
#employeeApp .popup #menuIcon:hover{ fill:var(--primary); }

/* vacation popup inputs (inside #employeeApp .popup) — date fields + notes only,
   NOT the שליחה button (which is also an <input>). */
#employeeApp .popup .vacBody input[type=date],
#employeeApp .popup .vacBody textarea{
  font-family:inherit; font-size:.92rem; padding:.55rem .65rem;
  border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--text);
  transition:border-color .15s, box-shadow .15s; box-sizing:border-box;
}
#employeeApp .popup .vacBody input[type=date]:focus,
#employeeApp .popup .vacBody textarea:focus{
  outline:none; border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--primary) 22%, transparent);
}

/* The add/edit work-row form (#formDiv) is appended to <body> by TableMakerEx,
   so it can't be scoped under #employeeApp. It is the SAME element admin uses,
   so scope by employee context (body:not(.adminScope)) to leave admin's form
   untouched. It floats centered ABOVE the work-day popup (z > 1001). */
body:not(.adminScope) #formDiv{
  position:fixed !important; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:1100; width:min(460px,92vw); max-width:none; max-height:88vh; overflow:auto;
  margin:0 !important; padding:var(--sp5) !important;
  background:var(--surface) !important; color:var(--text);
  border:1px solid var(--border) !important; border-radius:var(--r-modal);
  box-shadow:var(--sh3); font-family:var(--font); text-align:right;
}
body:not(.adminScope) #formDiv label{ display:inline-block; min-width:6rem; color:var(--muted); font-weight:600; }
body:not(.adminScope) #formDiv input[type=text],
body:not(.adminScope) #formDiv input[type=number],
body:not(.adminScope) #formDiv select,
body:not(.adminScope) #formDiv textarea{
  font-family:inherit; font-size:.92rem; padding:.55rem .65rem; width:15rem; max-width:60%;
  border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--text);
  transition:border-color .15s, box-shadow .15s; box-sizing:border-box; vertical-align:middle;
}
body:not(.adminScope) #formDiv input:focus,
body:not(.adminScope) #formDiv select:focus,
body:not(.adminScope) #formDiv textarea:focus{
  outline:none; border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--primary) 22%, transparent);
}
body:not(.adminScope) #formDiv input[type=button]{
  font-family:inherit; font-weight:600; cursor:pointer; border-radius:var(--r-btn);
  padding:.55rem 1.1rem; margin:.5rem .25rem 0; border:1px solid var(--border);
  background:var(--surface); color:var(--text); width:auto;
  transition:background .15s, color .15s, border-color .15s;
}
body:not(.adminScope) #formDiv input[type=button]:hover{ background:var(--bg); }
body:not(.adminScope) #formDiv input[type=button][value="שמירה"]{
  background:var(--primary); color:#fff; border-color:var(--primary);
}
body:not(.adminScope) #formDiv input[type=button][value="שמירה"]:hover{ background:var(--primary-d); }
body:not(.adminScope) #formDiv input[type=button][value="מחיקה"]{
  background:transparent; color:var(--danger);
  border-color:color-mix(in oklab, var(--danger) 40%, var(--border));
}
body:not(.adminScope) #formDiv input[type=button][value="מחיקה"]:hover{
  background:color-mix(in oklab, var(--danger) 8%, var(--surface));
}

/* vacation-request popup body */
#employeeApp #vacationPopup .vacBody{ display:flex; flex-direction:column; gap:var(--sp3); padding:var(--sp5); }
#employeeApp #vacationPopup .vacBody label{ display:flex; flex-direction:column; gap:.35rem; margin:0; color:var(--muted); font-weight:600; font-size:.85rem; }
#employeeApp #vacationPopup .vacBody input[type=date],
#employeeApp #vacationPopup .vacBody textarea{ width:100%; }
#employeeApp #vacationPopup .vacBody textarea{ min-height:5rem; resize:vertical; }
#employeeApp #vacationPopup .vacBody .btnPrimary{ align-self:flex-start; margin:.25rem 0 0; }

/* live theme switcher (preview control — employee screen only). Fixed, discreet;
   sits below modals (z<overlay) so it never covers a popup. */
#employeeApp .themeSwitch{
  position:fixed; bottom:14px; left:14px; z-index:900;
  display:flex; align-items:center; gap:4px;
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
  padding:5px 7px; box-shadow:var(--sh2);
}
#employeeApp .themeSwitch .tsLabel{ color:var(--muted); font-weight:600; font-size:.76rem; padding-inline:6px; }
#employeeApp .themeSwitch .tsBtn{
  font-family:inherit; font-size:.78rem; font-weight:600; cursor:pointer;
  border:1px solid transparent; background:transparent; color:var(--text);
  padding:5px 11px; border-radius:999px;
  transition:background .15s, color .15s, border-color .15s;
}
#employeeApp .themeSwitch .tsBtn:hover{ background:var(--bg); }
#employeeApp .themeSwitch .tsBtn.on{ background:var(--primary); color:#fff; border-color:var(--primary); }

/* keyboard focus visibility */
#employeeApp .navArrow:focus-visible,
#employeeApp .timesIcon:focus-visible,
#employeeApp .closeIcon:focus-visible,
#employeeApp .menulevel2:focus-visible,
#employeeApp .btnPrimary:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  #employeeApp *{ transition:none !important; }
}

@media (max-width: 720px){
  #employeeApp .bigDiv{ flex-wrap:wrap; gap:.6rem; padding:.6rem .8rem; }
  #employeeApp #calendarContainer td{ height:4.5rem; padding:.35rem .4rem; }
  #employeeApp .number{ font-size:1.25rem; }
  #employeeApp .stat{ min-width:4.2rem; padding:.4rem .6rem; }
}