/* ===================================================================== * Staff Management page · mpwpb_staff_member.css * Visual redesign of the classic Staff Management admin page (Admin/ * MPWPB_Staff_Members.php) to match the modern card-based design * language used elsewhere in the plugin. Pure CSS + a small amount of JS * (mpwpb-staff-management-modern.js) layered over the existing markup — * the tab switch, schedule AJAX cascade, staff CRUD, repeaters, collapse * panels and profile image upload (all in mpwpb_admin.js / the shared * mp_global JS) are completely unchanged. Everything here is scoped * under .mpwpb_staff_page since mpwpb_plugin_global.css's generic * .mpPanel/._mpBtn/.formControl/.tabsContent rules are shared globally * across every wp-admin screen in this plugin. * ===================================================================== */ .mpwpb_staff_page{ --brand:#134e4a; --brand-600:#0d3b38; --brand-soft:#e6f2f1; --brand-ring:rgba(19,78,74,.16); --ink:#0f172a; --ink-2:#475569; --muted:#94a3b8; --line:#e4e9f0; --surface:#fff; --inset:#f8fafc; --band-line:#eef1f6; background:#eef1f6;font-family:'Inter',system-ui,-apple-system,sans-serif; } .mpwpb_staff_page *, .mpwpb_staff_page *::before, .mpwpb_staff_page *::after{box-sizing:border-box;} .mpwpb_staff_page ._dLayout_dShadow_1{background:transparent;box-shadow:none;padding:0;border:0;} .mpwpb_staff_page .mpwpb_staff_tabs{background:transparent;} /* -------------------------------------------------------------------- * * Header * -------------------------------------------------------------------- */ .mpwpb_staff_page .header{ background:var(--surface);padding:18px 26px;border:1px solid var(--line);border-bottom:0; border-radius:14px 14px 0 0;display:flex;align-items:center;justify-content:space-between;gap:16px; } .mpwpb_staff_page .mpwpb_staff_header_text{min-width:0;} .mpwpb_staff_page .header h1{font-size:20px;font-weight:700;color:var(--ink);margin:0;} .mpwpb_staff_page .mpwpb_staff_header_sub{margin:4px 0 0;font-size:12.5px;color:var(--muted);} .mpwpb_staff_page .mpwpb_add_update_tab{flex:0 0 auto;display:flex;gap:8px;} .mpwpb_staff_page .mpwpb_add_update_tab ._mpBtn.mpwpb_staff_tab_switch{ display:inline-flex;align-items:center;gap:7px; padding:9px 16px;border-radius:9px;border:1px solid var(--line);background:#fff;color:var(--ink-2); font-size:13px;font-weight:600;cursor:pointer;transition:.15s; } .mpwpb_staff_page .mpwpb_add_update_tab ._mpBtn.mpwpb_staff_tab_switch:hover{background:var(--inset);} /* "Staff Lists" toggle: subtle active indicator only — it's a view switch, not a CTA. */ .mpwpb_staff_page .mpwpb_add_update_tab ._mpBtn.mpwpb_staff_tab_switch.mpwpb_staff_tab_active:not(.mpwpb_add_new_staff){ background:var(--brand-soft);border-color:var(--brand);color:var(--brand); } /* "Add/Update Staff" always reads as the primary action button, regardless of which tab is open. */ .mpwpb_staff_page .mpwpb_add_update_tab ._mpBtn.mpwpb_add_new_staff{ background:var(--brand);border-color:var(--brand);color:#fff; } .mpwpb_staff_page .mpwpb_add_update_tab ._mpBtn.mpwpb_add_new_staff:hover{background:var(--brand-600);border-color:var(--brand-600);} .mpwpb_staff_page .mpwpb_add_update_tab i{margin-right:0;} /* -------------------------------------------------------------------- * * Body wrapper — the classic .tabsContent already holds both tab panes. * -------------------------------------------------------------------- */ .mpwpb_staff_page .tabsContent{ background:var(--surface);border:1px solid var(--line);border-top:0;border-radius:0 0 14px 14px;padding:22px 26px; } /* Staff list table. The two-class selectors here (.mpwpb_staff_page .mpwpb_staff_list) already out-specificity mpwpb_plugin_global.css's shared `.mpwpb_style table th/td` rules (which force a full border + bold thead), so plain declarations below are enough to win — no !important/doubled-class trick needed, unlike the flatter single-class selectors on the Service List page. */ .mpwpb_staff_page .mpwpb_staff_list h3{font-size:14px;color:var(--muted);font-weight:600;} .mpwpb_staff_page .mpwpb_staff_list table{width:100%;border-collapse:collapse;} .mpwpb_staff_page .mpwpb_staff_list th{ font-size:11.5px;font-weight:normal;text-transform:uppercase;letter-spacing:.03em;color:var(--muted); padding:12px 8px;text-align:left;border:none;border-bottom:1px solid var(--band-line);background:var(--inset); } .mpwpb_staff_page .mpwpb_staff_list td{ padding:12px 8px;font-size:13px;color:var(--ink-2);border:none;border-bottom:1px solid var(--band-line);vertical-align:middle; } .mpwpb_staff_page .mpwpb_staff_list tbody tr:last-child td{border-bottom:none;} .mpwpb_staff_page .mpwpb_staff_name_cell{font-weight:600;color:var(--ink);} .mpwpb_staff_page .mpwpb_staff_email_cell{color:#b45309;} /* -------------------------------------------------------------------- * * Two-column layout * -------------------------------------------------------------------- */ .mpwpb_staff_page .mpRow{gap:22px;align-items:flex-start;} .mpwpb_staff_page .col_5, .mpwpb_staff_page .col_7{width:auto;} .mpwpb_staff_page .col_5{flex:0 0 340px;} .mpwpb_staff_page .col_7{flex:1 1 0;min-width:0;} .mpwpb_staff_page .col_5._infoLayout_xs{ background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;margin:0; } .mpwpb_staff_page .col_7._borL_pL{border-left:0;padding-left:0;} .mpwpb_staff_page .col_5 h4, .mpwpb_staff_page .col_7 h4{font-size:14.5px;font-weight:700;color:var(--ink);margin:0;} .mpwpb_staff_page .mpwpb_staff_form_sub{margin:4px 0 0;font-size:12.5px;color:var(--muted);} .mpwpb_staff_page .col_5 .divider{margin:14px 0 20px;} /* -------------------------------------------------------------------- * * Staff Information fields * -------------------------------------------------------------------- */ .mpwpb_staff_page label.mpwpb_user_info, .mpwpb_staff_page label:not(.mpwpb_user_info):not(.customCheckboxLabel){margin-bottom:16px !important;font-weight:400;} /* mpwpb_plugin_global.css's shared `.mpwpb_style label{display:flex;align-items:center}` (a compact inline label+field pattern used elsewhere in this plugin) needs overriding here so Staff Information's labels stack label-above-field as designed. The holiday toggle row is deliberately excluded — it keeps its own flex row (text left / checkbox right). */ .mpwpb_staff_page .col_5 > label:not(.mpwpb_holiday_toggle_row), .mpwpb_staff_page .col_5 label.mpwpb_user_info{ display:block; } .mpwpb_staff_page label span._w_200, .mpwpb_staff_page label > span:first-child{ display:block;margin-bottom:6px;font-size:12.5px;font-weight:600;color:var(--ink-2);width:auto !important; } /* Doubled class: mpwpb_plugin_global.css's `div.mpwpb_style .formControl` (0,2,1) and `div.mpwpb_style select.formControl` (0,2,2) both beat a plain single-doubled .mpwpb_staff_page .formControl (0,2,0) rule regardless of load order, since classes are compared before element count. Tripling the class here (0,3,0) reliably wins. */ .mpwpb_staff_page .formControl.formControl{ width:100%;padding:10px 15px;font-size:13.5px;border:1px solid var(--line);border-radius:10px; background:#fff;color:var(--ink);box-shadow:none;transition:.15s; } .mpwpb_staff_page .formControl.formControl:focus{ border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring);outline:none; } .mpwpb_staff_page .mpwpb_input_height{min-height:0 !important;} /* Username/Password/Email — leading icon sits inside the field itself. */ .mpwpb_staff_page .mpwpb_input_icon_wrap{position:relative;} .mpwpb_staff_page .mpwpb_input_icon_wrap .mpwpb_input_icon{ position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:12.5px;pointer-events:none; } .mpwpb_staff_page .mpwpb_input_icon_wrap .formControl{padding-left:38px;} /* First Name / Last Name side by side */ .mpwpb_staff_page .mpwpb_name_row{display:flex;gap:14px;} .mpwpb_staff_page .mpwpb_name_row label.mpwpb_user_info{flex:1 1 0;min-width:0;} /* Modify Holiday Permissions — bordered row, label left / checkbox right */ .mpwpb_staff_page .mpwpb_holiday_toggle_row{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:12px 14px;border:1px solid var(--line);border-radius:10px;margin-bottom:0 !important; } .mpwpb_staff_page .mpwpb_holiday_toggle_row span{font-size:13px;font-weight:600;color:var(--brand);} .mpwpb_staff_page .mpwpb_holiday_toggle_row input[type="checkbox"]{width:16px;height:16px;accent-color:var(--brand);margin:0;flex:0 0 auto;} /* Profile image upload */ .mpwpb_staff_page .profile-section{background:transparent;border:0;padding:0;margin:0 0 20px;} .mpwpb_staff_page .upload-area{ display:flex;flex-direction:column;align-items:center;background:transparent;padding:0;border:0;cursor:default; } .mpwpb_staff_page .mpwpb_profile_image_circle{ width:120px;height:120px;border-radius:50%;border:1.5px dashed var(--line);background:var(--inset); display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:16px; } /* mpwpb_plugin_global.css's shared `.mpwpb_style img:not(.mp_wp_editor img){width:100%;height:auto}` has specificity (0,2,2) and beats a plain `.circle img` (0,2,1) selector, forcing height:auto — which collapses the photo to its natural ratio and, with border-radius:50%, renders it as a wide oval inside the round frame instead of a cover-cropped circle. Doubling the container class (0,3,1) reliably wins, the same idiom already used for .formControl above. */ .mpwpb_staff_page .mpwpb_profile_image_circle.mpwpb_profile_image_circle img{width:100%;height:100%;max-width:100%;object-fit:cover;border-radius:50%;display:block;} .mpwpb_staff_page .upload-buttons{display:flex;gap:10px;} .mpwpb_staff_page .btn{ padding:9px 18px;border:1px solid var(--line);border-radius:999px;font-size:12.5px;font-weight:600;background:#fff;color:var(--ink-2);cursor:pointer; } .mpwpb_staff_page .btn.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff;} .mpwpb_staff_page .btn.btn-primary:hover{filter:brightness(1.08);} .mpwpb_staff_page .btn.btn-secondary{background:var(--brand-soft);border-color:transparent;color:var(--brand);} .mpwpb_staff_page .btn.btn-secondary:hover{background:#fee2e2;color:#dc2626;} /* -------------------------------------------------------------------- * * Form footer — Cancel / Save Profile * -------------------------------------------------------------------- */ .mpwpb_staff_page .mpwpb_staff_form_actions{border-top:1px solid var(--line);padding-top:20px;} .mpwpb_staff_page .mpwpb_staff_form_actions_buttons{display:flex;gap:10px;} .mpwpb_staff_page .mpwpb_staff_cancel_btn{ padding:11px 22px;border-radius:10px;border:0;background:var(--brand-soft);color:var(--brand); font-size:13.5px;font-weight:700;cursor:pointer;transition:.15s; } .mpwpb_staff_page .mpwpb_staff_cancel_btn:hover{filter:brightness(0.97);} /* -------------------------------------------------------------------- * * Panels (General Settings / Time Schedule Settings / Off Days & Dates) * -------------------------------------------------------------------- */ .mpwpb_staff_page .mpPanel{ background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:16px !important; } .mpwpb_staff_page .mpPanel:first-child{margin-top:0 !important;} .mpwpb_staff_page .mpPanelHeader{ background:linear-gradient(180deg,#fbfcfe,var(--inset)) !important;padding:14px 18px !important; display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer; border-radius:0 !important;border-bottom:1px solid var(--band-line); } .mpwpb_staff_page .mpPanelHeader h6{ color:var(--ink) !important;font-size:13.5px;font-weight:700;margin:0;display:flex;align-items:center;gap:8px; } .mpwpb_staff_page .mpPanelHeader h6 span[data-icon]{ width:20px;height:20px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center; border-radius:6px;background:var(--brand-soft);color:var(--brand);font-size:10px;margin-right:0 !important;transition:transform .15s; } .mpwpb_staff_page .mpPanelHeader h6 span[data-icon].fa-minus{transform:rotate(180deg);} .mpwpb_staff_page .mpPanelBody{ background:var(--surface) !important;padding:18px !important;border-radius:0 !important; } .mpwpb_staff_format_badge{ flex:0 0 auto;font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px; background:var(--inset);color:var(--muted);border:1px solid var(--line); } .mpwpb_staff_format_badge.is-on{background:var(--brand-soft);color:var(--brand);border-color:transparent;} /* Schedule Type pills — visual front-end for the real (hidden) mpwpb_date_type select. */ .mpwpb_staff_page .mpwpb_visually_hidden{ position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important; overflow:hidden !important;clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important; } .mpwpb_staff_page .mpPanelBody > span._w_200{ display:block;margin-bottom:8px;font-size:12.5px;font-weight:600;color:var(--ink-2); } .mpwpb_staff_page .mpwpb_schedule_type_pills{display:flex;gap:8px;margin-top:8px;margin-bottom:16px;} .mpwpb_staff_page .mpwpb_schedule_type_pill{ padding:9px 16px;border-radius:9px;border:1px solid var(--line);background:#fff;color:var(--ink-2); font-size:13px;font-weight:600;cursor:pointer;transition:.15s; } .mpwpb_staff_page .mpwpb_schedule_type_pill:hover{background:var(--inset);} .mpwpb_staff_page .mpwpb_schedule_type_pill.mpActive{background:var(--brand-soft);border-color:var(--brand);color:var(--brand);} /* Time Schedule Settings header actions (Copy Monday to All + format badge) */ .mpwpb_staff_page .mpwpb_staff_schedule_header_actions{display:flex;align-items:center;gap:10px;} .mpwpb_staff_page .mpwpb_copy_monday_btn{ display:inline-flex;align-items:center;padding:6px 12px;border-radius:8px;border:1px solid var(--line); background:#fff;color:var(--brand);font-size:12px;font-weight:600;cursor:pointer;transition:.15s; } .mpwpb_staff_page .mpwpb_copy_monday_btn:hover{background:var(--brand-soft);} /* Weekly Availability status badge */ .mpwpb_staff_page .mpwpb_staff_status_badge{ display:inline-block;padding:3px 10px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.03em; } .mpwpb_staff_page .mpwpb_staff_status_badge.is-active{background:#dcfce7;color:#15803d;} .mpwpb_staff_page .mpwpb_staff_status_badge.is-off{background:var(--inset);color:var(--muted);} /* Off Days & Exception Dates — two cards side by side */ .mpwpb_staff_page .mpwpb_off_day_cards{display:flex;gap:16px;align-items:flex-start;} .mpwpb_staff_page .mpwpb_off_day_card{ flex:1 1 0;min-width:0;background:var(--inset);border:1px solid var(--band-line);border-radius:10px;padding:14px;margin:0 !important; } @media(max-width:700px){ .mpwpb_staff_page .mpwpb_off_day_cards{flex-direction:column;} } /* Date Type / Particular Dates fields inside General Settings */ .mpwpb_staff_page .mpPanelBody > label{display:block;margin-bottom:16px;} .mpwpb_staff_page .mpPanelBody > label:last-child{margin-bottom:0;} .mpwpb_staff_page .mpPanelBody ._dFlex{display:block;} .mpwpb_staff_page .mpPanelBody ._fs_label_w_200{ display:block;margin-bottom:8px;font-size:12.5px;font-weight:600;color:var(--ink-2);width:auto !important; } /* -------------------------------------------------------------------- * * Off-day pills — reuses .groupCheckBox/.customCheckboxLabel so the * shared click handler (mpwpb_plugin_global.js) keeps recomputing the * mpwpb_off_days hidden field; only the visual is overridden here. * -------------------------------------------------------------------- */ .mpwpb_staff_page .groupCheckBox{display:flex;flex-wrap:wrap;gap:8px;} .mpwpb_staff_page .customCheckboxLabel._w_200.customCheckboxLabel{width:auto !important;padding:0 !important;margin:0 !important;} .mpwpb_staff_page .customCheckboxLabel._w_200 .customCheckbox{ padding:8px 14px !important;min-width:44px;display:inline-flex;align-items:center;justify-content:center; border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--ink-2); font-size:12.5px;font-weight:700;text-transform:capitalize;white-space:nowrap !important;transition:.15s; } .mpwpb_staff_page .customCheckboxLabel._w_200 .customCheckbox::before, .mpwpb_staff_page .customCheckboxLabel._w_200 .customCheckbox::after{display:none !important;} .mpwpb_staff_page .customCheckboxLabel._w_200 input:checked ~ .customCheckbox{ background:var(--brand);border-color:var(--brand);color:#fff; } /* -------------------------------------------------------------------- * * Date-card repeaters — Particular Dates / Off Dates, reusing the * classic .mp_remove_area row (untouched markup/JS), wrapped visually. * -------------------------------------------------------------------- */ .mpwpb_staff_page .mp_settings_area{width:100% !important;} .mpwpb_staff_page .mp_item_insert{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-bottom:10px;} .mpwpb_staff_page .mp_remove_area{ background:var(--inset);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:0 !important; } .mpwpb_staff_page .mp_remove_area .justifyBetween{display:flex;align-items:center;gap:8px;justify-content:space-between;} .mpwpb_staff_page .mp_remove_area label{margin:0 !important;flex:1 1 auto;min-width:0;} .mpwpb_staff_page .mp_remove_area .formControl.date_type{ border:0 !important;background:transparent !important;padding:0 !important;font-weight:600;color:var(--ink); cursor:pointer;box-shadow:none !important;width:100% !important;font-size:12.5px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .mpwpb_staff_page .buttonGroup.max_100{display:flex;gap:4px;max-width:none !important;width:auto !important;flex:0 0 auto;} .mpwpb_staff_page ._themeButton_xs{ width:24px;height:24px;min-width:24px;flex:0 0 auto;padding:0 !important;display:inline-flex;align-items:center;justify-content:center; border-radius:6px;background:#fff;border:1px solid var(--line);color:var(--muted); } .mpwpb_staff_page ._themeButton_xs .fas{font-size:10px;color:var(--muted) !important;} .mpwpb_staff_page ._themeButton_xs.mpwpb_item_remove:hover{background:#fee2e2;border-color:#fecaca;color:#dc2626;} .mpwpb_staff_page ._themeButton_xs.mpwpb_item_remove:hover .fas{color:#dc2626 !important;} .mpwpb_staff_page ._themeButton_xs.mpwpb_sortable_button{cursor:grab;} .mpwpb_staff_page button._themeButton_xs_mT_xs.mp_add_item{ display:inline-flex;align-items:center;gap:6px;margin-top:0; padding:8px 15px;border-radius:10px;border:0;background:var(--brand);color:#fff; font-size:12.5px;font-weight:600;cursor:pointer;transition:.15s;text-transform:none; } .mpwpb_staff_page button._themeButton_xs_mT_xs.mp_add_item:hover{filter:brightness(1.08);} /* -------------------------------------------------------------------- * * Time Schedule table * -------------------------------------------------------------------- */ .mpwpb_staff_page .mpPanelBody table{width:100%;border-collapse:collapse;font-size:13px;} .mpwpb_staff_page .mpPanelBody table th{ text-align:center !important;padding:0 8px 10px;font-size:11px;font-weight:700;color:var(--muted); text-transform:uppercase;letter-spacing:.03em;background:transparent !important;white-space:nowrap; } .mpwpb_staff_page .mpPanelBody table th:first-child{text-align:left !important;} .mpwpb_staff_page .mpPanelBody table td, .mpwpb_staff_page .mpPanelBody table th{border-bottom:1px solid var(--band-line) !important;} .mpwpb_staff_page .mpPanelBody table td{padding:8px;vertical-align:middle;} .mpwpb_staff_page .mpPanelBody table tbody tr:last-child td{border-bottom:0 !important;} .mpwpb_staff_page .mpPanelBody table th[style]{background-color:transparent !important;} .mpwpb_staff_page .mpPanelBody table td[style]{background-color:var(--inset) !important;} .mpwpb_staff_page .mpPanelBody table tbody th{text-transform:capitalize;font-weight:600;color:var(--ink-2);white-space:nowrap;} .mpwpb_staff_page .mpPanelBody table tbody tr:first-child th{color:var(--brand);font-weight:700;} .mpwpb_staff_page .mpPanelBody table td.textCenter{color:var(--muted);font-weight:600;font-size:11.5px;} .mpwpb_staff_page .mpPanelBody table select.formControl{min-width:110px;} /* Off-day rows ("mpwpb-staff-row-off", set server-side in time_slot_tr() and kept in sync live by mpwpb-staff-management-modern.js) — same "Closed" treatment as the service Date & Time schedule table: the real