/* ============================================================================
   EMS — ADMIN interface theme ("Olive & Sand", the design approved from
   admin-mockup.html). EVERY rule is scoped under body.adminScope — util.js sets
   that class ONLY on Admin / SysAdmin pages, so this file can NEVER touch the
   employee calendar or the login screen. Loaded after leopard.css + ems.css,
   so it's authoritative. leopard.css stays the structural base.

   Layout trick: the pages' DOM is captionBar-on-top + (menu + content) below,
   but the approved design wants the sidebar at the FULL height of the window
   with the caption bar only above the content. A grid on #contentWindow with
   #contentArea{display:contents} re-slots the three boxes without touching
   the 22 page HTML files. RTL: grid column 1 = the RIGHT edge.

   The "Assistant" @font-face is registered by the employee theme (global).
   ============================================================================ */

body.adminScope {
    /* palette (mockup tokens) */
    --bg: #F7F4EF;
    --surface: #FFFFFF;
    --surface-2: #FAF8F3;
    --hover: #F3EFE7;
    --border-2: #E8E1D6;
    --border-3: #DDD4C5;
    --border-4: #CFC5B3;
    --ink-9: #2D332A;
    --ink-7: #495244;
    --ink-6: #5D665A;
    --ink-5: #737C70;
    --olive-7: #4B5B44;
    --olive-6: #5F7355;
    --olive-5: #6E8460;
    --olive-0: #EEF1EB;
    --danger: #C5564A;
    --danger-0: #FCEBEA;
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-xl: 16px;
    --sh1: 0 1px 2px rgba(26, 29, 21, 0.06), 0 0 0 1px rgba(26, 29, 21, 0.02);
    --sh2: 0 10px 30px rgba(26, 29, 21, 0.12), 0 2px 8px rgba(26, 29, 21, 0.06);
    font-family: "Assistant", "Segoe UI", Arial, sans-serif;
    background: var(--bg);
    color: var(--ink-9);
}
body.adminScope input,
body.adminScope select,
body.adminScope textarea,
body.adminScope button {
    font-family: inherit;
}

/* ---------- shell: sidebar full height right, topbar over the content ------ */
body.adminScope #contentWindow {
    display: grid;
    grid-template-columns: 16.25rem 1fr; /* col 1 = right edge (RTL) = sidebar */
    grid-template-rows: auto 1fr;
    width: 100%;
    height: 100vh;
    margin: 0;
    background: var(--bg);
    font-size: 1rem;
}
body.adminScope #contentArea {
    display: contents; /* promote #menuDiv + #contentDiv to the grid */
}
body.adminScope #captionBar { grid-column: 2; grid-row: 1; }
body.adminScope #menuDiv    { grid-column: 1; grid-row: 1 / -1; }
body.adminScope #contentDiv { grid-column: 2; grid-row: 2; }

/* ---------- sidebar (light, logo on top) ---------- */
body.adminScope #menuDiv {
    display: flex;
    flex-direction: column;
    width: auto;
    height: auto;
    min-height: 0;
    overflow: auto;
    background: var(--surface);
    border-inline-end: 1px solid var(--border-2); /* the content-facing (left) edge — RTL */
    color: var(--ink-7);
    padding: 0.6rem 0.5rem 1rem;
    font-size: 1rem;
}
/* the One Plus One logo, top-right corner above the menu */
body.adminScope #menuDiv::before {
    content: "";
    display: block;
    flex: 0 0 auto;
    height: 3.4rem;
    margin: 0.8rem 0.75rem 1.4rem;
    background: url("/images/logo.png") center / contain no-repeat;
}
body.adminScope #menuDiv input[type="button"] {
    display: block;
    width: auto;
    text-align: right;
    background: transparent;
    color: var(--ink-7);
    border: 0;
    border-radius: var(--r-md);
    margin: 0.1rem 0;
    padding: 0.6rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: normal;
    word-wrap: break-word;
    cursor: pointer;
    height: auto;
    transition: background 0.12s, color 0.12s;
}
body.adminScope #menuDiv input[type="button"]:hover {
    background: var(--olive-0);
    color: var(--ink-9);
}
/* current page (class set by util.js after page load) */
body.adminScope #menuDiv input.activePage {
    background: var(--olive-0);
    color: var(--olive-7);
    box-shadow: inset -3px 0 0 var(--olive-6);
}
/* push יציאה to the bottom of the sidebar */
body.adminScope #menuDiv input#Logout {
    margin-top: auto;
    color: var(--ink-6);
    border-top: 1px solid var(--border-2);
    border-radius: 0;
    padding-top: 0.8rem;
}
body.adminScope #menuDiv input#Logout:hover {
    background: var(--danger-0);
    color: var(--danger);
}

/* ---------- topbar: title only (the logo lives in the sidebar) ---------- */
body.adminScope #captionBar {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: auto;
    padding: 0.65rem 1.5rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border-2);
    cursor: default;
}
body.adminScope #logoDiv { display: none; }
body.adminScope #otherCaptionDiv {
    flex: 1 1 auto;
    width: auto;
    height: auto;
    padding: 0;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink-9);
}
body.adminScope #captionBar input[type="button"] {
    background: var(--surface);
    color: var(--ink-7);
    border: 1px solid var(--border-3);
    border-radius: var(--r-md);
    margin: 0;
    padding: 0.5rem 0.9rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
body.adminScope #captionBar input[type="button"]:hover {
    background: var(--surface-2);
    border-color: var(--border-4);
}

/* ---------- main content: one centered column ---------- */
body.adminScope #contentDiv {
    width: auto;
    height: auto;
    min-height: 0;
    overflow: auto;
    background: var(--bg);
    padding: 1.5rem;
    font-size: 1rem;
}
body.adminScope #contentDiv > * {
    max-width: 72.5rem;
    margin-inline: auto;
}
body.adminScope #contentDiv select {
    width: 9rem;
    vertical-align: middle;
}

/* ---------- table card (TableMakerEx) ----------
   DOM inside .table: <svg #menuIcon> <input .addButton> <table> — restyled as
   a card whose head strip holds + (right) and the hamburger (far left). */
body.adminScope .table {
    width: auto; /* leopard: .table{width:90%; margin:2rem auto} */
    max-height: none;
    margin: 0 0 1.25rem;
}
body.adminScope #contentDiv > .table {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--r-xl);
    box-shadow: var(--sh1);
}
/* head strip only when the table actually has + / hamburger controls
   (some tables strip the + server-side but keep the hamburger) */
body.adminScope #contentDiv > .table:has(> .addButton),
body.adminScope #contentDiv > .table:has(> #menuIcon) {
    padding-top: 3.55rem;
}
body.adminScope #contentDiv > .table > .addButton {
    position: absolute;
    top: 0.65rem;
    inset-inline-start: 1rem;
}
body.adminScope #contentDiv > .table > #menuIcon {
    position: absolute;
    top: 0.65rem;
    inset-inline-end: 1rem;
}
/* table filter row (label-wrapped selects rendered between the head strip and
   the table) — leopard's generic label{width:8rem} is narrower than the 9rem
   select inside, so adjacent filters overlapped each other */
body.adminScope #contentDiv > .table > label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    width: auto;
    margin: 0 1rem 0.75rem;
    white-space: nowrap;
    color: var(--ink-5);
    font-weight: 600;
    font-size: 0.85rem;
}
body.adminScope #contentDiv > .table > label select {
    border: 1px solid var(--border-3);
    border-radius: var(--r-md);
    padding: 0.4rem 0.5rem;
    color: var(--ink-9);
}
body.adminScope .table table {
    width: 100%;
    margin: 0;
    background: var(--surface);
    border: 0;
    border-top: 1px solid var(--border-2);
    border-radius: 0 0 var(--r-xl) var(--r-xl);
    color: var(--ink-9);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}
body.adminScope .table thead { width: calc(100% - 1em); }
body.adminScope .table th {
    color: var(--ink-7);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    text-align: right;
    padding: 0.8rem 1rem;
    border: 0;
    border-bottom: 1px solid var(--border-3);
    background-color: var(--surface-2);
    background-position: left 0.6rem center;
}
body.adminScope .table tbody {
    max-height: 62vh;
    display: block;
    overflow: auto;
}
body.adminScope .table tr {
    padding: 0; /* leopard gives display:table rows 2rem padding */
    border-bottom: 1px solid var(--border-2);
    display: table;
    table-layout: fixed;
    width: 100%;
}
body.adminScope .table tbody tr:last-child { border-bottom: 0; }
body.adminScope .table td {
    border: 0;
    padding: 0.7rem 1rem;
    font-size: 0.9rem;
    color: var(--ink-9);
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}
body.adminScope .table tbody tr:hover {
    background: var(--hover);
    color: var(--ink-9);
}

/* pager */
body.adminScope .pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    color: var(--ink-6);
}
body.adminScope .pager span { cursor: pointer; padding: 0.15rem 0.4rem; border-radius: var(--r-sm); }
body.adminScope .pager span:hover { background: var(--olive-0); color: var(--olive-7); }
body.adminScope .pager input {
    width: 2.2rem;
    text-align: center;
    border: 1px solid var(--border-3);
    border-radius: var(--r-sm);
    padding: 0.1rem;
}

/* summary lines (report footers) */
body.adminScope .summaryLine {
    font-weight: 700;
    margin-top: 0.8rem;
    color: var(--ink-9);
}
body.adminScope .withSummary table:first-of-type tbody { max-height: 46vh; }
body.adminScope .withSummary table:last-of-type tbody { max-height: 20vh; }
body.adminScope .withSummary table:last-of-type th,
body.adminScope .withSummary table:last-of-type td { font-weight: 700; }

/* ---------- + (new record) button — primary olive ----------
   the #contentDiv/#formDiv selectors give this single block enough weight to
   beat leopard's '#formDiv fieldset input[type=button]' (the generic ghost
   button rules below exclude .addButton with :not()) */
body.adminScope input.addButton,
body.adminScope #contentDiv input.addButton,
body.adminScope #formDiv input.addButton {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    margin: 0 0 0.6rem;
    background: var(--olive-6);
    background-image: none;
    border: 1px solid var(--olive-6);
    border-radius: var(--r-md);
    color: #fff;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
body.adminScope input.addButton:hover,
body.adminScope #contentDiv input.addButton:hover,
body.adminScope #formDiv input.addButton:hover {
    background: var(--olive-7);
    border-color: var(--olive-7);
}

/* ---------- hamburger (table actions) + its dropdown ---------- */
body.adminScope #menuIcon {
    box-sizing: content-box;
    height: 1.15rem;
    width: 1.15rem;
    padding: 0.5rem;
    fill: var(--ink-6);
    background: var(--surface);
    border: 1px solid var(--border-3);
    border-radius: var(--r-md);
    cursor: pointer;
    vertical-align: middle;
    transition: background 0.15s, border-color 0.15s, fill 0.15s;
}
body.adminScope #menuIcon:hover {
    background: var(--surface-2);
    border-color: var(--olive-5);
    fill: var(--olive-7);
}
/* the dropdown toggleToolbar() appends into the .table card — skin it
   everywhere (top-level cards AND sub-tables inside #formDiv) */
body.adminScope .table #toolbar {
    width: auto;
    min-width: 11rem;
    z-index: 20;
    background: var(--surface);
    border: 1px solid var(--border-3);
    border-radius: var(--r-md);
    box-shadow: var(--sh2);
    padding: 0.35rem;
}
/* only on top-level cards pin it below the head-strip hamburger; sub-tables
   keep leopard's default offset next to their inline hamburger */
body.adminScope #contentDiv > .table > #toolbar {
    top: 3.1rem;
    left: 1rem;  /* below the hamburger (RTL: far edge). Physical value on purpose */
    right: auto;
}
body.adminScope .table #toolbar div {
    height: auto;
    line-height: 1.3;
    padding: 0.55rem 0.7rem;
    color: var(--ink-7);
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
body.adminScope .table #toolbar div:hover {
    background: var(--olive-0);
    color: var(--ink-9);
}

/* ---------- report / filter toolbar ---------- */
body.adminScope .toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding: 0.7rem 1rem;
    margin-bottom: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--r-lg);
    box-shadow: var(--sh1);
}
body.adminScope .toolbar label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    width: auto;
    white-space: nowrap;
    color: var(--ink-5);
    font-weight: 600;
    font-size: 0.85rem;
}
body.adminScope .toolbar select,
body.adminScope .adminCalendarToolbar select,
body.adminScope .toolbar input[type="text"] {
    width: auto;
    min-width: 5rem;
    padding: 0.45rem 0.6rem;
    font-size: 0.9rem;
    color: var(--ink-9);
    background: var(--surface);
    border: 1px solid var(--border-3) !important;
    border-radius: var(--r-md);
    margin: 0;
}
body.adminScope .toolbar input[type="image"],
body.adminScope .toolbar img {
    width: 24px;
    height: auto;
    padding: 6px;
    border: 1px solid var(--border-3);
    border-radius: var(--r-md);
    background: var(--surface);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
body.adminScope .toolbar input[type="image"]:hover,
body.adminScope .toolbar img:hover {
    background: var(--surface-2);
    border-color: var(--olive-5);
}

/* AdminCalendar toolbar (year/month/employee/status) inherits the same look
   (its id is calendarToolbar — NOT leopard's dropdown id "toolbar") */
body.adminScope .adminCalendarToolbar {
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--r-lg);
    box-shadow: var(--sh1);
    padding: 0.7rem 1rem;
    margin-bottom: 1.25rem;
}
body.adminScope .adminCalendarToolbar label {
    width: auto; /* leopard's generic label{width:8rem} is narrower than the 10rem select inside */
    color: var(--ink-5);
    font-weight: 600;
}

/* ---------- forms (#formDiv) — themed modal, kept centered (leopard) ------- */
body.adminScope #formDiv,
body.adminScope .form,
body.adminScope .clientForm {
    background: var(--surface) !important;
    border: 1px solid var(--border-2);
    border-radius: var(--r-xl);
    box-shadow: var(--sh2);
    padding: 1.75rem;
    color: var(--ink-9);
}
/* modal height: auto to fit the content (legacy 30rem cap let the buttons
   spill past the card). Viewport cap + inner scroll as the safety net.
   .projectForm keeps its own leopard vh-based sizing (sub-table grids). */
body.adminScope #formDiv:not(.projectForm) {
    height: auto;
    max-height: 88vh;
    overflow-y: auto;
}
/* the projects multi-select popup — the form is now a scroll container
   (overflow-y above), which would CLIP an absolute child; position:fixed
   keeps the same static-position placement but escapes the clipping.
   Skin it like the other dropdown menus while we're here. */
body.adminScope #formDiv .checkBoxDropDownPopup {
    position: fixed;
    margin-top: 1.1rem; /* clear the field box — the static position starts inside it */
    width: 20rem;
    height: auto;
    max-height: 18rem;
    overflow: auto;
    background: var(--surface);
    border: 1px solid var(--border-3);
    border-radius: var(--r-md);
    box-shadow: var(--sh2);
    padding: 0.5rem;
}
body.adminScope #formDiv .checkBoxDropDownPopup br { display: none; }
body.adminScope #formDiv .checkBoxDropDownPopup label {
    display: block;
    width: auto;
    margin: 0;
    padding: 0.3rem 0.5rem;
    border-radius: var(--r-sm);
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--ink-9);
    cursor: pointer;
}
body.adminScope #formDiv .checkBoxDropDownPopup label:hover {
    background: var(--olive-0);
}
body.adminScope #formDiv .checkBoxDropDownPopup input[type="checkbox"] {
    accent-color: var(--olive-6);
    margin: 0 0 0 0.5rem;
    vertical-align: middle;
}
body.adminScope #formDiv .checkBoxDropDownPopup input[type="button"]:not(.addButton) {
    width: calc(50% - 0.2rem);
    height: auto;
    margin: 0 0 0.45rem;
    padding: 0.35rem 0;
    font-size: 0.85rem;
}
/* in-page (non-modal) forms — e.g. the CPA report — flow inside the content
   column; ems.css positions every .clientForm as a fixed modal */
body.adminScope #contentDiv .clientForm {
    position: static;
    width: auto;
    max-width: 30rem;
    max-height: none;
    margin: 0 auto;
}
body.adminScope #formDiv label {
    color: var(--ink-5);
    font-weight: 600;
}
body.adminScope #formDiv input[type="text"],
body.adminScope #formDiv input[type="password"],
body.adminScope #formDiv input[type="date"],
body.adminScope #formDiv input[type="email"],
body.adminScope #formDiv input[type="number"],
body.adminScope #formDiv textarea,
body.adminScope #formDiv select,
body.adminScope #formDiv .checkBoxDropDownWithLabel {
    font-size: 0.95rem;
    padding: 0.55rem 0.65rem;
    color: var(--ink-9);
    background: var(--surface);
    border: 1px solid var(--border-3);
    border-radius: var(--r-md);
    transition: border-color 0.15s, box-shadow 0.15s;
}
body.adminScope #formDiv input:focus,
body.adminScope #formDiv textarea:focus,
body.adminScope #formDiv select:focus,
body.adminScope .toolbar select:focus,
body.adminScope .toolbar input:focus {
    outline: none;
    border-color: var(--olive-5) !important;
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--olive-5) 25%, transparent);
}

/* buttons: content-area default = ghost; form save = olive, delete = danger */
body.adminScope #contentDiv input[type="button"]:not(.addButton),
body.adminScope #formDiv input[type="button"]:not(.addButton) {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--ink-7);
    background: var(--surface);
    border: 1px solid var(--border-3);
    border-radius: var(--r-md);
    padding: 0.55rem 1.1rem;
    margin: 0.35rem 0.25rem 0;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
body.adminScope #contentDiv input[type="button"]:not(.addButton):hover,
body.adminScope #formDiv input[type="button"]:not(.addButton):hover {
    background: var(--surface-2);
    border-color: var(--border-4);
}
body.adminScope #formDiv input[type="button"][value="שמירה"] {
    background: var(--olive-6);
    color: #fff;
    border-color: var(--olive-6);
}
body.adminScope #formDiv input[type="button"][value="שמירה"]:hover {
    background: var(--olive-7);
    border-color: var(--olive-7);
}
body.adminScope #formDiv input[type="button"][value="מחיקה"] {
    background: transparent;
    color: var(--danger);
    border-color: color-mix(in oklab, var(--danger) 40%, var(--border-3));
}
body.adminScope #formDiv input[type="button"][value="מחיקה"]:hover {
    background: var(--danger-0);
}

/* overlay behind admin modals */
body.adminScope .overlay {
    background: rgba(17, 24, 39, 0.5);
    opacity: 1;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* DbConsole textarea + result */
body.adminScope #contentDiv textarea {
    font-family: "Consolas", "Menlo", monospace;
    border: 1px solid var(--border-3);
    border-radius: var(--r-md);
    padding: 0.6rem;
}

/* print: collapse the grid and re-assert leopard's print hiding/expansion at
   this file's specificity — the always-on display:flex/62vh rules above would
   otherwise defeat leopard's element-level @media print block */
@media print {
    body.adminScope #contentWindow { display: block; height: auto; }
    body.adminScope #menuDiv,
    body.adminScope #captionBar { display: none; }
    body.adminScope #contentDiv { overflow: visible; height: auto; }
    body.adminScope .table thead { width: 100%; }
    body.adminScope .table tbody {
        max-height: none;
        display: table-row-group;
        overflow: visible;
    }
    body.adminScope .table tr { display: table-row; }
}

@media (max-width: 820px) {
    body.adminScope #contentWindow { grid-template-columns: 12rem 1fr; }
    body.adminScope #contentDiv { padding: 1rem; }
    body.adminScope #otherCaptionDiv { font-size: 1.1rem; }
}