which is block-level; without a fixed label width the labels collapse
around their content and rows lose vertical alignment. */
}
/* ==========================================================================
Visual preservation — port-specific overrides (Step 9).
Legacy admin/employee chrome used
links inside #menuDiv / #captionBar /
.bigDiv. The port uses (cleanly clickable via util.js's
auto-bind) but the canonical leopard.css' input[type=button] gives them the
chunky blue look meant for *form* buttons elsewhere. These rules restore the
legacy link-style visual without changing HTML.
========================================================================== */
#menuDiv input[type="button"] {
background-color: transparent;
color: white;
border: none;
border-radius: 0;
font-size: 1.3rem;
margin: 0.5rem;
padding: 0;
display: block;
text-align: right;
width: calc(100% - 1rem);
cursor: pointer;
text-decoration: none;
/* Allow wrap so long labels like "דוח נוכחות מסכם כלל עובדים" don't get truncated. */
white-space: normal;
word-wrap: break-word;
height: auto;
line-height: 1.4;
}
#menuDiv input[type="button"]:hover {
background-color: white;
color: #00355c;
}
/* Header (.bigDiv) — vertical center everything, link-style buttons, user name.
Text is dark navy + bold so it's readable on the turquoise bar. */
.bigDiv {
display: flex !important;
align-items: center !important;
padding: 0 1rem;
gap: 0.5rem;
min-height: 3rem;
}
.bigDiv > * { align-self: center; }
.bigDiv img { vertical-align: middle; }
.bigDiv .menulevel1 {
margin-inline-start: auto; /* push to RTL-left edge */
display: inline-flex !important;
align-items: center;
gap: 0.5rem;
float: none !important;
color: #19398a !important;
font-weight: bold;
}
.bigDiv input[type="button"],
.bigDiv .menulevel2,
.bigDiv #linkToAdmin input[type="button"] {
background-color: transparent !important;
color: #19398a !important;
border: none !important;
margin: 0 !important;
padding: 0.25rem 0.5rem !important;
font-size: 1rem;
font-weight: bold;
cursor: pointer;
float: none !important;
width: auto !important;
height: auto !important;
align-self: center;
}
.bigDiv input[type="button"]:hover,
.bigDiv .menulevel2:hover {
background-color: transparent !important;
color: #19398a !important;
text-decoration: underline;
}
.bigDiv #userNameOther {
color: #19398a;
font-weight: bold;
margin-inline-start: 0.5rem;
align-self: center;
}
#captionBar input[type="button"] {
background-color: transparent;
color: inherit;
border: none;
margin: 0;
padding: 0.25rem 0.5rem;
font-size: 1rem;
cursor: pointer;
text-decoration: underline;
}
.overlay {
position: fixed;
background-color: Black;
opacity: 0.6;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
/* no z-index: overlay is inserted in DOM right before the panel it covers,
so natural stacking puts panel on top. */
}
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40rem;
height: 32rem;
text-align: right;
color: #c0866d;
background-color: #f2e7e0;
overflow: hidden;
padding: 0.75rem;
border: 1px solid gray;
font-family: Arial;
font-size: 0.9em;
display: flex;
flex-direction: column;
}
/* Day-status radio row — single row, centered, no margin gaps. */
.popup .dayStatusRow {
display: flex;
justify-content: center;
gap: 1.5rem;
padding: 0.75rem 0;
border-bottom: 1px dashed #fff;
flex: 0 0 auto;
}
.popup .dayStatusRow label {
cursor: pointer;
font-size: 1rem;
display: inline-flex;
align-items: center;
gap: 0.3rem;
}
/* Work-hours table fills the remaining popup space. */
.popup #addProject {
flex: 1 1 auto;
overflow: auto;
padding-top: 0.5rem;
}
.popup #addProject .table {
height: 100%;
}
/* בקשת חופשה — compact form popup (3 fields), unlike the full-height WorkDay popup. */
#vacationPopup {
width: 24rem;
height: auto;
}
#vacationPopup label {
display: block;
margin: 0.75rem 0;
}
#vacationPopup input[type=date],
#vacationPopup textarea {
display: block;
width: 100%;
box-sizing: border-box;
margin-top: 0.25rem;
}
#vacationPopup textarea {
height: 5rem;
resize: vertical;
}
#vacationPopup input[type=button] {
display: block;
margin: 0.75rem auto 0;
}
.textBoxDiv {
border: 1px solid #c0866d;
border-radius: 3px;
background-color: #F0F0F0;
margin-right: 1%;
}
#formDiv input[type="button"]
{
/*
background-color: #F0F0F0;
color: #c0866d;*/
font-size: 1.1rem;
padding: 0.5rem;
border-radius: 3px;
border: 1px solid;
}
.buttonInEms {
display: block;
margin: auto;
background-color: #F0F0F0;
border: 1px solid;
border-radius: 3px;
color: #c0866d;
height: 30px;
line-height: 30px;
text-align: center;
cursor: pointer;
}
.underDate {
margin-top: 15px;
}
.closeIcon {
width: 40px !important;
height: 40px;
border: 0px;
float: left;
}
.dateInTitle {
text-align: center;
}
div.dateInTitle {
padding-bottom: 10px;
border-bottom: 1px dashed #fff;
margin-bottom: 6px;
font-size: 1em;
}
.inline .inputlabelpair {
display: inline-block;
}
.details {
font-size: 12px;
color: black;
display: block;
font-weight: bold;
}
.statistics {
font-size: 16pt;
display: inline-block;
vertical-align: middle;
margin-right: 25%;
text-align: right;
}
.dateInRight {
display: inline-block;
vertical-align: middle;
}
.statistics span, .dateInRight span, .hours span {
font-weight: bold;
color: #31a3b9;
padding-bottom: 2px;
height: 18px;
text-shadow: 1px 1px 1px #888;
text-decoration: none;
vertical-align: middle;
}
.shabatDetails, .specialday, .erev, .yomtov, .purim, .roshhodesh, .holhamoed, .sadday, .independence, .specialday, .holiday, .yomtov,
.erev, .erevzom, .erevhanuka, erevhag, mozaeihag, .holhamoed,
.isruhag, .clockchange, .hanuka, .purim, .independence, .zom, .jerusalem, span.outOfMonthDate, .mozaeihag, .hadlakat {
font-weight: bold;
}
span.shabatDetails, span.specialday, span.erev, span.yomtov, span.purim, span.roshhodesh, span.holhamoed, span.sadday, span.independence, span.specialday, span.holiday, span.yomtov, span.erev, span.erevzom, span.erevhanuka, span.erevhag, span .mozaeihag, span.holhamoed, span.isruhag, span.clockchange, span.hanuka, span.purim, span.independence, span.zom, span.jerusalem, span.outOfMonthDate, span.mozaeihag, span.hadlakat {
display: block;
}
.specialday, .erev, .yomtov, .purim, .roshhodesh, .holhamoed, .sadday, .independence, .specialday, .holiday, .yomtov,
.erev, .erevzom, .erevhanuka, erevhag, mozaeihag, .holhamoed,
.isruhag, .clockchange, .hanuka, .purim, .independence, .zom, .jerusalem, span.outOfMonthDate {
font-size: 14px;
}
input[type="text"], input[type="date"], input[type="email"], textarea, select, .checkBoxDropDownWithLabel, #formDiv .error:valid {
display: inline-block;
width: 15rem;
font-size: 1.1rem;
padding: 0.4rem;
background-color: white;
border: 1px solid #a8a8a8;
border-radius: 0.2rem;
margin-bottom: 0.2rem;
box-sizing: border-box;
vertical-align: middle;
}
#formDiv .error:invalid {
border-color: red;
}
#formDiv label .textError, #formDiv label .textError {
color: red;
display: inline-block;
padding-right: 3%;
}
#formDiv, .form, .defaultPupUp, .clientForm {
position: fixed;
background-color: #f3dddd;
padding: 2rem;
width: 30rem;
height: auto;
max-height: 30rem;
overflow-y: auto;
left: 50%;
top: 20%;
margin-left: -12rem;
padding: 2rem;
}
.popupPanel {
position: fixed;
background-color: white;
padding: 2rem;
font-size: 1.4rem;
font-weight: bold;
text-align: center;
color: #19398a;
width: 25rem;
height: auto;
left: 50%;
top: 40%;
margin-left: -8rem;
margin-top: -4rem;
}
.popupPanel input {
font-size: 1.4rem;
width: 4rem;
height: 2rem;
line-height: 2rem;
font-size: 1.4rem;
display: block;
margin: 1rem auto;
}
#formDiv label {
display: inline-block;
color: #c0866d;
}
/* Each label contains an inner (block-level) for
validation messages. Empty -> we still want zero height so it doesn't
collapse the label or force a line break inside it. */
#formDiv label .textError:empty { display: inline; }
/* The legacy .addButton selector has specificity (0,1,0) but the global
leopard.css `input[type="button"]` has (0,1,1) and wins → my + stayed a chunky
blue rect with 3rem bottom-margin. Bump specificity with `input.addButton`. */
input.addButton, .addButton {
font-size: 0;
background-image: url('/images/toolbar/add.png');
border: none;
background-size: cover;
vertical-align: middle;
width: 22px;
height: 22px;
padding: 12px;
background-color: initial;
cursor: pointer;
margin: 0 0.5rem;
border-radius: 0;
}
.downArea .details span:nth-of-type(odd) {
display: inline-block;
width: 90%;
}
/* ==========================================================================
Admin visual polish (2026-07-05). leopard.css sizes #contentWindow at 90%/90%
with 1% margin, so the turquoise body bg (#4dc4db) showed as a wide frame all
around the admin pages. Fill the viewport so there's no cyan border, and lay
the report filter toolbar (export icons + year/month) out as one tidy row
(it was cramped, the month dropdown was cut off).
========================================================================== */
body.adminScope #contentWindow {
width: 100%;
height: 100vh;
margin: 0;
}
.toolbar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.25rem 0.75rem;
padding: 0.5rem 1rem;
}
.toolbar label {
display: inline-flex;
align-items: center;
gap: 0.35rem;
white-space: nowrap;
}
.toolbar select {
width: 6rem;
padding: 0.3rem;
border: 1px solid #ccc !important;
border-radius: 3px;
color: #333;
}
.toolbar input[type=image], .toolbar img {
padding: 6px;
width: 22px;
}
/* AdminCalendar filter row (year/month/employee/status) — a horizontal toolbar
like the report screens, not a vertical stack. */
.adminCalendarToolbar {
/* was position:absolute + shrink width → the filters stacked in a narrow
top-right column. Make it a full-width static horizontal row. */
position: static !important;
width: auto !important;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 1.25rem;
padding: 0.5rem 1rem;
background-color: #f9f9f9;
border-bottom: 1px solid #e4e4e4;
}
.adminCalendarToolbar label {
display: inline-flex;
align-items: center;
gap: 0.35rem;
white-space: nowrap;
color: #19398a;
font-weight: bold;
}
/* #toolbar (id) beats the class selector for specificity, so size the selects here. */
#toolbar.adminCalendarToolbar select {
width: 10rem;
padding: 0.3rem;
margin: 0;
}
/* CPA (accountant Excel) report form — stack fields vertically; the comments
textarea and the download button were laid out inline, so the button ended
up floating beside/behind the textarea. */
#cpaReportForm > div,
#cpaReportForm > label,
#cpaReportForm #cpaDownload {
display: block;
}
#cpaReportForm label {
color: #19398a;
margin-top: 0.5rem;
}
#cpaReportForm textarea {
display: block;
width: 100%;
box-sizing: border-box;
height: 8rem;
margin-top: 0.25rem;
resize: vertical;
}
#cpaReportForm #cpaDownload {
float: none;
margin: 1rem auto 0;
}