/* ─── hilucy-dashboard.css ─────────────────────────────────────────────── */
.category-chip{display:inline-block;padding:0 .35em;border-radius:.5em;background:#f2f4f7;font-weight:700;font-size: 16px}
:root{
--hl-primary:#03A9F0;
--hl-primary-600:#0873a0;
--hl-text:#1f2937;
}
/* cell container */
th.hl-new-col{
position:relative;
overflow:hidden; /* hide shimmer edges */
}
/* subtle bottom accent while celebrating
th.hl-new-col.celebrate::before{
content:"";
position:absolute; left:0; right:0; bottom:0;
height:2px;
background:linear-gradient(90deg, transparent, var(--hl-primary), transparent);
} */
/* moving shimmer sweep */
th.hl-new-col.celebrate::after{
content:"";
position:absolute; inset:-20% -40%; /* extend outside to avoid clipping */
background:linear-gradient(
120deg,
transparent 30%,
rgba(3,169,240,.18) 45%,
rgba(3,169,240,.35) 50%,
rgba(3,169,240,.18) 55%,
transparent 70%
);
transform:translateX(-120%) skewX(-15deg);
animation:hlShimmer 3s ease-out infinite;
pointer-events:none;
}
/* header text + badge wrapper */
th .hl-th{ display:inline-flex; align-items:center; gap:8px; position:relative; z-index:1; }
/* NEW badge */
th .hl-badge{
font:700 10px/1 system-ui,Segoe UI,Roboto,sans-serif;
padding:2px 6px; border-radius:999px;
background:linear-gradient(90deg, var(--hl-primary), var(--hl-primary-600));
color:#fff; letter-spacing:.4px;
text-transform:uppercase;
animation:hlPulse 1.6s ease-in-out 3; /* pulse a few times */
}
/* animations */
@keyframes hlShimmer{
from{ transform:translateX(-130%) skewX(-15deg); }
to { transform:translateX(130%) skewX(-15deg); }
}
@keyframes hlPulse{
0%,100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(3,169,240,0); }
50% { transform:scale(1.06); box-shadow:0 0 0 6px rgba(3,169,240,.18); }
}
/* respect user motion preferences */
@media (prefers-reduced-motion: reduce){
th.hl-new-col.celebrate::after,
th .hl-badge{ animation:none; }
}
/* ──────────────────────────────────────────────────────────────
CONTACT + EDIT CONTACT (Option A: grouped selectors)
────────────────────────────────────────────────────────────── */
#contact-modal.hl-modal,
#edit-contact-modal.hl-modal,
#staff-modal.hl-modal{
position:fixed; inset:0; display:none;
align-items:center; justify-content:center;
background:var(--hl-backdrop); z-index:9999; padding:20px;
}
#contact-modal.active,
#edit-contact-modal.active,
#staff-modal.active{ display:flex !important; }
#contact-modal .hl-modal__panel,
#edit-contact-modal .hl-modal__panel,
#staff-modal .hl-modal__panel{
width:min(620px,94vw);
background:var(--hl-bg); color:var(--hl-text);
border-radius:var(--hl-radius);
box-shadow:0 10px 30px rgba(0,0,0,.12),0 2px 10px rgba(0,0,0,.06);
padding:22px; position:relative;
transform:translateY(6px); opacity:0;
transition:transform .18s ease,opacity .18s ease;
}
#contact-modal.active .hl-modal__panel,
#edit-contact-modal.active .hl-modal__panel,
#staff-modal.active .hl-modal__panel{ transform:none; opacity:1; }
#contact-modal .hl-modal__close,
#edit-contact-modal .hl-modal__close,
#staff-modal .hl-modal__close{
position:absolute; top:10px; right:12px;
border:0; background:transparent; cursor:pointer;
font-size:22px; color:var(--hl-muted);
}
#contact-modal .hl-modal__close:hover,
#edit-contact-modal .hl-modal__close:hover,
#staff-modal .hl-modal__close:hover{ color:var(--hl-text); }
#contact-modal .hl-modal__backdrop,
#edit-contact-modal .hl-modal__backdrop,
#staff-modal .hl-modal__backdrop{ position:absolute; inset:0; }
#contact-modal .hl-modal__header,
#edit-contact-modal .hl-modal__header,
#staff-modal .hl-modal__header{
display:flex; gap:10px; align-items:center; margin-bottom:6px;
}
#contact-modal .hl-modal__icon,
#edit-contact-modal .hl-modal__icon,
#staff-modal .hl-modal__icon{ color:var(--hl-primary); display:grid; place-items:center; }
#contact-modal .hl-modal__title,
#edit-contact-modal .hl-modal__title,
#staff-modal .hl-modal__title{ margin:0; font:600 18px/1.2 system-ui,Segoe UI,Roboto,sans-serif; }
#contact-modal .hl-modal__subtitle,
#edit-contact-modal .hl-modal__subtitle,
#staff-modal .hl-modal__subtitle{ margin:8px 0 16px; color:var(--hl-muted); }
/* Actions + buttons */
#contact-modal .hl-modal__actions,
#edit-contact-modal .hl-modal__actions,
#staff-modal .hl-modal__actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:6px; }
#contact-modal .btn,
#edit-contact-modal .btn,
#staff-modal .btn{ font:500 15px/1 system-ui,Segoe UI,Roboto,sans-serif; padding:10px 14px; border-radius:10px; border:1px solid transparent; cursor:pointer; }
#contact-modal .btn-primary,
#edit-contact-modal .btn-primary,
#staff-modal .btn-primary{ background:var(--hl-primary); border-color:var(--hl-primary-600); color:#fff; }
#contact-modal .btn-primary:hover,
#edit-contact-modal .btn-primary:hover,
#staff-modal .btn-primary:hover{ filter:brightness(.95); }
#contact-modal .btn-secondary,
#edit-contact-modal .btn-secondary,
#staff-modal .btn-secondary{ background:#fff; border-color:#e5e7eb; color:var(--hl-text); }
#contact-modal .btn-secondary:hover,
#edit-contact-modal .btn-secondary:hover,
#staff-modal .btn-secondary:hover{ background:#f9fafb; }
/* ========== Form styles ========== */
#contact-modal .hl-form,
#edit-contact-modal .hl-form,
#staff-modal .hl-form{ margin-top:6px; }
#contact-modal .hl-grid,
#edit-contact-modal .hl-grid,
#staff-modal .hl-grid{ display:grid; gap:12px; }
@media (min-width:640px){
#contact-modal .hl-grid,
#edit-contact-modal .hl-grid,
#staff-modal .hl-grid{ grid-template-columns:1fr 1fr; }
}
#contact-modal .hl-field,
#edit-contact-modal .hl-field,
#staff-modal .hl-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
#contact-modal label,
#edit-contact-modal label,
#staff-modal label{ font:600 13px/1.2 system-ui,Segoe UI,Roboto,sans-serif; color:#374151; }
#contact-modal .hl-optional,
#edit-contact-modal .hl-optional,
#staff-modal .hl-optional{ font-weight:500; color:var(--hl-muted); }
#contact-modal input[type="text"],
#edit-contact-modal input[type="text"],
#staff-modal input[type="text"],
#contact-modal input[type="tel"],
#edit-contact-modal input[type="tel"],
#staff-modal input[type="tel"],
#contact-modal input[type="email"],
#edit-contact-modal input[type="email"],
#staff-modal input[type="email"],
#staff-modal input[type="time"],
#contact-modal select,
#edit-contact-modal select,
#staff-modal select,
#contact-modal textarea,
#edit-contact-modal textarea,
#staff-modal textarea{
width:100%; border:1px solid #e5e7eb; border-radius:10px;
padding:10px 12px; font:400 15px/1.3 system-ui,Segoe UI,Roboto,sans-serif;
background:#fff; color:var(--hl-text);
}
#contact-modal textarea,
#edit-contact-modal textarea,
#staff-modal textarea{ resize:vertical; min-height:80px; }
#contact-modal input:focus,
#edit-contact-modal input:focus,
#staff-modal input:focus,
#contact-modal select:focus,
#edit-contact-modal select:focus,
#staff-modal select:focus,
#contact-modal textarea:focus,
#edit-contact-modal textarea:focus,
#staff-modal textarea:focus{
outline:none; border-color:var(--hl-primary-600);
box-shadow:0 0 0 3px rgba(3,169,240,.25);
}
#contact-modal .hl-hint,
#edit-contact-modal .hl-hint,
#staff-modal .hl-hint{ font-size:12px; color:var(--hl-muted); }
#contact-modal .hl-check,
#edit-contact-modal .hl-check,
#staff-modal .hl-check{ display:flex; align-items:center; gap:8px; margin:4px 0 8px; font:500 14px/1.4 system-ui,Segoe UI,Roboto,sans-serif; }
/* Cleaner checkbox + focus state (Add/Edit Contact modals) */
#contact-modal .hl-check input[type="checkbox"],
#edit-contact-modal .hl-check input[type="checkbox"],
#staff-modal .hl-check input[type="checkbox"]{
accent-color: #cce5ef61; /* subtle brand color */
width: 16px;
height: 16px;
cursor: pointer;
margin: 0; /* keep spacing tight */
}
/* remove the harsh default outline */
#contact-modal .hl-check input[type="checkbox"]:focus,
#edit-contact-modal .hl-check input[type="checkbox"]:focus,
#staff-modal .hl-check input[type="checkbox"]:focus{
outline: none;
}
/* accessible, soft focus ring */
#contact-modal .hl-check input[type="checkbox"]:focus-visible,
#edit-contact-modal .hl-check input[type="checkbox"]:focus-visible,
#staff-modal .hl-check input[type="checkbox"]:focus-visible{
box-shadow: 0 0 0 3px rgba(3,169,240,.30);
border-radius: 3px;
}
/* keep label text aligned nicely with the box */
#contact-modal .hl-check span,
#edit-contact-modal .hl-check span,
#staff-modal .hl-check span{
line-height: 1.35;
}
/* Staff buttons (bootstrap-inspired) */
#panel-staff .sm-btn,
#staff-modal .sm-btn{
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
font-size: 14px;
font-weight: 600;
line-height: 1.2;
border-radius: 6px;
border: 1px solid #cbd5e1;
background: #f8fafc;
color: #0f172a;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
#panel-staff .sm-btn.primary,
#staff-modal .sm-btn.primary{
background: var(--hl-primary);
border-color: var(--hl-primary-600);
color: #fff;
}
#panel-staff .sm-btn.ghost,
#staff-modal .sm-btn.ghost{
background: #fff;
border-color: #d0d7de;
}
#panel-staff .sm-btn:hover,
#staff-modal .sm-btn:hover{
transform: translateY(-1px);
box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
}
#panel-staff .sm-btn:focus-visible,
#staff-modal .sm-btn:focus-visible{
outline: none;
box-shadow: 0 0 0 3px rgba(3, 169, 240, 0.25);
}
/* Staff listing picker */
#panel-staff .sm-hero__actions{
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
width: 100%;
padding: 12px 14px;
background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
border: 1px solid #e5e7eb;
border-radius: 14px;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
position: relative;
}
#panel-staff .sm-hero__lede--split{
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
#panel-staff .sm-hero__lede--split span{
flex: 1 1 auto;
}
#panel-staff .staff-invite-toggle{
border: 1px solid #dbe3eb;
background: #fff;
padding: 8px 12px;
border-radius: 999px;
font-weight: 700;
font-size: 13px;
display: inline-flex;
align-items: center;
gap: 6px;
color: #0f172a;
box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
transition: all .15s ease;
}
#panel-staff .staff-invite-toggle .dashicons{
font-size: 16px;
}
#panel-staff .staff-invite-toggle:hover:not(:disabled){
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}
#panel-staff .staff-invite-toggle:disabled{
opacity: 0.5;
cursor: not-allowed;
}
#panel-staff .staff-invite-card{
flex: 1 1 280px;
min-width: 260px;
display: none;
flex-direction: column;
gap: 8px;
padding: 8px 12px 10px;
border: 1px solid #dfe4ea;
border-radius: 14px;
background: #fff;
box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.05);
margin-left: auto;
margin-top: 12px;
width: min(100%, 560px);
}
#panel-staff .staff-invite-card.is-disabled{
opacity: 0.7;
}
#panel-staff .staff-invite-card.is-open{
display: flex;
}
#panel-staff .staff-invite-card__header{
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
#panel-staff .staff-invite-close{
border: 0;
background: #f1f5f9;
color: #0f172a;
border-radius: 8px;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
cursor: pointer;
transition: background .15s ease;
}
#panel-staff .staff-invite-close:hover{
background: #e2e8f0;
}
#panel-staff .staff-invite__label{
font-size: 12px;
font-weight: 700;
color: #0f172a;
letter-spacing: 0.02em;
}
#panel-staff .staff-invite__controls{
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
#panel-staff .staff-invite__input{
flex: 1 1 220px;
min-width: 220px;
padding: 10px 12px;
border: 1px solid #dfe4ea;
border-radius: 12px;
background: #f8fafc;
font: 600 13px/1.35 system-ui,Segoe UI,Roboto,sans-serif;
color: #0f172a;
}
#panel-staff .staff-invite__input[disabled]{
color: #94a3b8;
cursor: not-allowed;
}
#panel-staff .staff-invite__buttons{
display: flex;
gap: 8px;
align-items: center;
}
#panel-staff .staff-invite-card .sm-btn{
height: 44px;
padding: 0 12px;
}
#panel-staff #staff-whatsapp .dashicons{
color: #25d366;
}
#panel-staff .staff-invite__hint{
color: var(--hl-muted);
font-size: 12px;
display: block;
margin-top: 2px;
}
#panel-staff .sm-btn.is-success{
background: #e0f2fe;
border-color: #bae6fd;
color: #0f172a;
}
@media (max-width: 900px){
#panel-staff .sm-hero__lede--split{
flex-direction: column;
align-items: flex-start;
}
#panel-staff .staff-invite-card{
width: 100%;
}
}
#panel-staff .sm-field{
display: flex;
flex-direction: column;
gap: 6px;
margin: 0;
}
#panel-staff .sm-field span{
font-size: 12px;
font-weight: 600;
color: #64748b;
letter-spacing: 0.03em;
text-transform: uppercase;
}
#panel-staff .sm-hero__actions .sm-btn.primary{
height: 56px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0 18px;
box-shadow: 0 10px 18px rgba(3, 169, 240, 0.16);
border-radius: 14px;
font-weight: 700;
}
#panel-staff .staff-listing-picker{
position: relative;
flex: 1 1 320px;
min-width: 280px;
display: flex;
flex-direction: column;
gap: 8px;
padding: 4px 0;
}
#panel-staff .staff-listing-input{
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border: 1px solid #dfe4ea;
border-radius: 14px;
background: #fff;
transition: all .15s ease;
box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
min-height: 52px;
}
#panel-staff .staff-listing-input:focus-within{
border-color: var(--hl-primary-600);
background: linear-gradient(180deg, #f9fcff 0%, #fff 100%);
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}
#panel-staff #staff-listing-select{
border: 0;
background: transparent;
outline: none;
width: 100%;
font: 600 14px/1.2 system-ui,Segoe UI,Roboto,sans-serif;
padding: 0;
}
#panel-staff .staff-listing-picker .dashicons{
color: var(--hl-muted);
}
#panel-staff .staff-listing-clear{
border: 0;
background: transparent;
cursor: pointer;
color: #9ca3af;
font-size: 18px;
line-height: 1;
padding: 0;
}
#panel-staff .staff-listing-clear:hover{
color: #4b5563;
}
#panel-staff .staff-listing-results{
position: absolute;
top: calc(100% - 6px);
left: 0;
right: 0;
display: none;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 12px;
box-shadow: 0 18px 38px rgba(15, 23, 42, 0.18);
max-height: 260px;
overflow-y: auto;
z-index: 50;
}
#panel-staff .staff-listing-results.is-open{
display: block;
}
#panel-staff .staff-listing-result{
width: 100%;
text-align: left;
border: 0;
background: transparent;
padding: 10px 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
cursor: pointer;
font-weight: 600;
color: #0f172a;
}
#panel-staff .staff-listing-result small{
color: #6b7280;
font-weight: 500;
}
#panel-staff .staff-listing-result:hover{
background: #f8fafc;
}
#panel-staff .staff-listing-empty{
padding: 12px;
color: #6b7280;
font-size: 13px;
}
#panel-staff .sm-field .hl-hint{
font-size: 12px;
color: var(--hl-muted);
margin-top: 2px;
}
/* Staff table skeleton */
#panel-staff .staff-loading-skeleton td{
padding: 12px 14px;
}
#panel-staff .skeleton-line,
#panel-staff .skeleton-pill{
display: inline-block;
height: 10px;
border-radius: 999px;
background: linear-gradient(90deg, #f8fafc 25%, #e5e7eb 50%, #f8fafc 75%);
background-size: 200% 100%;
animation: staff-skeleton 1.2s ease-in-out infinite;
}
#panel-staff .skeleton-pill{
height: 28px;
}
#panel-staff .skeleton-line + .skeleton-line{
margin-top: 6px;
display: block;
}
#panel-staff .skeleton-line.w-70{ width: 70%; }
#panel-staff .skeleton-line.w-60{ width: 60%; }
#panel-staff .skeleton-line.w-50{ width: 50%; }
#panel-staff .skeleton-line.w-40{ width: 40%; }
#panel-staff .skeleton-pill.w-30{ width: 70px; }
@keyframes staff-skeleton{
0%{ background-position: 200% 0; }
100%{ background-position: -200% 0; }
}
.page-id-130.woocommerce-account .i-section{
padding-top: 0 !important;
}
#staff-modal .btn{
border-radius: 6px;
padding: 8px 14px;
font-weight: 600;
}
#staff-modal .btn-secondary{
background: #f1f5f9;
border-color: #cbd5e1;
color: #0f172a;
}
#staff-modal .btn-secondary:hover{
background: #e2e8f0;
}
/* shared button theme (kept) */
#contact-modal button, #edit-contact-modal button, #assign-category-modal button {
background-color: #03A9F0;
font-family: "Roboto", Sans-serif;
font-size: 20px;
padding: 4px 10px;
margin: 20px 0 0px 0;
color: white;
font-weight: 500;
border: solid 1px #0873a0;
border-radius: 4px 4px 4px 4px;
}
/* Legacy-only heading tweak (won’t affect new hl-modal version) */
#edit-contact-modal.modal h3 {
margin: 0px 0 25px 10px !important;
font-weight: 600;
color: #353535;
font-family: system-ui;
}
/* Theme tokens */
:root {
--hl-primary: #03A9F0;
--hl-primary-600: #0873a0;
--hl-text: #1f2937;
--hl-muted: #6b7280;
--hl-bg: #ffffff;
--hl-backdrop: rgba(17, 24, 39, 0.45);
--hl-radius: 14px;
}
/* Container / backdrop */
#assign-category-modal.hl-modal {
position: fixed;
inset: 0;
display: none; /* toggle via .active */
align-items: center;
justify-content: center;
background: var(--hl-backdrop);
z-index: 9999;
padding: 20px;
}
#assign-category-modal.hl-modal.active { display: flex; }
/* Panel */
#assign-category-modal .hl-modal__panel {
width: min(560px, 94vw);
background: var(--hl-bg);
color: var(--hl-text);
border-radius: var(--hl-radius);
box-shadow: 0 10px 30px rgba(0,0,0,.12), 0 2px 10px rgba(0,0,0,.06);
padding: 22px 22px 20px;
position: relative;
transform: translateY(6px);
opacity: 0;
transition: transform .18s ease, opacity .18s ease;
}
#assign-category-modal.active .hl-modal__panel {
transform: translateY(0);
opacity: 1;
}
/* Close button */
#assign-category-modal .hl-modal__close {
position: absolute;
top: 10px; right: 12px;
border: 0; background: transparent;
font-size: 22px; line-height: 1; cursor: pointer;
color: var(--hl-muted);
}
#assign-category-modal .hl-modal__close:hover { color: var(--hl-text); }
/* Header */
#assign-category-modal .hl-modal__header {
display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
}
#assign-category-modal .hl-modal__icon {
color: var(--hl-primary);
display: grid; place-items: center;
}
#assign-category-modal .hl-modal__title {
margin: 0;
font: 600 18px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
/* Body text */
#assign-category-modal .hl-modal__body {
margin: 10px 0 18px;
color: var(--hl-text);
font: 400 15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
/* Category badge */
#assign-category-modal .hl-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
background: rgba(3,169,240,.12);
color: var(--hl-primary-600);
font-weight: 600;
}
/* Actions */
#assign-category-modal .hl-modal__actions {
display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
}
/* Buttons (keeps your existing classes working) */
#assign-category-modal .btn {
font: 500 15px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
padding: 10px 14px;
border-radius: 10px;
border: 1px solid transparent;
cursor: pointer;
}
#assign-category-modal .btn-primary {
background: var(--hl-primary);
border-color: var(--hl-primary-600);
color: #fff;
}
#assign-category-modal .btn-primary:hover { filter: brightness(0.95); }
#assign-category-modal .btn-secondary {
background: #fff;
border-color: #e5e7eb;
color: var(--hl-text);
}
#assign-category-modal .btn-secondary:hover {
background: #f9fafb;
}
/* Backdrop click area (optional, if you want it) */
#assign-category-modal .hl-modal__backdrop { position: absolute; inset: 0; }
span.fa.fa-envelope {
color: #ff8800;
}
form#add-payment-form {
display: flex;
flex-direction: column;
}
#add-payment-form ::placeholder, #hilucy-service-manager span.edit-detail{
color: #888888;
}
div#payments-list {
margin: 0 0 25px 0px;
}
a.fc-event.owed {
background: #dc3545;
}
/* �"?�"?�"? Service Manager UX refresh �"?�"?�"? */
#panel-service {
--sm-surface: #ffffff;
--sm-border: #e6e9ef;
--sm-muted: #6b7280;
--sm-ink: #0f172a;
--sm-accent: #0b88c2;
--sm-accent-2: #0f9cd6;
--sm-radius: 14px;
font-family: "Inter", "Poppins", system-ui, -apple-system, sans-serif;
}
#panel-service .sm-hero {
background: linear-gradient(135deg, #e6f7ff 0%, #c9ecff 45%, #a9def8 100%);
border-radius: var(--sm-radius);
padding: 20px;
margin-bottom: 16px;
display: grid;
gap: 14px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(12, 47, 73, 0.08);
}
#panel-service .sm-hero__copy { display: grid; gap: 4px; }
#panel-service .sm-hero__eyebrow {
text-transform: uppercase;
letter-spacing: 0.12em;
color: #0b5a87;
font-size: 12px;
margin: 0;
}
#panel-service .sm-hero__title {
margin: 0;
font-size: 22px;
color: #0f172a;
}
#panel-service .sm-hero__lede {
margin: 0;
color: #0c304a;
font-weight: 500;
}
#panel-service .sm-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
#panel-service .sm-btn {
border-radius: 10px;
border: 1px solid transparent;
padding: 10px 14px;
font-weight: 700;
cursor: pointer;
display: inline-flex;
gap: 6px;
align-items: center;
transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
#panel-service .sm-btn.primary {
background: linear-gradient(135deg, #0f9cd6 0%, #0b88c2 100%);
color: #fff;
box-shadow: 0 10px 20px rgba(15, 156, 214, 0.25);
}
#panel-service .sm-btn.ghost {
background: #fff;
color: #0f172a;
border-color: rgba(15, 156, 214, 0.35);
}
#panel-service .sm-btn.is-busy {
opacity: 0.6;
pointer-events: none;
}
#panel-service .sm-btn:hover {
transform: translateY(-1px);
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}
#panel-service .sm-hero__stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 10px;
}
#panel-service .sm-stat {
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(15, 156, 214, 0.18);
border-radius: 12px;
padding: 12px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
}
#panel-service .sm-stat__label {
margin: 0;
color: var(--sm-muted);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.02em;
}
#panel-service .sm-stat strong {
display: block;
font-size: 24px;
margin: 4px 0 2px;
color: #0f172a;
}
#panel-service .sm-stat small {
color: #0c304a;
}
#panel-service .sm-filters {
background: var(--sm-surface);
border: 1px solid var(--sm-border);
border-radius: var(--sm-radius);
padding: 14px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
align-items: end;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
margin-bottom: 10px;
}
#panel-service .sm-field label {
display: block;
font-weight: 700;
color: var(--sm-muted);
margin-bottom: 6px;
}
#panel-service .sm-field input,
#panel-service .sm-field select {
width: 100%;
border-radius: 10px;
border: 1px solid var(--sm-border);
padding: 10px 12px;
font-size: 14px;
}
#panel-service .sm-field--actions {
display: flex;
gap: 8px;
align-items: center;
}
#panel-service .table-responsive table {
border-collapse: collapse;
border-spacing: 0;
}
#panel-service #sr-table th,
#panel-service #sr-table td {
border: none;
padding: 10px 12px;
}
#panel-service .table-responsive {
overflow-x: auto;
background: transparent;
padding: 0;
margin: 6px 0 0;
}
#panel-service #sr-table {
width: 100%;
background: transparent;
box-shadow: none;
}
#panel-service #sr-table tbody tr:not(.sr-separator) {
background: transparent;
border: 1px solid #e7eef5;
box-shadow: 0 10px 20px rgba(15, 23, 42, 0.06);
border-radius: 14px;
}
#panel-service #sr-table tbody tr:not(.sr-separator) td:first-child {
border-top-left-radius: 14px;
border-bottom-left-radius: 14px;
background: transparent;
}
#panel-service #sr-table tbody tr:not(.sr-separator) td:last-child {
border-top-right-radius: 14px;
border-bottom-right-radius: 14px;
background: transparent;
}
#panel-service #sr-table th:first-child,
#panel-service #sr-table td:first-child {
width: 190px;
min-width: 180px;
padding-left: 8px;
}
#panel-service #sr-table th:nth-child(2),
#panel-service #sr-table td.tags-cell {
width: 140px;
max-width: 160px;
}
#panel-service #sr-table td.tags-cell{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#panel-service.card-view #sr-table td.tags-cell{
max-width: none;
white-space: normal;
overflow: visible;
text-overflow: unset;
}
#panel-service .sm-hero,
#panel-service .sm-filters {
border-radius: 14px;
}
#panel-service .sm-hero__actions {
gap: 10px;
}
#panel-service .sm-hero__stats {
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.sr-separator td {
background: #f2f7f9;
font-weight: bold;
padding: 0.5em 1em;
text-align: left;
}
#sr-table tr.sr-group-head td:first-child {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 10px;
min-width: 120px;
padding: 10px 0 10px 8px;
background: #fff;
}
#panel-service #sr-table td.select-cell {
display:flex;
flex-direction:column;
align-items:flex-start;
gap:8px;
min-height:160px;
min-width: 190px;
}
#panel-service #sr-table td.select-cell .task-peek{
width:100%;
max-width:180px;
margin-top:6px;
}
#panel-service #sr-table td.select-cell .task-peek__card{
width:100%;
}
#panel-service #sr-table td.select-cell .select-actions{
display:flex;
flex-direction:row;
align-items:center;
gap:8px;
width:auto;
justify-content:flex-start;
flex-wrap:nowrap;
}
#hilucy-service-manager #panel-service #sr-table td.select-cell .select-actions{
display:flex;
flex-direction:row;
align-items:center;
gap:8px;
flex-wrap:nowrap;
justify-content:flex-start;
}
#panel-service #sr-table td.select-cell .sr-group-toggle-wrap{
margin-top:auto;
width:100%;
display:flex;
justify-content:flex-start;
}
#sr-table td[data-label="Select"] {
padding: 8px 0 8px 8px;
}
#sr-table .sr-group-toggle-wrap {
display: flex;
position: static;
width: 100%;
justify-content: center;
}
#sr-table .sr-group-toggle {
margin-left: 0;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 12px;
border: 1px solid #6bb8f9;
background: linear-gradient(180deg,#e8f6ff 0%,#cfe9ff 100%);
color: #0c305a;
font-size: 12px;
font-weight: 600;
line-height: 1.1;
cursor: pointer;
box-shadow: 0 2px 10px rgba(58,140,230,0.25);
transition: background .2s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
min-width: 112px;
justify-content: space-between;
}
#hilucy-service-manager #panel-service .sr-group-toggle {
/* bump specificity to beat global button styles without touching them */
background: linear-gradient(180deg,#e8f6ff 0%,#cfe9ff 100%);
border: 1px solid #6bb8f9;
color: #0c305a;
box-shadow: 0 2px 10px rgba(58,140,230,0.25);
}
#hilucy-service-manager #panel-service .sr-group-toggle:hover {
background: #c8e3ff;
border-color: #4d9cf0;
color: #08233f;
box-shadow: 0 4px 14px rgba(58,140,230,0.32);
}
#sr-table .sr-group-toggle:hover {
background: #c8e3ff;
border-color: #4d9cf0;
color: #08233f;
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(58,140,230,0.32);
}
#sr-table .sr-group-count {
font-weight: 700;
}
#sr-table .sr-group-text {
text-transform: uppercase;
font-size: 10px;
letter-spacing: .02em;
color: #4b5563;
}
#sr-table .sr-group-caret {
display: inline-block;
transition: transform .15s ease;
font-size: 12px;
}
#sr-table tr.sr-group-head.is-expanded .sr-group-caret {
transform: rotate(90deg);
}
#sr-table tr.sr-group-child {
background: #f9fcff;
transition: opacity .15s ease;
opacity: 1;
}
#sr-table tr.sr-group-child[style*="display: none"] {
opacity: 0;
}
#panel-service #sr-table tr.sr-group-head {
background: transparent;
}
#panel-service #sr-table tr.sr-group-head.is-expanded {
background: transparent;
}
#panel-service #sr-table tr.sr-group-child {
background: #eaf2ff;
}
#panel-service #sr-table tr.sr-group-child.is-expanded-child {
background: #e0edff;
transition: background .18s ease;
}
#panel-service #sr-table tr.sr-group-child.is-hidden {
display: none !important;
}
.manual-payments-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 1em;
}
.manual-payments-table th,
.manual-payments-table td {
border: 1px solid #ddd;
padding: 0.5em;
text-align: left;
}
.manual-payments-table th {
background-color: #f8f8f8;
font-weight: 600;
}
/* target the exact menu-item by its ID */
i.fas.fa-running {
font-size: 20px;
}
li.menu-item-13353 > a {
position: relative;
}
/* append a “Beta” badge */
li.menu-item-13353 > a::after {
content: "Beta";
display: inline-block;
margin-left: 6px;
font-size: .6em;
text-transform: uppercase;
background: #f39c12;
color: #fff;
padding: 2px 4px;
border-radius: 3px;
vertical-align: middle;
}
#hilucy-service-manager input#select-all {
height: 20px;
width: 20px;
}
#hilucy-service-manager h3 {
/* text-align: center; */
margin: 25px 0 25px 10px;
}
#hilucy-service-manager h2 {
margin: 30px 0 30px 0;
/* font-family: 'Atlassian Sans Ext'; */
font-weight: 600;
}
/* ─── Container styling ───────────────────────────────────────── */
#rental-calendar {
max-width: 100%;
margin: 0 auto;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
overflow: hidden;
}
/* ─── Global font ─────────────────────────────────────────────── */
.fc {
font-family: 'Inter', sans-serif;
color: #333;
}
/* ─── Toolbar ────────────────────────────────────────────────── */
.fc .fc-toolbar {
/* margin-top: 32px; */
padding: 25px 13px 0 13px;
border-bottom: 1px solid #eee;
}
.fc .fc-toolbar-title {
font-size: 1.2rem;
font-weight: 600;
}
.fc .fc-button {
background-color: #0073aa;
border: none;
border-radius: 4px;
color: #fff;
padding: 0.5em 0.75em;
margin: 0 0.25em;
font-size: .9rem;
font-weight: 500;
}
.fc .fc-button:hover,
.fc .fc-button:focus {
background-color: #005177;
}
.fc .fc-button-active {
background-color: #005177;
}
/* ─── Header & Grid ─────────────────────────────────────────── */
.fc .fc-col-header-cell-cushion,
.fc .fc-daygrid-day-number {
color: #666;
font-weight: 500;
}
.fc .fc-resourceCell {
font-weight: 600;
color: #444;
padding: .6em .8em;
border-right: 1px solid #eee;
}
/* ─── Events ─────────────────────────────────────────────────── */
.fc .fc-event {
border: none;
border-radius: 4px;
padding: .25em .5em;
font-size: .85rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.fc .fc-event:hover {
filter: brightness(0.9);
}
/* 1) Ensure each event is a positioning context */
.fc .fc-event {
position: relative;
}
/* 2) Style the tooltip, push it to the left */
.event-tooltip {
display: none;
position: absolute;
top: 50%;
left: 0;
transform: translate(0%, -50%);
background: #ffffff;
color: #000000;
border: 1px solid #ddd;
border-radius: 4px;
padding: 0.5em;
font-size: .75rem;
pointer-events: none;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
z-index: 99999;
white-space: nowrap;
}
/* style the little notification bubble */
.btn-tasks {
position: relative;
padding-right: 2.5em;
white-space: nowrap;
}
/* make the button the positioning context */
.btn-payments {
position: relative;
}
.btn-requests {
position: relative;
}
.btn-tasks .notif, .btn-payments .notif {
display: inline-block;
position: absolute;
top: -7px;
right: -5px;
min-width: 1.2em;
height: 1.2em;
padding: 0 0.25em;
background-color: #e74c3c;
color: #fff;
font-size: 0.90em;
line-height: 1.2em;
text-align: center;
border-radius: 999px;
font-weight: bold;
pointer-events: none;
}
/* style the little badge */
.btn-payments .notif {
background-color: #27ae60;
}
/* Keep the | as a table‐cell and vertically center its contents */
td[data-label="Phone"] {
display: table-cell;
vertical-align: middle;
padding: .65em;
}
/* Now make only the inner wrapper flex */
.phone-content {
display: inline-flex;
align-items: center;
gap: 0.5em;
}
/* Tweak number and button for perfect alignment */
.phone-number {
line-height: 1;
}
.copy-phone {
padding: 0;
margin: 0;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* .page-id-130 #c27-site-wrapper {
background-color: #ffffff;
} */
#hilucy-service-manager button.copy-phone {
font-size: 3px;
/* border: none !important; */
}
button.copy-phone ::before {
font-size: 18px;
}
.page-id-130 #c27-site-wrapper {
background-color: #fcfeff;
}
#hilucy-service-manager button.call-btn,
#hilucy-service-manager a.call-btn {
color: #2ecc71 !important;
}
#hilucy-service-manager button.email-btn,
#hilucy-service-manager a.email-btn {
color: #32373c !important;
}
#hilucy-service-manager button.text-btn,
#hilucy-service-manager a.text-btn {
color: #3498db !important;
}
#hilucy-service-manager button.btn-share,
#hilucy-service-manager a.btn-share {
color: #9b59b6 !important;
}
#hilucy-service-manager #panel-service button,
#hilucy-service-manager #rental-calendar button,
#hilucy-service-manager .inventory-section button,
#hilucy-service-manager #panel-clients button,
#hilucy-service-manager #mobile-event-content button,
.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr button,
#hilucy-service-manager button.btn-details {
border-radius: 6px;
color: black;
border: 2px solid #e0e0e0;
padding: 0.1em 0.6em;
margin: 0 0 0 0px;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.12), /* soft highlight at top */
rgba(0, 0, 0, 0.06) /* subtle shade at bottom */
), #efefef; /* base color */
background-blend-mode: overlay;
transition: background 0.2s ease-in-out;
}
/* Slightly stronger gradient on hover */
#hilucy-service-manager #panel-service button:hover,
#hilucy-service-manager #rental-calendar button:hover,
#hilucy-service-manager .inventory-section button:hover,
#hilucy-service-manager #panel-clients button:hover,
#hilucy-service-manager #mobile-event-content button:hover,
.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr button:hover,
#hilucy-service-manager button.btn-details:hover {
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.18),
rgba(0, 0, 0, 0.10)
), #e6e6e6;
background-blend-mode: overlay;
}
/* Clients dashboard */
#panel-clients .clients-hero {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 1.25rem;
padding: 1.25rem 1.5rem;
background: linear-gradient(135deg, #e6f7ff 0%, #c9ecff 45%, #a9def8 100%);
border-radius: 14px;
color: #0b253a;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}
#panel-clients .clients-hero__copy h3 {
margin: 0.1rem 0 0.3rem;
font-size: 1.35rem;
color: #0b253a;
}
#panel-clients .clients-hero__eyebrow {
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 700;
color: #0b88c2;
margin: 0;
}
#panel-clients .clients-hero__lede {
margin: 0.4rem 0 0;
max-width: 42ch;
color: #0c304a;
}
#panel-clients .clients-hero__metrics {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.75rem;
}
#panel-clients .clients-metric {
background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
border: 1px solid #dfe8f5;
border-radius: 12px;
padding: 0.75rem 0.9rem;
box-shadow: 0 8px 18px rgba(16,63,145,0.06);
}
#panel-clients .clients-metric p {
margin: 0;
font-size: 0.85rem;
color: #4b5563;
}
#panel-clients .clients-metric strong {
display: block;
font-size: 1.45rem;
margin: 0.15rem 0;
color: #0f2d57;
}
#panel-clients .clients-metric small {
color: #6b7280;
}
#panel-clients .clients-controls {
display: grid;
grid-template-columns: minmax(320px, 1fr) auto minmax(220px, 1fr) auto;
column-gap: 1rem;
row-gap: 0.75rem;
align-items: start;
margin: 1rem 0;
}
#panel-clients .clients-search label,
#panel-clients .clients-sort label {
display: block;
font-weight: 600;
margin-bottom: 0.35rem;
color: #30343b;
}
#panel-clients .clients-filters label {
display: block;
font-weight: 600;
margin-bottom: 0.35rem;
color: #30343b;
}
#panel-clients .input-icon {
display: flex;
align-items: center;
gap: 0.4rem;
background: #fff;
border: 1px solid #d7dce5;
border-radius: 10px;
padding: 0.3rem 0.55rem;
box-shadow: 0 6px 16px rgba(16,63,145,0.06);
min-height: 42px;
max-height: 42px;
}
#panel-clients .input-icon input {
border: none;
outline: none;
width: 100%;
font-size: 0.95rem;
height: 100%;
}
#panel-clients .clients-filters {
display: flex;
flex-direction: column;
gap: 0.35rem;
align-self: stretch;
}
#panel-clients .clients-filter-chips {
display: inline-flex;
gap: 0.5rem;
flex-wrap: wrap;
align-items: center;
min-height: 42px;
}
#panel-clients .clients-chip {
border: 1px solid #d7dce5;
background: #fff;
color: #2f3341;
border-radius: 999px;
padding: 0.35rem 0.9rem;
font-weight: 600;
cursor: pointer;
box-shadow: 0 4px 12px rgba(15,178,233,0.08);
min-height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1.1;
}
#panel-clients .clients-chip.active {
background: #12b8ed;
color: #fff;
border: 2px solid #12b8ed;
box-shadow: 0 6px 14px rgba(18,184,237,0.22);
}
#panel-clients .clients-sort select {
width: 100%;
padding: 0.6rem 0.85rem;
border-radius: 10px;
border: 1px solid #d7dce5;
background: #fff;
box-shadow: 0 6px 16px rgba(16,63,145,0.06);
min-height: 42px;
}
#panel-clients .clients-refresh {
justify-self: end;
white-space: nowrap;
}
#panel-clients .clients-refresh.is-busy {
opacity: 0.7;
pointer-events: none;
}
#panel-clients .clients-refresh {
min-height: 42px;
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.45rem 0.9rem;
}
#panel-clients .clients-search,
#panel-clients .clients-sort {
align-self: center;
}
#panel-clients .clients-controls > *:not(.clients-filter-chips) {
width: 100%;
}
@media (max-width: 1100px) {
#panel-clients .clients-controls {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
row-gap: 1rem;
}
#panel-clients .clients-refresh {
justify-self: start;
}
}
#panel-clients .clients-refresh-wrap {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
#panel-clients .clients-refresh-label {
visibility: hidden;
height: 1.3em;
font-weight: 600;
}
#panel-clients .clients-refresh {
width: 100%;
justify-content: center;
align-self: flex-end;
}
#panel-clients .clients-table-wrap {
position: relative;
}
#panel-clients .clients-empty {
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
background: #f8fafc;
border: 1px dashed #d7dce5;
border-radius: 10px;
color: #505562;
margin-top: 0.5rem;
}
#panel-clients .clients-table-wrap table {
border: 1px solid #e5e7eb;
border-radius: 10px;
overflow: hidden;
}
#panel-clients .clients-table-wrap tbody tr:nth-child(even) {
background: #fbfdff;
}
#panel-clients .clients-table-wrap tbody tr:hover {
background: #f1f7ff;
}
#panel-clients .clients-controls {
align-items: center;
}
#panel-clients .clients-controls .sm-btn {
border-radius: 10px;
padding: 0.55rem 0.9rem;
font-weight: 700;
background: #fff;
border: 1px solid #d7dce5;
box-shadow: 0 4px 10px rgba(16,63,145,0.08);
}
@media (max-width: 960px) {
#panel-clients .clients-hero {
grid-template-columns: 1fr;
}
#panel-clients .clients-hero__metrics {
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
#panel-clients .clients-controls {
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
#panel-clients .clients-refresh {
justify-self: stretch;
}
}
/* toast popup */
.copy-toast {
position: absolute;
background: rgba(0,0,0,0.8);
color: #fff;
padding: 0.25em 0.5em;
border-radius: 0.25em;
font-size: 0.85em;
pointer-events: none;
z-index: 9999;
white-space: nowrap;
opacity: 0;
transition: opacity 0.2s;
}
@media (max-width: 600px) {
#hilucy-service-manager button.call-btn,
#hilucy-service-manager a.call-btn,
#hilucy-service-manager button.text-btn,
#hilucy-service-manager a.text-btn,
#hilucy-service-manager button.email-btn,
#hilucy-service-manager a.email-btn,
#hilucy-service-manager button.btn-delete,
#hilucy-service-manager button.btn-share {
width: 100%;
padding: 10px;
min-width: 65px;
font-size: 20px;
}
}
/*────────────────────────────────────────────────────────────────────────────
Everything lives under #hilucy-service-manager so it’s as specific
as possible
────────────────────────────────────────────────────────────────────────────*/
.assign-dropdown {
position: relative;
width: 100%;
}
.assign-selected {
background: white !important;
white-space: nowrap;
min-width: 120px;
width: 100%;
border-radius: 5px;
margin: 0 5px 0 0;
padding: 4px;
text-align: center;
cursor: pointer;
}
.assign-option.add {
color: #3cceff;
}
.assign-options {
padding: 5px;
display: none;
min-width: 140px;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
background: #fff;
border: 1px solid #ccc;
z-index: 10;
max-height: 200px;
overflow-y: auto;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
border-radius: 0.5rem;
}
.assign-option {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px;
cursor: pointer;
}
.assign-option:hover {
background: #f0f0f0;
}
.assign-option .edit-contact {
background: none !important;
border: none !important;
padding: 0 !important;
cursor: pointer !important;
color: #555 !important;
}
.assign-option .edit-contact .dashicons {
font-size: 16px;
}
.autoassign-hint {
display: inline-flex;
align-items: center;
gap: 6px;
width: 100%;
margin-top: 2px;
padding: 4px 8px;
border-radius: 6px;
background: #f5f7f9;
border: 1px solid #e4e8ee;
color: #5b6472;
font-size: 11px;
line-height: 1.35;
}
.autoassign-hint .autoassign-icon {
color: #7aa3c2;
display: inline-flex;
align-items: center;
justify-content: center;
}
.autoassign-hint .fa {
font-size: 12px;
}
#hilucy-service-manager {
/* remove any position/top rules here */
/* margin: 2em auto;
padding-top: 1em; */
max-width: 100%;
font-family: sans-serif;
}
/* ─── Filters ─────────────────────────────────────────────────────────────── */
#hilucy-service-manager .filters {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
background: white;
padding: 0.75rem 1rem;
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
#hilucy-service-manager .filters select,
#hilucy-service-manager .filters input {
flex: 1 1 150px;
max-width: 200px;
border: 1px solid #ccc;
border-radius: 0.375rem;
padding: 0.5rem 0.75rem;
font-size: 0.95rem;
transition: border-color 0.2s, box-shadow 0.2s;
}
#hilucy-service-manager .filters select:focus,
#hilucy-service-manager .filters input:focus {
outline: none;
border-color: #0073aa;
box-shadow: 0 0 0 3px rgba(0,115,170,0.2);
}
#hilucy-service-manager #filter-apply {
flex: 0 0 auto;
background: #0073aa;
color: #fff;
border: none;
border-radius: 0.375rem;
padding: 0.5rem 1rem;
font-size: 0.95rem;
cursor: pointer;
}
#hilucy-service-manager #filter-apply:hover {
background: #005f8d;
}
/* ─── Table skin ─────────────────────────────────────────────────────────── */
#hilucy-service-manager table {
width: 100%;
border-collapse: collapse;
background: #fff;
}
#hilucy-service-manager th {
background: #f9f9f9;
padding: .75em;
text-align: left;
font-weight: 600;
border-bottom: 1px solid #ddd;
}
#hilucy-service-manager td {
padding: 8px;
border-bottom: 1px solid #eee;
}
#hilucy-service-manager th.select-header{
display: flex;
align-items: center;
gap: 6px;
}
#hilucy-service-manager th.select-header .col-label{
font-size: 12px;
color: #6b7280;
font-weight: 600;
}
#hilucy-service-manager .select-actions{
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
#hilucy-service-manager .select-actions .btn-tasks{
padding: 6px 12px;
font-size: 13px;
line-height: 1.15;
}
i.fa-solid.fa-plus{
font-size: 13px;
}
/* #hilucy-service-manager tr.type-booking { background-color: rgba(0,115,170,0.03); }
#hilucy-service-manager tr.type-trip_planner { background-color: rgba(76,175,80, 0.03); }
#hilucy-service-manager tr.type-catamaran_rental { background-color: rgba(255,152,0, 0.03); } */
/* ─── TYPE ICON OVERLAY ───────────────────────────────────────────── */
.type-badge {
position: relative; /* make it a positioning context */
}
/* the little badge wrapper */
.payment-overlay {
position: absolute;
top: -4px;
right: -4px;
background: #fff;
border-radius: 50%;
padding: 2px;
font-size: 0.9em;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 2px rgba(0,0,0,0.1);
}
/* green for paid, orange for processing */
.payment-overlay.paid i {
color: #2ecc71;
}
.payment-overlay.processing i {
color: #f39c12;
}
/* icon badges */
#hilucy-service-manager .type-badge {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
font-size: 1em;
}
/* fallback */
/*.type-badge { color: #333; }
.type-badge--rental { color: #0fb2e9; }
.type-badge--activity { color: #9b59b6; }
.type-badge--trip_planner { color: #f39c12; }
.type-badge--catamaran_rental{ color: #2ecc71; } */
.type-badge {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 0.2em 0.5em;
font-size: 0.82rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #475569;
background: transparent;
border-radius: 8px;
border: none;
box-shadow: none;
transition: color 0.2s ease;
cursor: default;
}
.type-badge i{
font-size: 1.45em;
line-height: 1;
color: #94a3b8;
}
.type-badge:hover {
color: #0f172a;
background: transparent;
border-color: transparent;
box-shadow: none;
}
#hilucy-service-manager .room-badge{
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0.28em 0.55em;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.02em;
color: #4b5563;
background: #f4f5f7;
border: 1px solid #e5e7eb;
box-shadow: none;
border-radius: 10px;
white-space: nowrap;
transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}
#hilucy-service-manager .room-badge.room-badge--wrap{
white-space: normal;
max-width: 200px;
}
#hilucy-service-manager .room-badge i{
color: #6b7280;
font-size: 0.95em;
}
#hilucy-service-manager .room-badge__label{
font-variant-numeric: tabular-nums;
}
#hilucy-service-manager .room-badge:hover{
background: #eef0f3;
box-shadow: none;
transform: none;
}
#hilucy-service-manager td.tags-cell .room-badge{
margin-left: 0.5em;
}
#hilucy-service-manager .select-actions-stack{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
height: 100%;
}
#hilucy-service-manager .room-badge-row {
display: none;
}
/* ─── Status-dropdown ────────────────────────────────────────────────────── */
/* wrapper must be relative so the menu can position properly */
#hilucy-service-manager .status-dropdown {
position: relative;
display: inline-block;
}
#hilucy-service-manager .status-pill {
display: inline-block;
padding: 0.3em 0.8em;
border-radius: 0.375rem;
color: #fff;
font-weight: 600;
cursor: pointer;
text-transform: capitalize;
white-space: nowrap; /* ← Prevent “In Progress” from wrapping */
}
/* per-state background colors */
#hilucy-service-manager .status-pill.pending { background: #f1c40f; }
#hilucy-service-manager .status-pill.in_progress { background: #3498db; }
#hilucy-service-manager .status-pill.completed { background: #2ecc71; }
/* ─── Tags ─────────────────────────────────────────────────────────── */
#hilucy-service-manager .tag-pill {
display: block;
text-align: center;
align-items: center;
padding: 0.4em 0.4em;
background: #eee;
color: #555;
border-radius: 6px;
font-size: 0.85rem;
margin: 0.5em;
white-space: break-spaces;
}
#hilucy-service-manager .tag-pill i {
margin-right: 0.25em;
}
#requests-modal .tag-pill {
white-space: normal;
margin: 6px 0 0 0;
}
/* the popup menu */
#hilucy-service-manager .status-menu {
display: none;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
color: #333 !important;
background: #fff;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
border-radius: 0.5rem;
padding: 0.5rem 0;
min-width: 8ch;
z-index: 1000;
}
#hilucy-service-manager .status-dropdown.open .status-menu {
display: block;
}
/* each menu item */
#hilucy-service-manager .status-item {
padding: 0.5em 1em;
cursor: pointer;
white-space: nowrap;
}
#hilucy-service-manager .status-item:hover {
background: rgba(0,0,0,0.05);
}
/* “Edit Labels” link at bottom */
#hilucy-service-manager .status-edit {
margin-top: 0.5em;
padding: 0.5em 1em;
border-top: 1px solid #eee;
font-size: 0.9em;
display: flex;
align-items: center;
cursor: pointer;
color: #666;
white-space: nowrap;
}
#hilucy-service-manager .status-edit i {
margin-right: 0.5em;
}
/* 1) make only the wrapper flex, so the cell stays a proper table-cell */
.assign-action {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
/* #hilucy-service-manager td[data-label="Assigned To"] .assign-to {
min-width: 120px;
flex: 0 0 auto;
} */
@media (min-width: 1500px) {
.woocommerce-account .i-section .container, .woocommerce-account .mlduo-account-menu .container {
width: 1600px !important;
}
}
.container.section-body {
max-width: 1600px;
}
/* #hilucy-service-manager td[data-label="Assigned To"] .add-contact {
margin: 0;
} */
/* ─── Tab controls & panels ─────────────────────────────────────────────── */
#hilucy-service-manager .hc-tabs {
display: flex;
gap: 1rem;
margin-bottom: 1rem;
overflow: auto;
}
#hilucy-service-manager .hc-tab {
display: flex;
cursor: pointer;
padding: .5em 1em;
border-radius: 4px;
font-size: 18px;
color: #656262;
gap: 10px;
align-items: baseline;
}
#hilucy-service-manager .hc-tab.active {
border-bottom: 4px solid #0fb2e9;
color: #1d1d1d;
}
#hilucy-service-manager .hc-panel {
display: none;
}
#hilucy-service-manager .hc-panel.active {
display: block;
}
/* ─── Modals ────────────────────────────────────────────────────────────── */
#hilucy-service-manager .modal {
display: none;
position: fixed;
top: 0; left: 0;
width: 100vw; height: 100vh;
background: rgba(0, 0, 0, 0.5);
align-items: center;
justify-content: center;
}
#hilucy-service-manager .modal.active,
#hilucy-service-manager .modal.fadeIn {
display: flex;
}
#hilucy-service-manager .modal .content {
background: #fff;
border-radius: 0.5rem;
max-width: 90%;
width: 500px;
max-height: 70vh;
overflow-y: auto;
padding: 1.5rem;
position: relative;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
/* close “×” */
#hilucy-service-manager .modal .close {
position: absolute;
top: 0.5rem;
right: 0.75rem;
font-size: 1.25rem;
color: #333;
cursor: pointer;
line-height: 1;
}
/* Datepicker: keep above modals and avoid clipping */
#ui-datepicker-div {
z-index: 10050 !important;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
border-radius: 10px;
overflow: hidden;
}
#ui-datepicker-div.is-above {
margin-top: -6px;
}
.ui-datepicker .ui-datepicker-header {
background:#f8fafc;
border:1px solid #e5e7eb;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
background:#ffffff;
border:1px solid #e5e7eb;
border-radius:8px;
width:28px;
height:28px;
top:8px;
cursor:pointer;
}
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
background:#f3f4f6;
border-color:#d1d5db;
}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
display:none;
}
.ui-datepicker .ui-datepicker-prev:after,
.ui-datepicker .ui-datepicker-next:after {
content:'';
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
font-size:14px;
color:#111827;
font-weight:700;
}
.ui-datepicker .ui-datepicker-prev:after { content:'\2039'; }
.ui-datepicker .ui-datepicker-next:after { content:'\203a'; }
#hilucy-service-manager .share-links {
display: flex;
gap: 0.5rem;
margin-top: 1rem;
}
#hilucy-service-manager .share-links a,
#hilucy-service-manager .share-links button {
background: #0073aa;
color: #fff;
border: none;
padding: 0.25rem 0.5rem;
border-radius: 3px;
text-decoration: none;
cursor: pointer;
}
#hilucy-service-manager .share-links button {
font: inherit;
}
/* ─── Details Table in Modal ───────────────────────────────────────────── */
#hilucy-service-manager .details-table {
width: 100%;
border-collapse: collapse;
margin-top: 1rem;
}
#hilucy-service-manager .details-table th,
#hilucy-service-manager .details-table td {
padding: 0.5em;
border: 1px solid #ddd;
}
#hilucy-service-manager .details-table th {
background: #f7f7f7;
width: 35%;
text-transform: capitalize;
font-weight: 600;
}
/* ─── Tasks List in Modal ───────────────────────────────────────────────── */
#hilucy-service-manager #tasks-list {
margin: 1rem 0;
}
#hilucy-service-manager #tasks-list ul {
list-style: none;
padding-left: 0;
}
#hilucy-service-manager #tasks-list li {
padding: 0.5em 0;
border-bottom: 1px solid #eee;
}
#hilucy-service-manager #tasks-list .edit-task{
border:0; background:transparent; cursor:pointer; color:#0f172a; opacity:0.7;
padding:4px; border-radius:6px; transition:background .15s ease, opacity .15s ease;
}
#hilucy-service-manager #tasks-list .edit-task:hover{
background:#f1f5f9; opacity:1;
}
#hilucy-service-manager #tasks-list .task-note-empty{
color:#9ca3af; font-style:italic;
}
#hilucy-service-manager #tasks-list .task-input{
width:100%; padding:6px 8px; border:1px solid #cbd5e1; border-radius:8px;
}
#hilucy-service-manager #tasks-list li:last-child {
border-bottom: none;
}
#hilucy-service-manager #tasks-list .tasks-skeleton {
padding: 4px 0;
}
#hilucy-service-manager #tasks-list .tasks-skeleton-row {
display: flex;
gap: 8px;
margin: 8px 0;
}
#hilucy-service-manager #tasks-list .tasks-skeleton-row .sk {
display: inline-block;
height: 10px;
border-radius: 8px;
background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
animation: sm-shimmer 1.1s ease-in-out infinite;
}
#hilucy-service-manager #tasks-list .tasks-skeleton-row .sk-sm { width: 18%; }
#hilucy-service-manager #tasks-list .tasks-skeleton-row .sk-md { width: 32%; }
#hilucy-service-manager #tasks-list .tasks-skeleton-row .sk-lg { width: 48%; }
#hilucy-service-manager #tasks-list .tasks-skeleton-row .sk-xs { width: 12%; }
/* Inline task peek slider */
#hilucy-service-manager .task-peek{
position:relative;
max-width:220px;
min-width:140px;
margin-right: 6px;
}
#hilucy-service-manager .task-peek__card{
position:relative;
background: linear-gradient(135deg, #ffffff 0%, #f9fbfd 100%);
border:1px solid #e5e7eb;
border-radius:12px;
padding:12px;
min-height:110px;
box-shadow:0 10px 26px rgba(15,23,42,0.08);
cursor:pointer;
transition:transform .15s ease, box-shadow .15s ease;
}
#hilucy-service-manager .task-peek__card:hover{
transform:translateY(-1px);
box-shadow:0 16px 30px rgba(15,23,42,0.12);
}
#hilucy-service-manager .task-peek__card.is-empty{
background:linear-gradient(135deg, #f8fbff 0%, #fff 100%);
border-style:dashed;
}
#hilucy-service-manager .task-peek__top{
display:flex;
align-items:center;
gap:6px;
margin-bottom:6px;
}
#hilucy-service-manager .task-peek__eyebrow{
text-transform:uppercase;
letter-spacing:0.06em;
font-weight:700;
font-size:12px;
color:#374151;
}
#hilucy-service-manager .task-peek__top-actions{
margin-left:auto;
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
justify-content:flex-end;
}
#hilucy-service-manager .task-peek__top .type-badge{
padding: 0.15em 0.4em;
font-size: 0.76rem;
letter-spacing: 0.08em;
background: transparent;
border: none;
color: #475569;
box-shadow: none;
}
#hilucy-service-manager .task-peek__top .type-badge:hover{
background: transparent;
border: none;
color: #0f172a;
}
#hilucy-service-manager .task-peek__badge{
display:inline-block;
min-width:20px;
padding:2px 6px;
background:#14b8f0;
color:#ffffff;
border-radius:999px;
font-weight:700;
font-size:12px;
}
#hilucy-service-manager .task-peek__title{
margin:0 0 6px;
color:#1f2937;
font-weight:700;
font-size:15px;
line-height:1.2;
text-transform: capitalize;
}
#hilucy-service-manager .task-peek__note{
margin:0 0 16px;
color:#4b5563;
font-size:13px;
line-height:1.45;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
}
#hilucy-service-manager .task-peek__nav{
position:absolute;
inset:0;
display:block;
pointer-events:none;
}
#hilucy-service-manager .task-peek__btn{
position:absolute;
top:50%;
transform:translateY(-50%);
width:24px;
height:24px;
border-radius:8px;
border:1px solid #e5e7eb;
background:#ffffff;
color:#374151;
cursor:pointer;
display:grid;
place-items:center;
box-shadow:0 8px 18px rgba(55,65,81,0.12);
transition:box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
pointer-events:auto;
will-change: box-shadow, background, color, border-color;
}
#hilucy-service-manager .task-peek__btn.prev{
left:-14px;
}
#hilucy-service-manager .task-peek__btn.next{
right:-12px;
}
#hilucy-service-manager .task-peek__btn:hover{
box-shadow:0 10px 18px rgba(55,65,81,0.16);
background:#f3f4f6;
color:#0f172a;
border-color:#d5d8dc;
}
#hilucy-service-manager .task-peek__counter{
font-weight:600;
font-size:12px;
color:#6b7280;
position:absolute;
right:10px;
bottom:8px;
background:transparent;
border:0;
border-radius:10px;
padding:0 2px;
box-shadow:none;
pointer-events:auto;
}
@media (max-width: 1024px){
#hilucy-service-manager .task-peek{
max-width:none;
}
}
@keyframes sm-shimmer {
0% { opacity: 0.7; transform: translateX(-6px); }
50% { opacity: 1; transform: translateX(6px); }
100% { opacity: 0.7; transform: translateX(-6px); }
}
/* ─── Task Form ────────────────────────────────────────────────────────── */
#hilucy-service-manager #add-task-form input,
#hilucy-service-manager #add-task-form textarea {
width: 100%;
padding: 0.5em;
margin-bottom: 0.75em;
border: 1px solid #ccc;
border-radius: 0.375rem;
font-size: 0.95rem;
}
#hilucy-service-manager #add-task-form .task-due-control{
display:flex; align-items:center; gap:10px;
padding:10px 12px; margin-bottom:6px;
border:1px solid #cbd5e1; border-radius:10px;
background:#fff;
}
#hilucy-service-manager #add-task-form .task-due-icon{
color:#0f172a; opacity:0.55; font-size:15px;
}
#hilucy-service-manager #add-task-form .task-due-control input{
border:0; padding:0; margin:0; width:100%;
font-size:0.95rem; box-shadow:none;
}
#hilucy-service-manager #add-task-form .task-due-control input:focus{
outline:none;
}
#hilucy-service-manager #add-task-form .task-due-hint{
display:block; margin:-4px 0 10px; color:#6b7280; font-size:12px;
}
#hilucy-service-manager #add-task-form button {
background: #0073aa;
color: #fff;
border: none;
padding: 0.5em 1em;
border-radius: 0.375rem;
cursor: pointer;
}
#hilucy-service-manager #add-task-form button:hover {
background: #005f8d;
}
/* ─── Payment Form ─────────────────────────────────────────────── */
#hilucy-service-manager #add-payment-form input,
#hilucy-service-manager #add-payment-form select {
width: 100%;
padding: 0.5em;
border: 1px solid #ccc;
border-radius: 0.375rem;
font-size: 0.95rem;
}
#hilucy-service-manager button#toggle-add-payment {
margin: 15px 0 0 0;
white-space: nowrap;
}
#hilucy-service-manager #add-payment-form button {
background: #0073aa;
color: #fff;
border: none;
padding: 0.5em 1em;
border-radius: 0.375rem;
cursor: pointer;
}
#hilucy-service-manager #add-payment-form button:hover {
background: #005f8d;
}
input.sr-select {
height: 20px !important;
width: 20px !important;
margin: 0 10px 0 0 !important;
}
span.fa.fa-message {
font-size: 16px;
}
/* center the cell contents */
td[data-label="ID"] {
text-align: center;
vertical-align: middle;
}
/* the grey circle around the number */
.id-circle {
display: inline-block;
width: 32px;
height: 32px;
line-height: 32px;
background-color: #f0f0f0;
border-radius: 50%;
font-weight: bold;
color: #333;
}
.fc .fc-daygrid-day-top {
display: block !important;
}
/* .dashicons-admin-page:before {
content: "\f105";
font-size: 14px;
} */
/* the hidden “drawer” */
.mobile-event-panel {
position: fixed;
top: 0; left: 0; right: 0;
transform: translateY(-100%);
background: #fff;
border-bottom: 1px solid #ddd;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
z-index: 10000;
max-height: 40vh;
overflow-y: auto;
transition: transform 0.3s ease;
}
.mobile-event-panel.active {
transform: translateY(0);
}
.mobile-event-close {
position: absolute;
top: 0.25em; right: 0.5em;
background: none;
border: none;
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
}
.mobile-event-content {
padding: 1.5em 2em 1em;
font-size: .9rem;
}
/* when the drawer is open, push the calendar down */
.mobile-event-panel.active ~ #rental-calendar {
margin-top: 40vh;
transition: margin-top 0.3s ease;
}
/* ─── If WP admin bar is showing, push everything down ───────────────── */
@media (min-width: 1200px){
body.admin-bar .mobile-event-panel {
top: 32px;
}
}
/* ─── Responsive mobile cards (only Service, Inventory & Clients) ─── */
@media (max-width: 600px) {
button.fc-resourceTimelineWeek-button.fc-button.fc-button-primary {
display: none;
}
button.fc-today-button.fc-button.fc-button-primary {
display: none;
}
tr.sr-separator {
display: none !important;
}
#rental-calendar .fc-dayGridMonth-view .fc-scrollgrid .fc-scrollgrid-sync-table {
width: 100% !important;
table-layout: fixed;
}
#c27-site-wrapper {
overflow: hidden !important;
}
#rental-calendar {
overflow: auto;
}
#inventory-table th {
min-width: 70px;
}
#panel-service thead
{
display: none;
}
/* Hide filters & headers in those 3 panels */
#panel-clients thead {
display: none;
}
#panel-service .filters {
margin: 0 0 25px 0;
}
/* Turn just those panels’ tables/tbodies into blocks */
#panel-service table,
#panel-service tbody,
#panel-clients table,
#panel-clients tbody {
display: block;
}
/* Card-style rows in those panels */
#panel-service tbody tr,
#panel-clients tbody tr {
display: flex ;
flex-direction: column;
margin-bottom: 1.6em;
padding: 1.5em;
border: 3px solid #d1cfcf75;
border-radius: 22px;
box-shadow: rgb(99 99 99 / 37%) 0px 2px 8px -3px;
}
/* Controls column tweaks in those panels */
#panel-service td.controls,
#panel-clients td.controls {
overflow-x: auto;
margin: 30px 0 0 0;
order: 9;
}
#panel-service td.controls .sr-select,
#panel-clients td.controls .sr-select {
display: none !important;
}
#panel-service td.controls::before,
#panel-clients td.controls::before {
content: none !important;
}
/* Labelled | s become flex rows in those panels */
#panel-service tbody td,
#panel-clients tbody td {
display: flex;
justify-content: space-between;
align-items: center;
padding: .5em 0;
border: none;
}
#panel-service tbody td::before,
#panel-clients tbody td::before {
content: attr(data-label) ": ";
font-weight: bold;
margin-right: .5em;
}
/* Push the “Name” cell to the bottom */
#panel-service tbody td[data-label="Name"],
#panel-clients tbody td[data-label="Name"] {
order: -1;
margin-top: 1em;
}
/* Keep your modals reverting to table-row layout */
.modal .content td::before { display: none; }
.modal .content tr { display: table-row-group; }
}
/* ─── List-view full table overrides on small screens ───────────────── */
@media (max-width: 600px) {
/* keep your filters still flex */
#panel-service.list-view .filters {
display: flex;
}
/* Card-style rows in those panels */
#panel-service.list-view tbody tr,
#panel-clients.list-view tbody tr {
background: white;
}
/* force the whole table back to normal table layout */
#panel-service.list-view table {
display: table !important;
width: 100% !important;
table-layout: auto !important;
}
#panel-service.list-view thead {
display: table-header-group !important;
}
#panel-service.list-view tbody {
display: table-row-group !important;
}
#panel-service.list-view tbody td::before,
#panel-clients.list-view tbody td::before {
display: none;
}
/* every row is a real table-row */
#panel-service.list-view tr {
display: table-row !important;
margin: 0 !important;
padding: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
}
/* bring back your date-separator rows */
#panel-service.list-view tr.sr-separator {
display: table-row !important;
}
#panel-service.list-view tr.sr-separator td {
display: table-cell !important;
/* colspan will auto-stretch across */
}
/* all cells are true table-cells again */
#panel-service.list-view th,
#panel-service.list-view td {
display: table-cell !important;
padding: 0.75em !important;
border-bottom: 1px solid #eee !important;
vertical-align: middle !important;
}
/* your controls column can still flex-center any buttons */
#panel-service.list-view td.controls {
padding: 0.5em !important;
text-align: center !important;
}
#panel-service.list-view td.controls .controls-inner {
display: grid !important;
grid-template-columns: repeat(2, auto);
justify-content: center;
align-items: center;
}
}
/* ─── View toggle button ───────────────────────────────────────────────── */
#toggle-view { display: none; }
@media (max-width: 600px) {
#toggle-view {
position: fixed;
right: 1rem;
bottom: 1rem;
font-size: 24px;
z-index: 9;
display: block;
background: #272727e0 !important;
color: white !important;
background: none;
border: 1px solid #ccc;
border-radius: 4px;
padding: 0.25em 0.5em;
cursor: pointer;
}
#toggle-view i { pointer-events: none; }
}
/* make the whole controls cell a centered flex row */
td.controls {
padding: 0.5em;
text-align: center; /* fallback if flex fails */
}
.controls-inner {
display: grid;
grid-template-columns: repeat(2, auto);
align-items: center;
justify-content: center;
padding: 10px;
gap: 0.5em;
}
/* WhatsApp toggle styling (same as before) */
.ctrl-whatsapp {
position: relative;
display: inline-block;
width: 40px;
height: 20px;
}
.ctrl-whatsapp input {
opacity: 0;
width: 0; height: 0;
}
.ctrl-whatsapp .slider {
position: absolute;
cursor: pointer;
inset: 0;
background-color: #ccc;
transition: .3s;
border-radius: 20px;
}
.ctrl-whatsapp .slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 2px; bottom: 2px;
background: #fff;
border-radius: 50%;
transition: .3s;
}
.ctrl-whatsapp input:checked + .slider {
background-color: #25D366; /* WhatsApp green */
}
.ctrl-whatsapp input:checked + .slider:before {
transform: translateX(20px);
}
/* button reset + sizing */
.controls-inner button {
background: none;
border: none;
padding: 4px;
cursor: pointer;
font-size: 1.2em;
line-height: 1;
}
/* delete icon red */
.btn-delete .dashicons-trash { color: #dc3545; }
.btn-assign .dashicons-admin-users { color: #0073aa; }
/* spacing tweak for the final checkbox */
.sr-select {
width: 16px;
height: 16px;
}
/* color swatch for inventory rows */
#hilucy-service-manager .inventory-color {
display: inline-block;
width: 12px;
height: 12px;
margin-right: 0.4em;
padding: 0;
border-radius: 3px;
}
.calendar-container {
position: relative;
width: 100%;
height: 60vh;
overflow: hidden;
}
.calendar-container.fullscreen {
position: fixed; top: 0; left: 0;
width: 100vw; height: 100vh;
z-index: 9999; background: #fff;
}
#rental-calendar {
width: 100%; height: 100%;
overflow: auto; touch-action: pan-x pan-y;
-webkit-overflow-scrolling: touch;
}
#rental-calendar .fc-scroller,
#rental-calendar .fc-scroller-harness {
overflow: visible !important;
}
.btn-fullscreen {
position: absolute;
top: .5em;
right: 0.75em;
background: rgb(7 7 7 / 51%);
color: #fff;
border: none;
border-radius: 4px;
padding: .25em .5em;
font-size: 1.0rem;
z-index: 10000;
cursor: pointer;
}
/* bulk action bar */
#bulk-action-bar {
position: fixed;
bottom: 30px;
right: 20px;
background: #00000066;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
border-radius: 6px;
padding: 0.5em;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
display: none;
gap: 0.5em;
z-index: 10000;
}
#bulk-action-bar.active { display: flex; align-items: center; }
#bulk-action-bar button {
background: none;
border: none;
padding: 4px;
cursor: pointer;
font-size: 1.2em;
line-height: 1;
}
/* make the history popup sit just under the details popup */
#requests-modal {
z-index: 9999; /* history backdrop + modal */
}
#requests-modal .content {
z-index: 10000; /* history panel itself */
}
#requests-modal .modal__header {
margin-bottom: 0.75rem;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
}
#requests-modal .modal__title {
margin: 0.1rem 0;
font: 600 18px/1.3 system-ui, Segoe UI, Roboto, sans-serif;
}
#requests-modal .modal__subtitle {
margin: 0;
color: #4b5563;
font-size: 14px;
}
#requests-modal .modal__eyebrow {
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 700;
font-size: 12px;
color: #0f2d57;
margin: 0 0 2px;
}
#requests-modal .requests-meta {
display: flex;
align-items: center;
gap: 0.5rem;
color: #374151;
}
#requests-modal .requests-count strong {
font-size: 18px;
}
#requests-modal .requests-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 0.25rem 0;
}
#requests-modal .request-card {
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 0.85rem 1rem;
background: #f9fafb;
box-shadow: 0 6px 16px rgba(16,63,145,0.06);
}
#requests-modal .request-head {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: center;
margin-bottom: 0.35rem;
}
#requests-modal .request-title {
margin: 0;
font-weight: 700;
color: #111827;
}
#requests-modal .request-meta {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
color: #4b5563;
font-size: 13px;
}
#requests-modal .request-tags {
display: inline-flex;
gap: 0.35rem;
flex-wrap: wrap;
}
#requests-modal .status-badge {
display: inline-block;
padding: 0.25rem 0.6rem;
border-radius: 999px;
font-weight: 700;
font-size: 12px;
text-transform: capitalize;
}
#requests-modal .status--pending { background: #fef3c7; color: #92400e; }
#requests-modal .status--in_progress { background: #e0f2fe; color: #075985; }
#requests-modal .status--completed { background: #dcfce7; color: #065f46; }
#requests-modal .status--default { background: #e5e7eb; color: #374151; }
#requests-modal .request-footer {
display: flex;
justify-content: flex-end;
}
#requests-modal .request-footer .btn-details {
border: 1px solid #d1d5db;
border-radius: 8px;
padding: 0.35rem 0.75rem;
background: #fff;
cursor: pointer;
}
#requests-modal .request-footer .btn-details:hover {
background: #f3f4f6;
}
#requests-modal .requests-empty {
text-align: center;
color: #6b7280;
padding: 0.75rem;
border: 1px dashed #e5e7eb;
border-radius: 10px;
}
#requests-modal .requests-skeleton {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
#requests-modal .requests-skeleton .sk-card {
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 0.85rem 1rem;
background: #fff;
}
#requests-modal .requests-skeleton .sk {
display: inline-block;
height: 10px;
border-radius: 8px;
background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
animation: sm-shimmer 1.1s ease-in-out infinite;
}
#requests-modal .requests-skeleton .row-1 { width: 32%; height: 14px; }
#requests-modal .requests-skeleton .row-2 { width: 45%; }
#requests-modal .requests-skeleton .row-3 { width: 68%; }
/* bump the details popup above it */
#details-modal {
z-index: 10001;
}
#details-modal .content {
z-index: 10002;
}
/* ── Payments modal polish ─────────────────────────────────────────────── */
#payments-modal .modal__header {
margin-bottom: .5rem;
}
#payments-modal .modal__title {
margin: 0;
font: 600 18px/1.2 system-ui, Segoe UI, Roboto, sans-serif;
color: var(--hl-text);
}
#payments-modal .modal__subtitle {
margin: .25rem 0 0;
color: var(--hl-muted);
font: 400 14px/1.5 system-ui, Segoe UI, Roboto, sans-serif;
}
#payments-modal .modal__body { margin: .5rem 0 1rem; }
#payments-modal .modal__form {
background: #fff;
border: 1px solid #eee;
border-radius: 10px;
padding: 12px;
margin-top: 6px;
}
#payments-modal .form-grid { display: grid; gap: 10px; }
@media (min-width: 520px){
#payments-modal .form-grid { grid-template-columns: 1fr 1fr; }
}
#payments-modal .field label {
display: block;
font: 600 13px/1.2 system-ui, Segoe UI, Roboto, sans-serif;
color: #374151;
margin-bottom: 4px;
}
#payments-modal .hint { color: var(--hl-muted); font-weight: 500; }
#payments-modal .input-with-prefix{
display:flex; align-items:center; gap:6px;
border:1px solid #e5e7eb; border-radius:10px; padding:8px 10px; background:#fff;
}
#payments-modal .input-with-prefix .prefix { opacity:.7; }
#payments-modal .input-with-prefix input{
border:0; outline:none; width:100%;
font:400 15px/1.3 system-ui, Segoe UI, Roboto, sans-serif;
}
#payments-modal .modal__actions{
display:flex; gap:10px; justify-content:flex-end; margin-top:20px;
}
#payments-modal .form-help{
margin:10px 2px 0; font-size:12px; color:var(--hl-muted);
}
/* Inputs theme if modal is rendered outside #hilucy-service-manager */
#payments-modal input[type="text"],
#payments-modal input[type="number"],
#payments-modal select{
width:100%; border:1px solid #e5e7eb; border-radius:10px;
padding:10px 12px; font:400 15px/1.3 system-ui, Segoe UI, Roboto, sans-serif;
background:#fff; color:var(--hl-text);
}
#payments-modal input:focus,
#payments-modal select:focus{
outline:none; border-color:var(--hl-primary-600);
box-shadow:0 0 0 3px rgba(3,169,240,.25);
}
/* Button theme */
#payments-modal .btn{
font:500 15px/1 system-ui, Segoe UI, Roboto, sans-serif;
padding:10px 14px; border-radius:10px; border:1px solid transparent; cursor:pointer;
}
#payments-modal .btn-primary{ background:var(--hl-primary); border-color:var(--hl-primary-600); color:#fff; }
#payments-modal .btn-primary:hover{ filter:brightness(.95); }
#payments-modal .btn-secondary{ background:#fff; border-color:#e5e7eb; color:var(--hl-text); }
#payments-modal .btn-secondary:hover{ background:#f9fafb; }
/* Sticky header inside scrollable content */
#payments-modal .modal__header--sticky{
position:sticky; top:0; z-index:2; background:#fff; padding-bottom:.5rem;
}
#payments-modal .content.scrolled .modal__header--sticky{
box-shadow:0 1px 0 rgba(0,0,0,.06);
}
/* Keep header layout tidy with action on the right */
#payments-modal .modal__header.has-action{
display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
}
/* Table alignment (amounts right, keep due on one line) */
#payments-modal .manual-payments-table td.num,
#payments-modal .manual-payments-table th:nth-child(2){ text-align:right; font-variant-numeric:tabular-nums; }
#payments-modal .manual-payments-table td:first-child{ white-space:nowrap; }
/* Status chips */
#payments-modal .status-badge{
display:inline-block; padding:.22rem .5rem; border-radius:.5rem;
font-weight:700; font-size:.8rem; text-transform:capitalize;
}
#payments-modal .status--pending { background:#fef3c7; color:#92400e; }
#payments-modal .status--estimated { background:#e0f2fe; color:#075985; }
#payments-modal .status--confirmed { background:#dcfce7; color:#065f46; }
/* A11y helper so can exist without showing */
#payments-modal .visually-hidden{
position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* Readable payments table */
#payments-modal .manual-payments-table.readable{
table-layout:fixed; width:100%;
border:1px solid #e5e7eb; border-radius:10px; overflow:hidden;
font-size:14px;
}
#payments-modal .manual-payments-table.readable thead th{
position:sticky; top:0; z-index:1; background:#fff; box-shadow:inset 0 -1px 0 #eee;
}
#payments-modal .manual-payments-table.readable th,
#payments-modal .manual-payments-table.readable td{ padding:10px 12px; }
/* Zebra + hover */
#payments-modal .manual-payments-table.readable tbody tr:nth-child(even){ background:#fafafa; }
#payments-modal .manual-payments-table.readable tbody tr:hover{ background:#eef6ff; }
/* Row states */
#payments-modal .manual-payments-table.readable tr.is-overdue{ background:#fff1f2; }
#payments-modal .manual-payments-table.readable tr.is-soon { background:#fffbeb; }
#payments-modal .manual-payments-table.readable tr.is-overdue .due{ font-weight:700; color:#b91c1c; }
/* Notes clamp */
#payments-modal .manual-payments-table.readable td.notes{
white-space:normal; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
/* Footer total row */
#payments-modal .manual-payments-table.readable tfoot td{
background:#f9fafb; font-weight:700; border-top:1px solid #e5e7eb;
}
#payments-modal .manual-payments-table.readable .tf-label{ text-align:right; }
#payments-modal .manual-payments-table.readable .tf-value{ font-size:15px; }
/* Horizontal scroll wrapper for wide tables */
#payments-modal .table-scroll-x{
overflow-x:auto; overflow-y:visible; -webkit-overflow-scrolling:touch; max-width:100%;
mask-image:linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
/* Force no-wrap layout so horizontal scroll appears */
#payments-modal .manual-payments-table.no-wrap{
white-space:nowrap; min-width:820px; table-layout:fixed;
}
/* ── Sticky footer summary (new) ───────────────────────────────────────── */
#payments-modal .modal__footer{
position:sticky; bottom:0; z-index:2;
display:flex; align-items:center; justify-content:space-between; gap:12px;
padding:8px 12px; background:#fff; border-top:1px solid #e5e7eb; box-shadow:0 -1px 0 rgba(0,0,0,.04);
}
#payments-modal .payments-summary{ display:flex; flex-wrap:wrap; gap:.5rem .75rem; }
#payments-modal .ps-item{
display:inline-flex; gap:.4rem; align-items:baseline;
padding:.25rem .5rem; border:1px solid #e5e7eb; border-radius:999px; background:#f9fafb;
}
#payments-modal .ps-label{ color:#6b7280; font-weight:600; font-size:.85em; }
#payments-modal .ps-value{ font-weight:700; font-variant-numeric:tabular-nums; }
/* Hide the old header KPIs if they exist */
#payments-modal .modal__header .modal__meta{ display:none !important; }
/* --- Section spacing & headings --- */
#payments-modal .modal__body h4{
font: 700 16px/1.25 system-ui, Segoe UI, Roboto, sans-serif;
margin: 14px 0 8px;
}
#payments-modal .modal__body h4:not(:first-of-type){
padding-top: 10px;
border-top: 1px solid #e5e7eb; /* visual separator between Orders and Scheduled */
}
/* make the body naturally add space between blocks */
#payments-modal .modal__body > * + *{
margin-top: 6px;
}
/* --- Orders table: match readable style --- */
#payments-modal .orders-table{
width: 100%;
border: 1px solid #e5e7eb;
border-radius: 10px;
border-collapse: separate; /* keep radius */
border-spacing: 0;
overflow: hidden;
font-size: 14px;
background: #fff;
}
#payments-modal .orders-table thead th{
position: sticky;
top: 0;
z-index: 1;
background: #fff;
box-shadow: inset 0 -1px 0 #eee;
}
#payments-modal .orders-table th,
#payments-modal .orders-table td{
padding: 10px 12px;
border-bottom: 1px solid #f1f5f9;
}
#payments-modal .orders-table tbody tr:nth-child(even){ background:#fafafa; }
#payments-modal .orders-table tbody tr:hover{ background:#eef6ff; }
/* align the money column */
#payments-modal .orders-table th:nth-child(3),
#payments-modal .orders-table td:nth-child(3){
text-align: right;
font-variant-numeric: tabular-nums;
}
/* tone down the status cell a bit */
#payments-modal .orders-table td:last-child{
color:#374151;
text-transform: capitalize;
}
/* --- Scheduled table tweaks --- */
#payments-modal .table-scroll-x{
overflow-x: auto;
overflow-y: visible;
-webkit-overflow-scrolling: touch;
max-width: 100%;
/* remove the fade mask so text doesn't look clipped */
mask-image: none;
}
#payments-modal .manual-payments-table.readable{
margin-top: 6px; /* tiny space under the H4 */
}
/* footer spacing polish */
#payments-modal .modal__footer{
margin-top: 8px;
}
/* Inline toast for save feedback */
#payments-modal .payments-toast{
display:flex; align-items:center; gap:8px;
padding:10px 12px; margin:4px 0 10px;
border:1px solid #bbf7d0; border-radius:10px;
background:#ecfdf3; color:#166534;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
opacity:0; transform:translateY(-6px);
transition:opacity .2s ease, transform .2s ease;
}
#payments-modal .payments-toast .dot{
width:10px; height:10px; border-radius:50%;
background:#22c55e; box-shadow:0 0 0 6px rgba(34,197,94,.12);
flex-shrink:0;
}
#payments-modal .payments-toast.visible{
opacity:1; transform:translateY(0);
}
#payments-modal .payments-toast.fade-out{
opacity:0; transform:translateY(-6px);
}
/* Lightweight shimmer for fast-loading payment modal */
.pay-skeleton{
border:1px solid #e5e7eb;
border-radius:10px;
padding:12px;
position:relative;
overflow:hidden;
background:#fff;
color:#6b7280;
}
.pay-skeleton .shimmer{
position:absolute; inset:0;
background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 45%, rgba(255,255,255,0) 90%);
transform:translateX(-100%);
animation: payShimmer 1s linear infinite;
}
.pay-error{
padding:12px;
border:1px solid #fecdd3;
background:#fff1f2;
color:#9f1239;
border-radius:10px;
}
@keyframes payShimmer{
to{ transform:translateX(100%); }
}
/* Payments dashboard (tab) */
#panel-payments .paydash-hero{
display:flex;
flex-wrap:wrap;
gap:14px;
justify-content:space-between;
align-items:center;
padding:20px;
border:1px solid rgba(12, 47, 73, 0.08);
border-radius:16px;
background: linear-gradient(135deg, #e6f7ff 0%, #c9ecff 45%, #a9def8 100%);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
margin-bottom:14px;
}
#panel-payments .paydash-copy{ max-width:520px; }
#panel-payments .paydash-eyebrow{
margin:0; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#0b5a87; font-weight:700;
}
#panel-payments .paydash-title{ margin:4px 0; font-size:22px; color:#0f172a; }
#panel-payments .paydash-lede{ margin:0; color:#0c304a; font-weight:500; }
#panel-payments .paydash-stats{
display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; flex:1;
}
#panel-payments .paydash-stat{
background: rgba(255,255,255,0.9); border:1px solid rgba(15, 156, 214, 0.18); border-radius:12px; padding:12px;
min-width:140px; box-shadow:0 8px 16px rgba(0,0,0,0.06);
}
#panel-payments .paydash-stat p{ margin:0; color:#0b5a87; font-weight:700; font-size:12px; letter-spacing:0.02em; }
#panel-payments .paydash-stat strong{ display:block; font-size:24px; margin:4px 0 2px; color:#0f172a; }
#panel-payments .paydash-stat small{ color:#0c304a; }
#panel-payments .paydash-filters{
display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin:14px 0;
align-items:flex-end;
}
#panel-payments .pay-field label{ display:block; font-weight:600; margin-bottom:6px; color:#374151; }
#panel-payments .pay-field input,
#panel-payments .pay-field select{
width:100%; border:1px solid #e5e7eb; border-radius:10px; padding:9px 10px;
font: 400 14px/1.3 system-ui, Segoe UI, Roboto, sans-serif;
}
#panel-payments .pay-field input:focus,
#panel-payments .pay-field select:focus{
outline:none; border-color:var(--hl-primary-600); box-shadow:0 0 0 3px rgba(3,169,240,.18);
}
#panel-payments .pay-field--range .pay-range{ display:flex; gap:8px; }
#panel-payments .paydash-layout{
display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:14px;
}
#panel-payments .paydash-card{
background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:14px;
box-shadow:0 1px 0 rgba(0,0,0,.02);
}
#panel-payments .paydash-card__header{
display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px;
}
#panel-payments .paydash-pill{
display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px;
border:1px solid rgba(15, 156, 214, 0.25); background:#fff; font-weight:700; color:#0b5a87; font-size:12px;
}
#panel-payments .paydash-pill--muted{ background:#f9fafb; color:#6b7280; }
#panel-payments .paydash-table{ width:100%; border-collapse:collapse; }
#panel-payments .paydash-table th,
#panel-payments .paydash-table td{
padding:9px 8px; border-bottom:1px solid #eef2f7; text-align:left;
}
#panel-payments .paydash-table th:nth-child(3),
#panel-payments .paydash-table td:nth-child(3){
text-align:right; font-variant-numeric:tabular-nums;
}
#panel-payments .paydash-table td .status-badge{ margin:0; }
#panel-payments .paydash-primary{ font-weight:700; }
#panel-payments .paydash-meta{ color:#6b7280; font-size:12px; }
#panel-payments .paydash-chip{
display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:999px;
font-size:12px; font-weight:700; margin-top:4px;
}
#panel-payments .paydash-chip--in{ background:#ecfdf3; color:#065f46; }
#panel-payments .paydash-chip--out{ background:#fef3c7; color:#92400e; }
#panel-payments .paydash-empty{ padding:10px; color:#6b7280; font-style:italic; }
#panel-payments .paydash-calendar{
margin-top:14px; background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:14px;
}
#panel-payments .paydash-calendar__grid{ margin-top:10px; }
#panel-payments .paydash-muted{ color:#9ca3af; }
#panel-payments .paydash-table td.num{ text-align:right; font-variant-numeric:tabular-nums; }
#panel-payments .status-badge{
display:inline-block; padding:.22rem .5rem; border-radius:.5rem;
font-weight:700; font-size:.8rem; text-transform:capitalize;
}
#panel-payments .status--pending{ background:#fef3c7; color:#92400e; }
#panel-payments .status--estimated{ background:#e0f2fe; color:#075985; }
#panel-payments .status--confirmed,
#panel-payments .status--paid{ background:#dcfce7; color:#065f46; }
#panel-payments .fc-event{
padding:4px 6px;
border-radius:8px;
font-weight:700;
box-shadow:0 2px 6px rgba(0,0,0,0.12);
}
#panel-payments .fc-event.payable{
background:#ffe8cc;
border-color:#f59e0b;
color:#7a2e0e;
}
#panel-payments .fc-event.payable .fc-event-title{ color:#7a2e0e; }
#panel-payments .fc-event.receivable{
background:#e0f7ff;
border-color:#0ea5e9;
color:#0b4f6c;
}
#panel-payments .fc-event.receivable .fc-event-title{ color:#0b4f6c; }
#panel-payments .fc .fc-daygrid-event{
white-space: normal;
}
#panel-payments .fc .fc-daygrid-event .fc-event-main{
font-weight:700;
font-size:13px;
white-space: normal;
overflow: visible;
}
#panel-payments .paydash-overlay{
position:fixed; inset:0; background:rgba(15,23,42,0.35); backdrop-filter:blur(2px); z-index:20;
}
#panel-payments .paydash-event{
position:fixed; left:50%; top:60px; transform:translateX(-50%);
width: min(480px, 94vw);
background:#fff; border:1px solid #e5e7eb; border-radius:16px;
box-shadow:0 20px 40px rgba(0,0,0,0.18);
padding:16px; z-index:30;
}
#panel-payments .paydash-event__header{
display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
border-bottom:1px solid #f1f5f9; padding-bottom:8px; margin-bottom:8px;
}
#panel-payments .paydash-event__title{ margin:2px 0 0; font-size:18px; }
#panel-payments .paydash-event__body{
display:grid; gap:8px;
}
#panel-payments .paydash-row{
display:flex; justify-content:space-between; gap:12px;
padding:8px 10px; border:1px solid #e5e7eb; border-radius:10px; background:#f9fafb;
}
#panel-payments .paydash-row strong{ display:block; color:#0f172a; }
#panel-payments .paydash-row span{ color:#4b5563; }
#panel-payments .paydash-close{
border:0; background:transparent; font-size:20px; cursor:pointer; color:#6b7280;
}
#panel-payments .paydash-actions{ display:flex; gap:8px; flex-wrap:wrap; }
#panel-payments .paydash-pill-link{
padding:6px 10px; border:1px solid #e5e7eb; border-radius:999px; background:#fff; color:#0b5a87; text-decoration:none;
}
@media (max-width: 720px){
#panel-payments .paydash-event{ top:auto; bottom:12px; transform:none; left:50%; translate:-50% 0; }
}
@media (max-width: 720px){
#panel-payments .paydash-hero{ padding:12px; }
#panel-payments .paydash-card{ padding:12px; }
}
/* Staff user picker */
#staff-modal .staff-user-picker{
position: relative;
display: grid;
gap: 8px;
}
#staff-modal .staff-user-input{
display: flex;
align-items: center;
gap: 8px;
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 8px 10px;
background: #fff;
}
#staff-modal .staff-user-input:focus-within{
border-color: var(--hl-primary-600);
box-shadow: 0 0 0 3px rgba(3,169,240,.25);
}
#staff-modal .staff-user-input .dashicons{
color: var(--hl-muted);
font-size: 18px;
}
#staff-modal #staff-user-search{
border: 0;
outline: none;
padding: 0;
margin: 0;
font: 400 15px/1.3 system-ui,Segoe UI,Roboto,sans-serif;
background: transparent;
color: var(--hl-text);
width: 100%;
}
#staff-modal .staff-user-clear{
border: 0;
background: transparent;
color: var(--hl-muted);
font-size: 18px;
line-height: 1;
cursor: pointer;
}
#staff-modal .staff-user-preview{
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 10px 12px;
background: #f8fafc;
}
#staff-modal .staff-user-name{
font-weight: 600;
color: var(--hl-text);
}
#staff-modal .staff-user-meta{
font-size: 12px;
color: var(--hl-muted);
margin-top: 2px;
}
#staff-modal .staff-user-results{
position: absolute;
left: 0;
right: 0;
top: calc(100% + 6px);
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 10px;
box-shadow: 0 10px 24px rgba(15,23,42,.12);
max-height: 220px;
overflow: auto;
display: none;
z-index: 20;
}
#staff-modal .staff-user-results.is-open{
display: block;
}
#staff-modal .staff-user-result{
width: 100%;
text-align: left;
border: 0;
background: #fff;
padding: 10px 12px;
cursor: pointer;
}
#staff-modal .staff-user-result + .staff-user-result{
border-top: 1px solid #f1f5f9;
}
#staff-modal .staff-user-result:hover{
background: #f8fafc;
}
#staff-modal .staff-user-empty{
padding: 10px 12px;
color: var(--hl-muted);
font-size: 13px;
}
#staff-modal .btn.is-busy{ opacity:.7; cursor:progress; }
#staff-modal .staff-schedule-rows{
display:flex;
flex-direction:column;
gap:12px;
}
#staff-modal .schedule-row{
display:flex;
flex-direction:column;
gap:10px;
border:1px solid #e5e7eb;
border-radius:12px;
padding:12px;
background:#fff;
box-shadow:0 1px 2px rgba(0,0,0,.06);
}
#staff-modal .schedule-day-grid{
display:flex;
flex-wrap:wrap;
gap:8px;
}
#staff-modal .schedule-day-chip{
position:relative;
display:inline-flex;
}
#staff-modal .schedule-day-chip input{
position:absolute;
inset:0;
width:100%;
height:100%;
opacity:0;
cursor:pointer;
}
#staff-modal .schedule-day-chip span{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:44px;
padding:7px 10px;
border:1px solid #e5e7eb;
border-radius:8px;
font:700 12px/1 system-ui,Segoe UI,Roboto,sans-serif;
letter-spacing:.25px;
text-transform:uppercase;
background:#f8fafc;
color:var(--hl-text);
transition:all .12s ease;
cursor:pointer;
}
#staff-modal .schedule-day-chip input:checked + span{
background:var(--hl-primary);
border-color:var(--hl-primary);
color:#fff;
box-shadow:0 0 0 2px rgba(3,169,240,.12);
}
#staff-modal .schedule-day-chip span:hover{
border-color:var(--hl-primary-600);
color:var(--hl-primary-600);
}
#staff-modal .schedule-day-chip input:focus-visible + span{
outline:2px solid var(--hl-primary);
outline-offset:1px;
}
#staff-modal .schedule-time-grid{
grid-template-columns:1fr 1fr;
align-items:end;
}
#staff-modal .schedule-row .remove-schedule-row{
align-self:flex-start;
}
@media (max-width: 640px){
#staff-modal .schedule-time-grid{ grid-template-columns:1fr; }
}
|