/* Generated production CSS, scoped to its demo module. Do not edit. */
@scope ([data-demo-module="dashboard"]) {
#pw-hrdash .pw-co-suffix { font-weight: 600; color: var(--pw-mute); font-size: 1.1rem; }
#pw-hrdash .hrdash-panel { overflow: hidden; }
#pw-hrdash .hrdash-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0 28px 22px; }
#pw-hrdash .hrdash-cal-toolbar { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#pw-hrdash .hrdash-cal-title {
color: var(--pw-ink); font-weight: 800; font-size: 0.95rem;
padding: 6px 12px; border-radius: 999px;
background: rgba(var(--pw-accent-rgb), 0.08);
border: 1px solid rgba(var(--pw-accent-rgb), 0.18);
min-width: 140px; text-align: center;
}
#pw-hrdash .hrdash-cal-nav { display: inline-flex; align-items: center; gap: 6px; }
#pw-hrdash .hrdash-iconbtn {
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 10px; border: 1px solid var(--pw-border);
background: #fff; color: var(--pw-mute);
transition: background .18s, color .18s, border-color .18s;
}
#pw-hrdash .hrdash-iconbtn:hover {
background: var(--pw-soft); color: var(--pw-accent); border-color: rgba(var(--pw-accent-rgb), 0.30);
}
#pw-hrdash .hrdash-todaybtn {
height: 36px; padding: 0 14px;
display: inline-flex; align-items: center;
border-radius: 10px; border: 1px solid var(--pw-border);
background: #fff; color: var(--pw-ink);
font-size: 0.84rem; font-weight: 700;
transition: background .18s, color .18s, border-color .18s;
}
#pw-hrdash .hrdash-todaybtn:hover {
background: rgba(var(--pw-accent-rgb), 0.06); color: var(--pw-accent);
border-color: rgba(var(--pw-accent-rgb), 0.30);
}
#pw-hrdash .hrdash-cal-wrap { padding: 0 24px 22px; }
#pw-hrdash #leave-calendar .fc { font-family: 'Inter', -apple-system, sans-serif; }
#pw-hrdash #leave-calendar .fc-scrollgrid { border-radius: 14px; overflow: hidden; border: 1px solid var(--pw-border); }
#pw-hrdash #leave-calendar .fc-col-header-cell {
background: var(--pw-soft); border-color: var(--pw-border);
color: var(--pw-mute); font-size: 0.72rem; font-weight: 800;
letter-spacing: .06em; text-transform: uppercase; padding: 10px 0;
}
#pw-hrdash #leave-calendar .fc-daygrid-day { border-color: #f1f5f9; }
#pw-hrdash #leave-calendar .fc-daygrid-day-number { color: var(--pw-ink); font-weight: 700; padding: 6px 8px; }
#pw-hrdash #leave-calendar .fc-day-today { background: rgba(var(--pw-accent-rgb), 0.06) !important; }
#pw-hrdash #leave-calendar .fc-day-today .fc-daygrid-day-number { color: var(--pw-accent); font-weight: 800; }
#pw-hrdash #leave-calendar .fc-event {
border-radius: 6px !important; border: none !important;
padding: 2px 6px !important; font-size: 11px !important; font-weight: 700;
}
#pw-hrdash .hrdash-recent-wrap { padding: 0 20px 20px; overflow-y: auto; }
#pw-hrdash .hrdash-recent-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
#pw-hrdash .hrdash-recent-row {
display: flex; align-items: flex-start; gap: 12px;
padding: 14px; border-radius: 14px;
border: 1px solid var(--pw-border);
background: linear-gradient(180deg, rgba(var(--pw-accent-rgb), 0.04) 0%, #ffffff 80%);
transition: border-color .18s, transform .18s, box-shadow .18s;
}
#pw-hrdash .hrdash-recent-row:hover {
border-color: rgba(var(--pw-accent-rgb), 0.30); transform: translateY(-1px);
box-shadow: 0 6px 18px -12px rgba(var(--pw-accent-rgb), 0.5);
}
#pw-hrdash .hrdash-recent-avatar {
width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; margin-top: 1px;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, rgba(var(--pw-accent-rgb), 0.12), rgba(var(--pw-accent-rgb), 0.22));
color: var(--pw-accent); font-weight: 800; font-size: 0.78rem; letter-spacing: .04em;
}
#pw-hrdash .hrdash-recent-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
#pw-hrdash .hrdash-recent-headline { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
#pw-hrdash .hrdash-recent-name {
color: var(--pw-ink); font-size: 0.88rem; font-weight: 700; line-height: 1.25;
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#pw-hrdash .hrdash-recent-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#pw-hrdash .hrdash-recent-desc {
margin: 0; color: var(--pw-mute); font-size: 0.78rem; line-height: 1.4;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#pw-hrdash .hrdash-tag {
display: inline-flex; align-items: center; padding: 2px 8px;
border-radius: 999px; background: rgba(var(--pw-accent-rgb), 0.10);
color: var(--pw-accent); border: 1px solid rgba(var(--pw-accent-rgb), 0.18);
font-size: 0.7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
#pw-hrdash .hrdash-recent-time { color: var(--pw-mute); font-size: 0.74rem; font-weight: 600; white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; }
#pw-hrdash .hrdash-recent-tick {
display: inline-flex; align-items: center;
padding: 1px 7px; border-radius: 999px;
background: rgba(var(--pw-accent-rgb), 0.10);
color: var(--pw-accent); border: 1px solid rgba(var(--pw-accent-rgb), 0.20);
font-size: 0.65rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
#pw-hrdash .hrdash-status {
display: inline-flex; align-items: center;
padding: 2px 8px; border-radius: 999px;
font-size: 0.7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
border: 1px solid transparent;
}
#pw-hrdash .hrdash-status--ok { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
#pw-hrdash .hrdash-status--pending { background: #fef3c7; color: #b45309; border-color: #fde68a; }
#pw-hrdash .hrdash-status--danger { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
#pw-hrdash .hrdash-status--muted { background: var(--pw-soft); color: var(--pw-mute); border-color: var(--pw-border); }
#pw-hrdash .hrdash-billing-body {
padding: 0 24px 24px;
display: flex;
flex-direction: column;
gap: 12px;
min-height: 0;
}
#pw-hrdash .hrdash-billing-card {
display: block;
text-decoration: none;
color: inherit;
padding: 16px 18px;
border-radius: 18px;
border: 1px solid rgba(var(--pw-accent-rgb), 0.16);
background: linear-gradient(180deg, rgba(var(--pw-accent-rgb), 0.07) 0%, #ffffff 100%);
transition: transform .18s, border-color .18s, box-shadow .18s;
}
#pw-hrdash .hrdash-billing-card:hover {
color: inherit;
transform: translateY(-1px);
border-color: rgba(var(--pw-accent-rgb), 0.30);
box-shadow: 0 18px 28px rgba(15, 23, 42, 0.06);
}
#pw-hrdash .hrdash-billing-card--pulse {
background: linear-gradient(180deg, rgba(14, 165, 233, 0.08) 0%, #ffffff 100%);
border-color: rgba(14, 165, 233, 0.18);
}
#pw-hrdash .hrdash-billing-card__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
#pw-hrdash .hrdash-billing-card__top > i {
color: var(--pw-mute);
font-size: 1rem;
}
#pw-hrdash .hrdash-billing-card__title {
display: flex;
align-items: flex-start;
gap: 12px;
}
#pw-hrdash .hrdash-billing-card__title strong {
display: block;
color: var(--pw-ink);
font-size: 0.9rem;
font-weight: 800;
}
#pw-hrdash .hrdash-billing-card__title span {
display: block;
margin-top: 2px;
color: var(--pw-mute);
font-size: 0.78rem;
}
#pw-hrdash .hrdash-billing-card__icon {
width: 38px;
height: 38px;
flex-shrink: 0;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(var(--pw-accent-rgb), 0.12);
color: var(--pw-accent);
font-size: 1rem;
}
#pw-hrdash .hrdash-billing-card--pulse .hrdash-billing-card__icon {
background: rgba(14, 165, 233, 0.12);
color: #0284c7;
}
#pw-hrdash .hrdash-billing-card__value {
margin-top: 14px;
color: var(--pw-ink);
font-size: 1.5rem;
font-weight: 800;
line-height: 1.05;
}
#pw-hrdash .hrdash-billing-card__meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
#pw-hrdash .hrdash-mini-pill {
display: inline-flex;
align-items: center;
padding: 4px 9px;
border-radius: 999px;
background: #fff;
border: 1px solid var(--pw-border);
color: var(--pw-mute);
font-size: 0.69rem;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
}
#pw-hrdash .hrdash-mini-pill.is-danger {
background: #fff1f2;
border-color: #fecdd3;
color: #be123c;
}
#pw-hrdash .hrdash-billing-card__hint {
margin-top: 12px;
color: var(--pw-mute);
font-size: 0.81rem;
line-height: 1.5;
}
#pw-hrdash .hrdash-billing-empty {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
border-radius: 16px;
border: 1px dashed var(--pw-border);
background: var(--pw-soft);
color: var(--pw-mute);
}
#pw-hrdash .hrdash-billing-empty i {
width: 38px;
height: 38px;
flex-shrink: 0;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(var(--pw-accent-rgb), 0.10);
color: var(--pw-accent);
font-size: 1rem;
}
#pw-hrdash .hrdash-billing-empty strong {
display: block;
color: var(--pw-ink);
font-size: 0.88rem;
margin-bottom: 2px;
}
#pw-hrdash .hrdash-billing-empty span {
display: block;
font-size: 0.8rem;
line-height: 1.5;
}
#pw-hrdash .hrdash-advance { padding: 0 24px 22px; align-items: stretch; }
#pw-hrdash .hrdash-chart-wrap {
height: 100%; min-height: 280px; padding: 14px;
border-radius: 18px; border: 1px solid var(--pw-border);
background: var(--pw-soft);
}
#pw-hrdash .hrdash-advance-kpis { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 0 !important; }
@media (max-width: 991.98px) {
#pw-hrdash .hrdash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
#pw-hrdash .hrdash-kpis { grid-template-columns: 1fr; }
#pw-hrdash .hrdash-cal-toolbar { width: 100%; justify-content: flex-start; }
}
}
@scope ([data-demo-module="leave"]) {
#pw-leave .pw-co-suffix { font-weight: 600; color: var(--pw-mute); font-size: 1.1rem; }
#pw-leave .pw-filter-form .form-label { font-weight: 700; color: var(--pw-ink); font-size: 0.82rem; margin-bottom: 6px; }
#pw-leave .pw-filter-form .form-control,
#pw-leave .pw-filter-form .form-select {
padding: 9px 14px; border-radius: 12px; border: 1px solid var(--pw-border);
font-size: 0.9rem; background: #fff; color: var(--pw-ink);
}
#pw-leave .pw-filter-form .form-control:focus,
#pw-leave .pw-filter-form .form-select:focus {
border-color: var(--pw-accent); box-shadow: 0 0 0 4px rgba(var(--pw-accent-rgb), 0.12); outline: none;
}
#pw-leave .pw-group-row td { background: var(--pw-soft); font-size: 0.85rem; color: var(--pw-mute); padding: 10px 14px; }
#pw-leave .pw-group-row strong { color: var(--pw-ink); }
#pw-leave .pw-status-pending { background: #fef3c7; color: #b45309; border-color: #fde68a; }
#pw-leave .pw-status-reject { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
/* Units pill: "3 days" is a number + word separated by a space, and .pw-badge is
an inline-flex box with no white-space rule, so in this nine-column table the
label broke after the number and the 999px radius rendered the two lines as a
bulging oval. Keep it on one line; the column is nowrap so it sizes to fit.
Scoped here rather than on .pw-badge itself: that class carries long dynamic
labels elsewhere (e.g. "{count} employees", humanised status strings) which
are meant to wrap rather than overflow their column. */
#pw-leave .pw-units-badge { white-space: nowrap; }
#pw-leave .pw-icon-btn--approve { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
#pw-leave .pw-icon-btn--approve:hover { background: #dcfce7; }
#pw-leave .pw-icon-btn--reject { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
#pw-leave .pw-icon-btn--reject:hover { background: #fee2e2; }
/* The shared .pw-table-wrap sets `padding: 0 24px` — no bottom padding — so the
last row (and, on a narrow viewport, the horizontal scrollbar the wrap adds)
sat flush against the panel's bottom edge and read as cut off. There is no
pagination bar to provide that breathing room when the result set fits on one
page. Scoped to this page rather than patched into workspace-styles: that
padding is shared by every pw table, several of which sit directly above
their own footer bar and would gain a double gap. */
#pw-leave .pw-table-wrap { padding-bottom: 18px; }
/* Guarantee the gap survives on the last row even when the wrap scrolls. */
#pw-leave .pw-table tbody tr:last-child td { padding-bottom: 18px; }
#pw-leave .pw-fixed-col { position: sticky; right: 0; background: #fff; z-index: 1; }
#pw-leave .pw-table tbody tr:hover .pw-fixed-col { background: var(--pw-soft); }
/* Select2 visual alignment */
#pw-leave .select2-container--default .select2-selection--single {
height: 40px; border-radius: 12px; border-color: var(--pw-border);
}
#pw-leave .select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 40px; padding-left: 14px; padding-right: 30px; color: var(--pw-ink);
}
#pw-leave .select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; width: 30px; }
/* Leave-rules approver panel */
#pw-leave .pw-policy-toggle {
cursor: pointer; border: 1px solid #fde68a; background: #fffbeb; color: #92400e;
margin-left: 8px; font-weight: 700;
}
#pw-leave .pw-policy-toggle--override { border-color: #bfdbfe; background: #eff6ff; color: #1e40af; }
#pw-leave .pw-policy-toggle--ok { border-color: #bbf7d0; background: #f0fdf4; color: #15803d; }
#pw-leave .pw-policy-row td { background: var(--pw-soft); padding: 0; }
#pw-leave .pw-policy-panel { padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
#pw-leave .pw-policy-group { border-radius: 12px; padding: 10px 12px; border: 1px solid var(--pw-border); background: #fff; }
#pw-leave .pw-policy-group--violation { border-color: #fecaca; background: #fef2f2; }
#pw-leave .pw-policy-group--override { border-color: #bfdbfe; background: #eff6ff; }
#pw-leave .pw-policy-group--warning { border-color: #fde68a; background: #fffbeb; }
#pw-leave .pw-policy-group--pass { border-color: #bbf7d0; background: #f0fdf4; }
#pw-leave .pw-policy-group__head { font-weight: 800; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; display: inline-flex; align-items: center; gap: 6px; }
#pw-leave .pw-policy-group--violation .pw-policy-group__head { color: #b91c1c; }
#pw-leave .pw-policy-group--override .pw-policy-group__head { color: #1e40af; }
#pw-leave .pw-policy-group--warning .pw-policy-group__head { color: #92400e; }
#pw-leave .pw-policy-item { font-size: 0.86rem; color: var(--pw-ink); padding: 3px 0; }
#pw-leave .pw-policy-item strong { margin-right: 6px; }
#pw-leave .pw-policy-by { display: block; color: #1e40af; font-size: 0.8rem; margin-top: 2px; }
#pw-leave .pw-policy-justify { margin: 6px 0 0; padding: 8px 12px; border-left: 3px solid #d97706; background: #fff7ed; color: #7c2d12; font-size: 0.85rem; font-style: italic; }
#pw-leave .pw-policy-passtoggle { border: 0; background: transparent; color: #15803d; font-weight: 700; font-size: 0.86rem; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 0; }
#pw-leave .pw-policy-caret { transition: transform .18s; font-size: 0.72rem; }
#pw-leave .pw-policy-passtoggle.is-open .pw-policy-caret { transform: rotate(180deg); }
#pw-leave .pw-policy-passlist { margin-top: 8px; display: flex; flex-direction: column; gap: 2px; }
#pw-leave .pw-policy-item--pass { color: #15803d; }
}
@scope ([data-demo-module="replacement-leave"]) {
#pw-rleave .pw-co-suffix { font-weight: 600; color: var(--pw-mute); font-size: 1.1rem; }
#pw-rleave .pw-filter-form .form-label { font-weight: 700; color: var(--pw-ink); font-size: 0.82rem; margin-bottom: 6px; }
#pw-rleave .pw-filter-form .form-control,
#pw-rleave .pw-filter-form .form-select {
padding: 9px 14px; border-radius: 12px; border: 1px solid var(--pw-border);
font-size: 0.9rem; background: #fff; color: var(--pw-ink);
}
#pw-rleave .pw-filter-form .form-control:focus,
#pw-rleave .pw-filter-form .form-select:focus {
border-color: var(--pw-accent); box-shadow: 0 0 0 4px rgba(var(--pw-accent-rgb), 0.12); outline: none;
}
#pw-rleave .pw-status-pending { background: #fef3c7; color: #b45309; border-color: #fde68a; }
#pw-rleave .pw-status-reject { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
#pw-rleave .pw-icon-btn--approve { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
#pw-rleave .pw-icon-btn--approve:hover { background: #dcfce7; }
#pw-rleave .pw-icon-btn--reject { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
#pw-rleave .pw-icon-btn--reject:hover { background: #fee2e2; }
#pw-rleave .pw-fixed-col { position: sticky; right: 0; background: #fff; z-index: 1; }
#pw-rleave .pw-table tbody tr:hover .pw-fixed-col { background: var(--pw-soft); }
#pw-rleave .select2-container--default .select2-selection--single { height: 40px; border-radius: 12px; border-color: var(--pw-border); }
#pw-rleave .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 40px; padding-left: 14px; padding-right: 30px; color: var(--pw-ink); }
#pw-rleave .select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; width: 30px; }
/* KPI strip */
#pw-rleave .rleave-stats {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px; margin-top: 18px;
}
@media (max-width: 991.98px) { #pw-rleave .rleave-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { #pw-rleave .rleave-stats { grid-template-columns: 1fr; } }
#pw-rleave .rleave-kpi {
display: flex; align-items: center; gap: 14px;
padding: 18px;
background: #fff; border: 1px solid var(--pw-border); border-radius: 18px;
box-shadow: var(--pw-shadow);
}
#pw-rleave .rleave-kpi__icon {
flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.3rem;
}
#pw-rleave .rleave-kpi__label { font-size: 0.72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pw-mute); }
#pw-rleave .rleave-kpi__value { font-size: 1.6rem; font-weight: 800; line-height: 1.1; color: var(--pw-ink); }
#pw-rleave .rleave-kpi--primary .rleave-kpi__icon { background: #eef2ff; color: #4f46e5; }
#pw-rleave .rleave-kpi--warning .rleave-kpi__icon { background: #fff7ed; color: #d97706; }
#pw-rleave .rleave-kpi--success .rleave-kpi__icon { background: #f0fdf4; color: #16a34a; }
#pw-rleave .rleave-kpi--danger .rleave-kpi__icon { background: #fef2f2; color: #dc2626; }
#pw-rleave .rleave-kpi--info .rleave-kpi__icon { background: #ecfeff; color: #0891b2; }
}
@scope ([data-demo-module="replacement-leave"], [data-demo-module="jobs"], [data-demo-module="recruitment-approvals"], [data-demo-module="recruitment-settings"]) {
.pm {
--pm-ink: #132238;
--pm-mute: #74839a;
--pm-border: #e5edf6;
--pm-soft: #f8fbff;
--pm-accent: #4f46e5;
--pm-accent-rgb: 79,70,229;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: var(--pm-ink);
}
.pm .pm-body { padding: 22px; }
.pm .pm-field { margin-bottom: 18px; }
.pm .pm-field:last-child { margin-bottom: 0; }
.pm .pm-grid {
display: grid; gap: 14px 16px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.pm .pm-grid > .pm-field { margin-bottom: 0; }
.pm .form-label { font-weight: 700; color: var(--pm-ink); font-size: 0.86rem; margin-bottom: 6px; }
.pm .form-control,
.pm select.form-control,
.pm textarea.form-control {
width: 100%; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--pm-border);
font-size: 0.95rem; transition: border-color .18s, box-shadow .18s; background: #fff;
}
.pm .form-control:focus,
.pm select.form-control:focus,
.pm textarea.form-control:focus {
border-color: var(--pm-accent); box-shadow: 0 0 0 4px rgba(var(--pm-accent-rgb), 0.12); outline: none;
}
.pm textarea.form-control { min-height: 92px; resize: vertical; }
.pm .pm-mono { font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace; font-size: 0.9rem; }
.pm .pm-hint { display: block; margin-top: 6px; color: var(--pm-mute); font-size: 0.78rem; line-height: 1.4; }
.pm .invalid-feedback.d-block { color: #dc2626; font-size: 0.8rem; margin-top: 6px; }
/* Inline notice banner, for warning the user about a consequence of the edit
they are about to make. Tone is set by the modifier: --warn is amber. */
.pm .pm-notice {
display: flex; gap: 10px; align-items: flex-start;
padding: 12px 14px; margin-bottom: 18px; border-radius: 12px;
border: 1px solid var(--pm-border); background: var(--pm-soft);
font-size: 0.84rem; line-height: 1.45; color: var(--pm-ink);
}
.pm .pm-notice i { margin-top: 1px; flex: none; }
.pm .pm-notice strong { font-weight: 700; }
.pm .pm-notice--warn { border-color: #fcd9a4; background: #fff8ec; color: #7a4b08; }
.pm .pm-notice--warn i { color: #b45309; }
/* Yes/No segmented toggle for tinyint-like fields */
.pm .pm-toggle-group { display: inline-flex; gap: 6px; padding: 4px; background: var(--pm-soft); border: 1px solid var(--pm-border); border-radius: 12px; }
.pm .pm-toggle { margin: 0; cursor: pointer; }
.pm .pm-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.pm .pm-toggle span {
display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 9px;
font-size: 0.85rem; font-weight: 700; color: var(--pm-mute);
transition: background .18s, color .18s;
}
.pm .pm-toggle input:checked + span {
background: var(--pm-accent); color: #fff;
box-shadow: 0 6px 14px rgba(var(--pm-accent-rgb), 0.20);
}
/* Footer */
.pm-footer { padding: 14px 22px; border-top: 1px solid #f0f4fa; background: #fff; }
/* Bootstrap's `.btn { color: var(--bs-btn-color); background-color: var(--bs-btn-bg) }`
rule loads after this stylesheet and has equal class-specificity, so
without !important the source-order cascade wipes pm-btn-submit's
white text + accent fill on hover/focus, leaving an invisible button.
We also pin the same colour explicitly on hover/focus/active to override
Bootstrap's hover variants (--bs-btn-hover-color etc.). */
.pm-btn-cancel,
.btn.pm-btn-cancel {
padding: 9px 16px; border-radius: 10px; font-weight: 600;
border: 1px solid #e5edf6 !important;
color: #74839a !important; background: #fff !important;
}
.pm-btn-cancel:hover,
.pm-btn-cancel:focus,
.btn.pm-btn-cancel:hover,
.btn.pm-btn-cancel:focus { background: #f8fbff !important; color: #132238 !important; }
.pm-btn-submit,
.btn.pm-btn-submit {
display: inline-flex; align-items: center; gap: 8px;
padding: 9px 18px; border-radius: 10px; font-weight: 700; border: 1px solid transparent;
background: var(--pm-accent, #4f46e5) !important; color: #fff !important;
box-shadow: 0 12px 24px rgba(var(--pm-accent-rgb, 79,70,229), 0.20);
transition: filter .18s;
}
.pm-btn-submit:hover,
.pm-btn-submit:focus,
.pm-btn-submit:active,
.btn.pm-btn-submit:hover,
.btn.pm-btn-submit:focus,
.btn.pm-btn-submit:active {
color: #fff !important;
background: var(--pm-accent, #4f46e5) !important;
filter: brightness(1.07);
}
/* Date / number / select look the same as text */
.pm input[type="date"],
.pm input[type="number"],
.pm input[type="time"],
.pm input[type="datetime-local"] { font-family: inherit; }
}
@scope ([data-demo-module="replacement-leave"]) {
#pw-rleave-create .pw-form-body { padding: 22px 28px 28px; }
#pw-rleave-create .pm-footer { border-top: 1px solid #f0f4fa; padding-top: 14px; padding-right: 0; }
#pw-rleave-create .select2-container--default .select2-selection--single { height: 44px; border-radius: 12px; border-color: var(--pw-border); }
#pw-rleave-create .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 44px; padding-left: 14px; padding-right: 30px; color: var(--pw-ink); }
#pw-rleave-create .select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px; width: 30px; }
}
@scope ([data-demo-module="leave-balances"]) {
.dash-content .page-header { display: none; }
/* Matrix table — sticky first column so the employee name stays visible
when the company has many leave types. */
.bal-matrix-wrap { overflow-x: auto; }
.bal-matrix { width: 100%; border-collapse: separate; border-spacing: 0; }
.bal-matrix thead th {
background: #f8fafc;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
color: var(--pb-muted);
border-bottom: 1px solid var(--pb-border);
padding: 0.75rem 0.85rem;
white-space: nowrap;
}
.bal-matrix tbody td {
border-bottom: 1px solid var(--pb-border-light);
padding: 0.6rem 0.85rem;
vertical-align: middle;
}
.bal-matrix tbody tr:last-child td { border-bottom: none; }
.bal-matrix .col-emp { min-width: 240px; }
.bal-matrix .col-check { width: 36px; text-align: center; }
.bal-matrix th.col-check, .bal-matrix td.col-check { padding-left: 0.75rem; padding-right: 0.25rem; }
.bal-matrix .balance-input {
width: 92px;
text-align: right;
padding: 0.35rem 0.5rem;
border: 1px solid var(--pb-border);
border-radius: 6px;
font-variant-numeric: tabular-nums;
background: #fff;
}
.bal-matrix .balance-input.dirty {
border-color: #f59e0b;
background: #fffbeb;
}
.bal-matrix tbody tr.row-selected { background: rgba(14, 165, 233, 0.06); }
.bal-matrix .emp-name { font-weight: 600; color: var(--pb-text); }
.bal-matrix .emp-meta { color: var(--pb-muted); font-size: 0.78rem; }
.bal-empty {
padding: 2.5rem 1rem;
text-align: center;
color: var(--pb-muted);
}
.bal-empty i { font-size: 2rem; display: block; margin-bottom: 0.5rem; }
.bal-dirty-indicator {
display: none;
padding: 0.5rem 0.85rem;
background: #fffbeb;
border: 1px solid #fcd34d;
color: #92400e;
border-radius: 8px;
font-size: 0.85rem;
font-weight: 600;
}
.bal-dirty-indicator.show { display: inline-flex; align-items: center; gap: 0.4rem; }
}
@scope ([data-demo-module="public-holidays"]) {
.dash-content .page-header { display: none; }
.ph-calendar-card .pb-section-body { padding: 0 1.75rem 1.5rem; }
#public-holiday-calendar { font-size: 0.9rem; }
#public-holiday-calendar .fc-toolbar { gap: 0.5rem; flex-wrap: wrap; }
#public-holiday-calendar .fc-toolbar-title { font-size: 1.05rem; font-weight: 700; color: var(--pb-text); }
#public-holiday-calendar .fc-button {
background: #fff;
border: 1px solid var(--pb-border);
color: var(--pb-text);
font-weight: 600;
font-size: 0.85rem;
padding: 0.4rem 0.85rem;
border-radius: 999px;
box-shadow: none;
text-transform: none;
line-height: 1.25;
transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
#public-holiday-calendar .fc-button:hover { background: #f8fafc; border-color: #c5cce0; }
#public-holiday-calendar .fc-button:focus { box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.10); outline: none; }
#public-holiday-calendar .fc-button-primary:not(:disabled).fc-button-active,
#public-holiday-calendar .fc-button-primary:not(:disabled):active {
background: var(--pb-text);
color: #fff;
border-color: var(--pb-text);
}
/* Round prev/next as a connected pill pair */
#public-holiday-calendar .fc-prev-button,
#public-holiday-calendar .fc-next-button {
min-width: 2.4rem;
font-size: 1.1rem;
line-height: 1;
padding: 0.35rem 0.85rem;
}
/* Round month/list view-switcher as a connected pill pair too */
#public-holiday-calendar .fc-button-group { gap: 0; }
#public-holiday-calendar .fc-button-group .fc-button {
border-radius: 0;
margin: 0;
}
#public-holiday-calendar .fc-button-group .fc-button:first-child { border-radius: 999px 0 0 999px; }
#public-holiday-calendar .fc-button-group .fc-button:last-child { border-radius: 0 999px 999px 0; }
#public-holiday-calendar .fc-button-group .fc-button + .fc-button { margin-left: -1px; }
#public-holiday-calendar .fc-daygrid-day.fc-day-today { background: rgba(30, 58, 95, 0.05); }
#public-holiday-calendar .fc-event {
border: none;
padding: 2px 6px;
font-weight: 600;
font-size: 0.78rem;
cursor: pointer;
}
#public-holiday-calendar .fc-event.event-success { background: #d1fadf; color: #054f31; }
#public-holiday-calendar .fc-event.event-info { background: #d1e9ff; color: #0a3a7a; }
.ph-list-item { cursor: pointer; padding: 0.75rem 1rem; border-bottom: 1px solid var(--pb-border-light); }
.ph-list-item:last-child { border-bottom: none; }
.ph-list-item:hover { background: #f8fafc; }
.ph-list-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-top: 0.4rem; }
.ph-list-dot.dot-national { background: #12b76a; }
.ph-list-dot.dot-state { background: #2e90fa; }
.ph-meta-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--pb-muted); }
.ph-state-badge {
display: inline-block;
background: #eef2f8;
color: var(--pb-text);
border-radius: 999px;
padding: 0.2rem 0.65rem;
font-size: 0.78rem;
font-weight: 500;
margin: 0.15rem 0.25rem 0.15rem 0;
}
.ph-state-badge.badge-national { background: #d1fadf; color: #054f31; }
.ph-state-badge.badge-unobserved { background: #fde6e6; color: #911414; }
.ph-state-badge.badge-tenant { background: #fef3c7; color: #92400e; }
/* Tenant-declared holidays: amber, so they read as ours rather than as
part of the shared national calendar. */
#public-holiday-calendar .fc-event.event-tenant {
background: #fef3c7;
color: #92400e;
}
.ph-list-dot.dot-tenant { background: #f59e0b; }
.ph-state-picker {
max-height: 190px; overflow-y: auto;
border: 1px solid var(--pb-border); border-radius: 8px;
padding: 0.5rem 0.75rem;
}
.ph-state-picker .form-check { margin-bottom: 0.15rem; }
/* A holiday the tenant has switched off still appears on the calendar,
greyed and struck through, so an admin can see and undo the decision.
Hiding it outright would make the exclusion invisible and unfixable. */
#public-holiday-calendar .fc-event.event-unobserved {
background: #f1f3f7 !important;
color: #8a93a5 !important;
text-decoration: line-through;
}
.ph-list-item.is-unobserved .ph-list-title { color: #8a93a5; text-decoration: line-through; }
.ph-list-dot.dot-unobserved { background: #c3c9d6; }
}
@scope ([data-demo-module="company-holidays"]) {
.dash-content .page-header { display: none; }
.ch-calendar-card .pb-section-body { padding: 0 1.75rem 1.5rem; }
#company-holiday-calendar { font-size: 0.9rem; }
#company-holiday-calendar .fc-toolbar { gap: 0.5rem; flex-wrap: wrap; }
#company-holiday-calendar .fc-toolbar-title { font-size: 1.05rem; font-weight: 700; color: var(--pb-text); }
#company-holiday-calendar .fc-button {
background: #fff;
border: 1px solid var(--pb-border);
color: var(--pb-text);
font-weight: 600;
font-size: 0.85rem;
padding: 0.4rem 0.85rem;
border-radius: 999px;
box-shadow: none;
text-transform: none;
line-height: 1.25;
transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
#company-holiday-calendar .fc-button:hover { background: #f8fafc; border-color: #c5cce0; }
#company-holiday-calendar .fc-button:focus { box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.10); outline: none; }
#company-holiday-calendar .fc-button-primary:not(:disabled).fc-button-active,
#company-holiday-calendar .fc-button-primary:not(:disabled):active {
background: var(--pb-text);
color: #fff;
border-color: var(--pb-text);
}
#company-holiday-calendar .fc-prev-button,
#company-holiday-calendar .fc-next-button {
min-width: 2.4rem;
font-size: 1.1rem;
line-height: 1;
padding: 0.35rem 0.85rem;
}
#company-holiday-calendar .fc-button-group { gap: 0; }
#company-holiday-calendar .fc-button-group .fc-button {
border-radius: 0;
margin: 0;
}
#company-holiday-calendar .fc-button-group .fc-button:first-child { border-radius: 999px 0 0 999px; }
#company-holiday-calendar .fc-button-group .fc-button:last-child { border-radius: 0 999px 999px 0; }
#company-holiday-calendar .fc-button-group .fc-button + .fc-button { margin-left: -1px; }
#company-holiday-calendar .fc-daygrid-day.fc-day-today { background: rgba(30, 58, 95, 0.05); }
#company-holiday-calendar .fc-event {
border: none;
padding: 2px 6px;
font-weight: 600;
font-size: 0.78rem;
cursor: pointer;
background: #fce4a6;
color: #6b4a07;
}
.ch-list-item { padding: 0.75rem 1rem; border-bottom: 1px solid var(--pb-border-light); }
.ch-list-item:last-child { border-bottom: none; }
.ch-list-item:hover { background: #f8fafc; }
.ch-list-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-top: 0.4rem; background: #d2a44a; }
.ch-meta-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--pb-muted); }
}
@scope ([data-demo-module="employees"]) {
#pw-empidx .empidx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
#pw-empidx .empidx-stat {
background: #fff; border: 1px solid var(--pw-border); border-radius: 16px;
padding: 16px 20px; box-shadow: var(--pw-shadow);
display: flex; flex-direction: column; gap: 4px;
}
#pw-empidx .empidx-stat__label { color: var(--pw-mute); font-size: 0.75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
#pw-empidx .empidx-stat__value { color: var(--pw-ink); font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
#pw-empidx .empidx-stat__caption { color: var(--pw-mute); font-size: 0.78rem; }
#pw-empidx .empidx-stat--ok { background: linear-gradient(135deg, #ecfdf5 0%, #fff 70%); border-color: #a7f3d0; }
#pw-empidx .empidx-stat--ok .empidx-stat__value { color: #047857; }
#pw-empidx .empidx-stat--warn { background: linear-gradient(135deg, #fffbeb 0%, #fff 70%); border-color: #fde68a; }
#pw-empidx .empidx-stat--warn .empidx-stat__value { color: #b45309; }
#pw-empidx .empidx-stat--danger { background: linear-gradient(135deg, #fef2f2 0%, #fff 70%); border-color: #fecaca; }
#pw-empidx .empidx-stat--danger .empidx-stat__value { color: #b91c1c; }
#pw-empidx .empidx-actions { display: inline-flex; flex-wrap: wrap; gap: 8px; }
#pw-empidx .empidx-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 9px 16px; border-radius: 12px; font-weight: 700; font-size: 0.85rem;
border: 1px solid transparent; transition: background .18s, color .18s, border-color .18s;
text-decoration: none;
}
#pw-empidx .empidx-btn--primary {
background: linear-gradient(180deg, #34d399 0%, #10b981 100%); color: #fff;
box-shadow: 0 12px 24px rgba(16,185,129,0.20);
}
#pw-empidx .empidx-btn--primary:hover { background: linear-gradient(180deg, #6ee7b7 0%, #34d399 100%); color: #fff; }
#pw-empidx .empidx-btn--ghost { background: #fff; color: var(--pw-mute); border-color: var(--pw-border); }
#pw-empidx .empidx-btn--ghost:hover { background: var(--pw-soft); color: var(--pw-ink); border-color: rgba(var(--pw-accent-rgb), 0.30); }
/* Export split into three shapes of the same register. */
#pw-empidx .empidx-export { position: relative; }
#pw-empidx .empidx-export__caret { font-size: 0.9rem; margin-left: -2px; }
#pw-empidx .empidx-export__menu {
display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
min-width: 268px; padding: 6px;
background: #fff; border: 1px solid var(--pw-border); border-radius: 14px;
box-shadow: 0 18px 38px rgba(15, 23, 42, 0.14);
}
#pw-empidx .empidx-export__menu.is-open { display: block; }
#pw-empidx .empidx-export__menu a {
display: flex; align-items: flex-start; gap: 10px;
padding: 9px 11px; border-radius: 10px;
text-decoration: none; color: var(--pw-ink);
}
#pw-empidx .empidx-export__menu a:hover { background: var(--pw-soft); }
#pw-empidx .empidx-export__menu a i { font-size: 1rem; color: var(--pw-mute); margin-top: 2px; }
#pw-empidx .empidx-export__menu a:hover i { color: var(--pw-ink); }
#pw-empidx .empidx-export__menu strong { display: block; font-size: 0.85rem; font-weight: 700; }
#pw-empidx .empidx-export__menu small { display: block; font-size: 0.75rem; color: var(--pw-mute); margin-top: 1px; }
#pw-empidx .empidx-filters {
display: grid; grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(260px, 1.6fr) auto;
gap: 12px; align-items: end;
padding: 0 28px 18px;
}
#pw-empidx .empidx-filter { position: relative; }
#pw-empidx .empidx-filter > label {
display: flex; align-items: center; gap: 6px;
font-size: 0.75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
color: var(--pw-mute); margin-bottom: 6px;
}
#pw-empidx .empidx-filter select,
#pw-empidx .empidx-filter input {
width: 100%; height: 40px; padding: 0 14px;
border: 1px solid var(--pw-border); border-radius: 12px;
background: #fff; color: var(--pw-ink); font-size: 0.9rem; outline: none;
}
#pw-empidx .empidx-filter select { appearance: none; -webkit-appearance: none; padding-right: 32px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 10px center; background-size: 12px 12px;
}
#pw-empidx .empidx-filter select:focus,
#pw-empidx .empidx-filter input:focus { border-color: var(--pw-accent); box-shadow: 0 0 0 4px rgba(var(--pw-accent-rgb), 0.12); }
#pw-empidx .empidx-staff {
display: inline-block; padding: 4px 12px; border-radius: 10px;
background: rgba(var(--pw-accent-rgb), 0.10); color: var(--pw-accent);
border: 1px solid rgba(var(--pw-accent-rgb), 0.25);
font-weight: 700; font-size: 0.82rem; text-decoration: none;
font-family: 'JetBrains Mono','SF Mono',ui-monospace,monospace;
}
#pw-empidx .empidx-staff:hover { background: var(--pw-accent); color: #fff; }
#pw-empidx .empidx-staff--plain { background: var(--pw-soft); color: var(--pw-mute); border-color: var(--pw-border); }
#pw-empidx .empidx-avatar { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
#pw-empidx .empidx-email { color: var(--pw-mute); font-size: 0.78rem; margin-top: 2px; }
#pw-empidx .empidx-end-date { color: var(--pw-mute); font-size: 0.74rem; margin-top: 4px; }
#pw-empidx .empidx-flag {
display: inline-flex; align-items: center; gap: 4px;
margin-left: 8px; padding: 2px 8px; border-radius: 999px;
background: #fffbeb; color: #b45309; border: 1px solid #fde68a;
font-size: 0.66rem; font-weight: 700; letter-spacing: .03em;
text-transform: uppercase; vertical-align: middle; white-space: nowrap;
}
#pw-empidx .empidx-switch { position: relative; display: inline-block; width: 42px; height: 24px; cursor: pointer; }
#pw-empidx .empidx-switch input { opacity: 0; width: 0; height: 0; }
#pw-empidx .empidx-switch__track {
position: absolute; inset: 0; background: #e2e8f0; border-radius: 999px;
transition: background .18s;
}
#pw-empidx .empidx-switch__track::before {
content: ''; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px;
background: #fff; border-radius: 50%;
transition: transform .18s; box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
#pw-empidx .empidx-switch input:checked + .empidx-switch__track { background: var(--pw-accent); }
#pw-empidx .empidx-switch input:checked + .empidx-switch__track::before { transform: translateX(18px); }
#pw-empidx .empidx-row-actions { display: inline-flex; align-items: center; gap: 6px; }
#pw-empidx .empidx-icon {
width: 34px; height: 34px; padding: 0;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 10px; border: 1px solid var(--pw-border); font-size: 0.85rem;
background: #fff; color: var(--pw-mute);
transition: background .18s, color .18s, border-color .18s;
text-decoration: none;
}
#pw-empidx .empidx-icon--edit { background: rgba(var(--pw-accent-rgb), 0.08); color: var(--pw-accent); border-color: rgba(var(--pw-accent-rgb), 0.30); }
#pw-empidx .empidx-icon--edit:hover { background: rgba(var(--pw-accent-rgb), 0.16); }
#pw-empidx .empidx-icon--delete { background: #fff; color: #be123c; border-color: #fecdd3; }
#pw-empidx .empidx-icon--delete:hover { background: #fff1f2; color: #9f1239; }
@media (max-width: 767.98px) {
#pw-empidx .empidx-filters { grid-template-columns: 1fr; padding: 0 20px 14px; }
}
}
@scope ([data-demo-module="employees"], [data-demo-module="create-employee"]) {
.dash-content .page-header { display: none; }
.pb-employee-create {
--pb-create-accent: #0f766e;
--pb-create-accent-soft: #ecfdf5;
--pb-create-border: #dce6f3;
--pb-create-muted: #71809b;
--pb-create-ink: #1d2d4a;
}
.pb-employee-create .pb-hero {
position: relative;
overflow: hidden;
}
.pb-employee-create .pb-hero::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at top right, rgba(251, 191, 36, 0.18), transparent 28%),
radial-gradient(circle at top left, rgba(16, 185, 129, 0.12), transparent 24%);
pointer-events: none;
}
.pb-create-overview {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin: 18px 0 22px;
}
.pb-create-overview-card {
padding: 14px 16px;
border: 1px solid #e7eef7;
border-radius: 20px;
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
box-shadow: 0 16px 36px rgba(15, 23, 42, 0.05);
}
.pb-create-overview-label {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.74rem;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
color: #6d7d96;
}
.pb-create-overview-value {
display: block;
margin-top: 8px;
font-size: 1rem;
font-weight: 800;
color: var(--pb-create-ink);
}
.pb-create-overview-sub {
display: block;
margin-top: 2px;
font-size: 0.84rem;
color: var(--pb-create-muted);
}
.pb-employee-create-form .pb-wizard-stepper {
padding: 18px 20px;
border: 1px solid #e6edf7;
border-radius: 24px;
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
box-shadow: 0 18px 42px rgba(15, 23, 42, 0.05);
margin-bottom: 22px;
}
.pb-employee-create-form .pb-wizard-steps {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px;
margin: 0;
padding: 0;
list-style: none;
}
.pb-employee-create-form .pb-wizard-step-item {
position: relative;
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
padding: 12px 14px;
border: 1px solid transparent;
border-radius: 18px;
color: #8090ab;
background: transparent;
transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.pb-employee-create-form .pb-wizard-step-item::after {
content: '';
position: absolute;
top: 50%;
left: calc(100% + 7px);
width: 14px;
height: 2px;
background: #d6dfec;
transform: translateY(-50%);
}
.pb-employee-create-form .pb-wizard-step-item:last-child::after {
display: none;
}
.pb-employee-create-form .pb-wizard-step-marker {
position: relative;
width: 44px;
height: 44px;
flex: 0 0 44px;
border-radius: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #f5f8fc;
border: 1px solid #dce6f3;
color: #73829c;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
.pb-employee-create-form .pb-wizard-step-num {
position: absolute;
right: -4px;
bottom: -4px;
width: 18px;
height: 18px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #fff;
border: 1px solid #dce6f3;
color: #6d7d96;
font-size: 0.68rem;
font-weight: 800;
}
.pb-employee-create-form .pb-wizard-step-label {
display: block;
font-size: 0.98rem;
font-weight: 800;
color: #6d7d96;
line-height: 1.2;
}
.pb-employee-create-form .pb-wizard-step-desc {
display: block;
margin-top: 2px;
font-size: 0.78rem;
color: #8c99b1;
line-height: 1.35;
}
.pb-employee-create-form .pb-wizard-step-item.is-active,
.pb-employee-create-form .pb-wizard-step-item.is-done {
background: #fff;
border-color: #dce6f3;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}
.pb-employee-create-form .pb-wizard-step-item.is-active .pb-wizard-step-marker {
background: linear-gradient(180deg, rgba(16,185,129,0.14) 0%, rgba(16,185,129,0.06) 100%);
border-color: rgba(15,118,110,0.32);
color: var(--pb-create-accent);
}
.pb-employee-create-form .pb-wizard-step-item.is-active .pb-wizard-step-num,
.pb-employee-create-form .pb-wizard-step-item.is-done .pb-wizard-step-num {
background: var(--pb-create-accent);
border-color: var(--pb-create-accent);
color: #fff;
}
.pb-employee-create-form .pb-wizard-step-item.is-active .pb-wizard-step-label,
.pb-employee-create-form .pb-wizard-step-item.is-done .pb-wizard-step-label {
color: var(--pb-create-ink);
}
.pb-employee-create-form .pb-wizard-step-item.is-done::after {
background: rgba(15,118,110,0.35);
}
.pb-employee-create-form .pb-wizard-step-item.is-done .pb-wizard-step-marker {
background: var(--pb-create-accent-soft);
border-color: rgba(15,118,110,0.22);
color: var(--pb-create-accent);
}
.pb-employee-create-form .pb-section-card {
border: 1px solid #e6edf7;
border-radius: 26px;
box-shadow: 0 18px 42px rgba(15, 23, 42, 0.05);
overflow: hidden;
}
.pb-employee-create-form .pb-section-head {
padding: 22px 28px 14px;
background:
linear-gradient(180deg, rgba(247, 250, 255, 0.92) 0%, rgba(255,255,255,0.98) 100%);
border-bottom: 1px solid #eef3f9;
}
.pb-employee-create-form .pb-section-title {
font-size: 1.15rem;
font-weight: 800;
color: var(--pb-create-ink);
}
.pb-employee-create-form .pb-section-desc {
max-width: 760px;
color: var(--pb-create-muted);
}
.pb-employee-create-form .pb-section-body {
padding: 24px 28px 28px;
}
.pb-employee-create-form .form-group {
margin-bottom: 18px;
}
.pb-employee-create-form .form-label {
color: #263755;
font-weight: 800;
margin-bottom: 8px;
}
.pb-employee-create-form .form-control,
.pb-employee-create-form .form-select,
.pb-employee-create-form select.form-control,
.pb-employee-create-form .input-group-addon {
min-height: 48px;
border-radius: 14px;
border-color: var(--pb-create-border);
}
.pb-employee-create-form textarea.form-control {
min-height: 96px;
}
.pb-employee-create-form .form-control:focus,
.pb-employee-create-form select.form-control:focus {
border-color: rgba(15,118,110,0.34);
box-shadow: 0 0 0 4px rgba(15,118,110,0.10);
}
.pb-employee-create-form .grey-bg,
.pb-employee-create-form .number-grid,
.pb-employee-create-form .card.card-body {
border: 1px solid #e5edf7;
border-radius: 20px !important;
background: linear-gradient(180deg, #fbfdff 0%, #f6f9fd 100%) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
}
.pb-employee-create-form .grey-bg {
padding: 16px 18px 8px !important;
}
.pb-employee-create-form hr {
border-color: #edf2f8;
opacity: 1;
}
.pb-employee-create-form #working_days_div label sub {
display: inline-block;
margin-top: 2px;
}
.pb-employee-create-form .pb-wizard-footer {
position: sticky;
bottom: 18px;
z-index: 4;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 18px;
margin-top: 22px;
border: 1px solid #dfe8f3;
border-radius: 22px;
background: rgba(255,255,255,0.92);
backdrop-filter: blur(10px);
box-shadow: 0 18px 42px rgba(15, 23, 42, 0.10);
}
.pb-employee-create-form .pb-wizard-progress {
padding: 10px 14px;
border-radius: 999px;
background: #f6f9fd;
border: 1px solid #e5edf7;
color: #607089;
font-weight: 700;
white-space: nowrap;
}
.pb-employee-create-form .pb-wizard-footer .btn,
.pb-employee-create-form .pb-wizard-footer .pb-save-btn {
min-height: 46px;
border-radius: 14px;
font-weight: 800;
}
.pb-employee-create-form .pb-wizard-footer .btn-light {
border: 1px solid #dce6f3;
background: #fff;
color: #4d5d76;
}
.pb-employee-create-form .pb-wizard-footer .btn-primary {
border: 0;
background: linear-gradient(180deg, #1b8f87 0%, #0f766e 100%);
box-shadow: 0 14px 28px rgba(15,118,110,0.18);
}
.pb-employee-create-form .pb-wizard-footer .pb-save-btn {
box-shadow: 0 14px 28px rgba(34, 197, 94, 0.18);
}
@media (max-width: 1199.98px) {
.pb-create-overview,
.pb-employee-create-form .pb-wizard-steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pb-employee-create-form .pb-wizard-step-item::after {
display: none;
}
}
@media (max-width: 767.98px) {
.pb-create-overview,
.pb-employee-create-form .pb-wizard-steps {
grid-template-columns: 1fr;
}
.pb-employee-create-form .pb-section-head,
.pb-employee-create-form .pb-section-body {
padding-left: 18px;
padding-right: 18px;
}
.pb-employee-create-form .pb-wizard-footer {
flex-wrap: wrap;
bottom: 10px;
}
.pb-employee-create-form .pb-wizard-progress {
order: 3;
width: 100%;
text-align: center;
}
}
}
@scope ([data-demo-module="import-employees"]) {
#emp-import-wizard .eiw-card {
background: #fff; border: 1px solid #e5edf6; border-radius: 16px;
padding: 22px 24px; margin-top: 16px; box-shadow: 0 10px 24px rgba(15,23,42,0.03);
}
#emp-import-wizard .eiw-card__title { margin: 0 0 4px; font-size: 1rem; font-weight: 800; color: #132238; }
#emp-import-wizard .eiw-card__description { margin: 0 0 16px; color: #475569; font-size: .85rem; }
#emp-import-wizard .eiw-templates {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin-bottom: 16px;
}
#emp-import-wizard .eiw-templates__label { font-size: .8rem; font-weight: 700; color: #475569; }
#emp-import-wizard .eiw-templates__link {
display: inline-flex; align-items: baseline; gap: 6px;
padding: 7px 13px; border-radius: 10px;
border: 1px solid #e5edf6; background: #fff;
font-size: .82rem; font-weight: 700; color: #15803d; text-decoration: none;
transition: background-color .12s ease, border-color .12s ease;
}
#emp-import-wizard .eiw-templates__link:hover { background: #f0fdf4; border-color: rgba(22,163,74,0.35); }
#emp-import-wizard .eiw-templates__hint { font-weight: 500; color: #94a3b8; font-size: .76rem; }
#emp-import-wizard .eiw-file-input {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
#emp-import-wizard .eiw-dropzone {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 6px; padding: 28px 16px; cursor: pointer; margin: 0;
border: 1.5px dashed #cbd5e1; border-radius: 12px; background: #fbfcfe;
transition: border-color .12s ease, background-color .12s ease;
text-align: center;
}
#emp-import-wizard .eiw-dropzone:hover, #emp-import-wizard .eiw-dropzone.is-dragover {
border-color: #16a34a; background: rgba(22, 163, 74, 0.06);
}
#emp-import-wizard .eiw-dropzone.is-filled {
border-color: #16a34a; border-style: solid; background: rgba(22, 163, 74, 0.06);
}
#emp-import-wizard .eiw-dropzone__icon { font-size: 1.6rem; color: #16a34a; }
#emp-import-wizard .eiw-dropzone__primary { font-weight: 600; color: #132238; font-size: .92rem; }
#emp-import-wizard .eiw-dropzone__hint { color: #94a3b8; font-size: .78rem; }
#emp-import-wizard .eiw-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
#emp-import-wizard .eiw-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 9px 16px; border-radius: 10px; border: 1px solid transparent;
font-size: .85rem; font-weight: 700; line-height: 1.1; cursor: pointer;
text-decoration: none; transition: filter .12s ease, background-color .12s ease;
}
#emp-import-wizard .eiw-btn--primary {
background: linear-gradient(180deg, #22c55e 0%, #15803d 100%); color: #fff;
box-shadow: 0 10px 22px rgba(22, 163, 74, 0.22);
}
#emp-import-wizard .eiw-btn--primary:hover { filter: brightness(1.05); }
#emp-import-wizard .eiw-btn--primary:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
#emp-import-wizard .eiw-btn--ghost {
background: #fff; color: #475569; border-color: #e5edf6;
}
#emp-import-wizard .eiw-btn--ghost:hover { background: #f8fbff; color: #132238; }
#emp-import-wizard .eiw-map-toolbar {
display: flex; gap: 12px; align-items: center; margin-bottom: 12px;
flex-wrap: wrap;
}
#emp-import-wizard .eiw-map-toolbar #eiw-field-search { max-width: 280px; }
#emp-import-wizard .eiw-map-toolbar__toggle {
display: inline-flex; align-items: center; gap: 6px; margin: 0;
font-size: .82rem; color: #475569; cursor: pointer; user-select: none;
}
#emp-import-wizard .eiw-map-toolbar__count { margin-left: auto; font-size: .78rem; color: #64748b; }
#emp-import-wizard .eiw-map-tablewrap { max-height: 60vh; overflow-y: auto; border: 1px solid #e5edf6; border-radius: 10px; }
#emp-import-wizard .eiw-map-table { margin: 0; }
#emp-import-wizard .eiw-map-table th { font-size: .72rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: .04em; background: #fbfcfe; position: sticky; top: 0; z-index: 1; }
#emp-import-wizard .eiw-map-table td { font-size: .88rem; vertical-align: middle; }
#emp-import-wizard .eiw-target__label { font-weight: 600; color: #132238; }
#emp-import-wizard .eiw-required { color: #dc2626; margin-left: 4px; }
#emp-import-wizard .eiw-sample { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: .78rem; }
/* Section heading rows inside the mapping table — these subdivide the
~70-field catalogue into Account / Personal / Statutory / etc. so the
operator can scroll between groups instead of squinting at one long list. */
#emp-import-wizard .eiw-map-section td {
background: #f1f5f9; padding: 0;
border-top: 1px solid #cbd5e1; border-bottom: 1px solid #cbd5e1;
}
#emp-import-wizard .eiw-map-section__toggle {
display: flex; align-items: center; gap: 8px; width: 100%;
padding: 9px 12px; border: 0; background: transparent; cursor: pointer;
text-align: left;
}
#emp-import-wizard .eiw-map-section__toggle:hover { background: #e8eef6; }
#emp-import-wizard .eiw-map-section__caret {
font-size: .7rem; color: #64748b; transition: transform .12s ease;
}
/* Open sections point the caret down; the group carries the state so the
caret and the rows can never disagree. */
#emp-import-wizard .eiw-map-group:not(.is-collapsed) .eiw-map-section__caret {
transform: rotate(90deg);
}
#emp-import-wizard .eiw-map-group.is-collapsed tr[data-target] { display: none; }
#emp-import-wizard .eiw-map-section__label {
font-size: .72rem; font-weight: 800; letter-spacing: .08em;
text-transform: uppercase; color: #1e293b;
}
#emp-import-wizard .eiw-map-section__meta {
margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
font-size: .72rem; color: #64748b; font-weight: 600;
}
#emp-import-wizard .eiw-map-section__req {
color: #b45309; background: rgba(245, 158, 11, 0.14);
border-radius: 999px; padding: 1px 8px;
}
#emp-import-wizard .eiw-map-group.has-missing-required .eiw-map-section__req {
color: #b91c1c; background: rgba(220, 38, 38, 0.12);
}
/* ── Preview step ────────────────────────────────────────── */
#emp-import-wizard .eiw-preview-tiles {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px;
}
@media (max-width: 720px) {
#emp-import-wizard .eiw-preview-tiles { grid-template-columns: repeat(2, 1fr); }
}
#emp-import-wizard .eiw-tile {
display: flex; flex-direction: column; gap: 2px;
padding: 14px 16px; border-radius: 12px; border: 1px solid #e5edf6; background: #fbfcfe;
}
#emp-import-wizard .eiw-tile__value { font-size: 1.5rem; font-weight: 800; line-height: 1.1; color: #132238; }
#emp-import-wizard .eiw-tile__label { font-size: .75rem; color: #64748b; font-weight: 600; }
#emp-import-wizard .eiw-tile--create { background: rgba(22,163,74,0.07); border-color: rgba(22,163,74,0.25); }
#emp-import-wizard .eiw-tile--create .eiw-tile__value { color: #15803d; }
#emp-import-wizard .eiw-tile--update { background: rgba(14,165,233,0.07); border-color: rgba(14,165,233,0.25); }
#emp-import-wizard .eiw-tile--update .eiw-tile__value { color: #0369a1; }
#emp-import-wizard .eiw-tile--error { background: rgba(220,38,38,0.06); border-color: rgba(220,38,38,0.22); }
#emp-import-wizard .eiw-tile--error .eiw-tile__value { color: #b91c1c; }
#emp-import-wizard .eiw-preview-note {
margin: 0 0 14px; padding: 10px 14px; border-radius: 10px;
background: rgba(245,158,11,0.10); border: 1px solid rgba(245,158,11,0.32);
color: #b45309; font-size: .82rem; font-weight: 600;
}
#emp-import-wizard .eiw-preview-tablewrap {
max-height: 46vh; overflow-y: auto; border: 1px solid #e5edf6; border-radius: 10px;
}
#emp-import-wizard .eiw-preview-table { margin: 0; }
#emp-import-wizard .eiw-preview-table th {
font-size: .72rem; font-weight: 700; color: #475569; text-transform: uppercase;
letter-spacing: .04em; background: #fbfcfe; position: sticky; top: 0; z-index: 1;
}
#emp-import-wizard .eiw-preview-table td { font-size: .84rem; vertical-align: middle; }
#emp-import-wizard .eiw-outcome {
display: inline-block; padding: 2px 9px; border-radius: 999px;
font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
#emp-import-wizard .eiw-outcome--create { background: rgba(22,163,74,0.12); color: #15803d; }
#emp-import-wizard .eiw-outcome--update { background: rgba(14,165,233,0.12); color: #0369a1; }
#emp-import-wizard .eiw-outcome--error { background: rgba(220,38,38,0.12); color: #b91c1c; }
#emp-import-wizard .eiw-preview-detail { color: #64748b; font-size: .8rem; }
#emp-import-wizard .eiw-preview-detail--error { color: #b91c1c; }
#emp-import-wizard .eiw-result-summary {
padding: 14px 18px; border-radius: 12px; margin-bottom: 14px;
background: rgba(22, 163, 74, 0.08); border: 1px solid rgba(22, 163, 74, 0.30);
color: #15803d; font-weight: 600; font-size: .92rem;
}
#emp-import-wizard .eiw-result-summary.is-warn { background: rgba(245, 158, 11, 0.10); border-color: rgba(245, 158, 11, 0.35); color: #b45309; }
#emp-import-wizard .eiw-result-summary.is-error { background: rgba(220, 38, 38, 0.08); border-color: rgba(220, 38, 38, 0.30); color: #b91c1c; }
#emp-import-wizard .eiw-result-list { margin-top: 12px; }
#emp-import-wizard .eiw-result-list h4 { margin: 0 0 6px; font-size: .82rem; font-weight: 700; color: #132238; }
#emp-import-wizard .eiw-result-list ul { margin: 0; padding-left: 20px; }
#emp-import-wizard .eiw-result-list li { font-size: .82rem; color: #475569; line-height: 1.5; }
}
@scope ([data-demo-module="opening-balances"]) {
#ob-import .obi-card {
background: #fff; border: 1px solid #e5edf6; border-radius: 16px;
padding: 22px 24px; margin-top: 16px; box-shadow: 0 10px 24px rgba(15,23,42,0.03);
}
#ob-import .obi-card__title { margin: 0 0 4px; font-size: 1rem; font-weight: 800; color: #132238; }
#ob-import .obi-card__description { margin: 0 0 16px; color: #475569; font-size: .85rem; }
#ob-import .obi-year {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 12px 14px; margin-bottom: 16px;
background: #f8fbff; border: 1px solid #e5edf6; border-radius: 12px;
}
#ob-import .obi-year__label { margin: 0; font-size: .82rem; font-weight: 700; color: #132238; }
#ob-import .obi-year select { width: 120px; }
#ob-import .obi-year__hint { font-size: .78rem; color: #64748b; }
#ob-import .obi-templates {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin-bottom: 16px;
}
#ob-import .obi-templates__label { font-size: .8rem; font-weight: 700; color: #475569; }
#ob-import .obi-templates__link {
display: inline-flex; align-items: baseline; gap: 6px;
padding: 7px 13px; border-radius: 10px;
border: 1px solid #e5edf6; background: #fff;
font-size: .82rem; font-weight: 700; color: #0f766e; text-decoration: none;
transition: background-color .12s ease, border-color .12s ease;
}
#ob-import .obi-templates__link:hover { background: #f0fdfa; border-color: rgba(13,148,136,0.35); }
#ob-import .obi-templates__hint { font-weight: 500; color: #94a3b8; font-size: .76rem; }
#ob-import .obi-file-input {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
#ob-import .obi-dropzone {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 6px; padding: 28px 16px; cursor: pointer; margin: 0;
border: 1.5px dashed #cbd5e1; border-radius: 12px; background: #fbfcfe;
transition: border-color .12s ease, background-color .12s ease; text-align: center;
}
#ob-import .obi-dropzone:hover, #ob-import .obi-dropzone.is-dragover {
border-color: #0d9488; background: rgba(13, 148, 136, 0.06);
}
#ob-import .obi-dropzone.is-filled {
border-color: #0d9488; border-style: solid; background: rgba(13, 148, 136, 0.06);
}
#ob-import .obi-dropzone__icon { font-size: 1.6rem; color: #0d9488; }
#ob-import .obi-dropzone__primary { font-weight: 600; color: #132238; font-size: .92rem; }
#ob-import .obi-dropzone__hint { color: #94a3b8; font-size: .78rem; }
#ob-import .obi-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
#ob-import .obi-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 9px 16px; border-radius: 10px; border: 1px solid transparent;
font-size: .85rem; font-weight: 700; line-height: 1.1; cursor: pointer;
text-decoration: none; transition: filter .12s ease, background-color .12s ease;
}
#ob-import .obi-btn--primary {
background: linear-gradient(180deg, #14b8a6 0%, #0f766e 100%); color: #fff;
box-shadow: 0 10px 22px rgba(13, 148, 136, 0.22);
}
#ob-import .obi-btn--primary:hover { filter: brightness(1.05); }
#ob-import .obi-btn--primary:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
#ob-import .obi-btn--ghost { background: #fff; color: #475569; border-color: #e5edf6; }
#ob-import .obi-btn--ghost:hover { background: #f8fbff; color: #132238; }
#ob-import .obi-note {
margin: 0 0 14px; padding: 10px 14px; border-radius: 10px;
background: #f8fbff; border: 1px solid #e5edf6; color: #475569;
font-size: .82rem;
}
#ob-import .obi-note--warn {
background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.32);
color: #b45309; font-weight: 600;
}
#ob-import .obi-map-tablewrap, #ob-import .obi-preview-tablewrap {
max-height: 52vh; overflow-y: auto; border: 1px solid #e5edf6; border-radius: 10px;
}
#ob-import .obi-map-table, #ob-import .obi-preview-table { margin: 0; }
#ob-import .obi-map-table th, #ob-import .obi-preview-table th {
font-size: .72rem; font-weight: 700; color: #475569; text-transform: uppercase;
letter-spacing: .04em; background: #fbfcfe; position: sticky; top: 0; z-index: 1;
}
#ob-import .obi-map-table td, #ob-import .obi-preview-table td { font-size: .86rem; vertical-align: middle; }
#ob-import .obi-map-section td {
background: #f1f5f9; padding: 8px 12px;
border-top: 1px solid #cbd5e1; border-bottom: 1px solid #cbd5e1;
}
#ob-import .obi-map-section__label {
font-size: .72rem; font-weight: 800; letter-spacing: .08em;
text-transform: uppercase; color: #1e293b;
}
#ob-import .obi-target__label { font-weight: 600; color: #132238; }
#ob-import .obi-sample { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: .78rem; }
#ob-import .obi-tiles {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px;
}
@media (max-width: 720px) { #ob-import .obi-tiles { grid-template-columns: 1fr; } }
#ob-import .obi-tile {
display: flex; flex-direction: column; gap: 2px;
padding: 14px 16px; border-radius: 12px; border: 1px solid #e5edf6; background: #fbfcfe;
}
#ob-import .obi-tile__value { font-size: 1.5rem; font-weight: 800; line-height: 1.1; color: #132238; }
#ob-import .obi-tile__label { font-size: .75rem; color: #64748b; font-weight: 600; }
#ob-import .obi-tile--apply { background: rgba(13,148,136,0.07); border-color: rgba(13,148,136,0.25); }
#ob-import .obi-tile--apply .obi-tile__value { color: #0f766e; }
#ob-import .obi-tile--error { background: rgba(220,38,38,0.06); border-color: rgba(220,38,38,0.22); }
#ob-import .obi-tile--error .obi-tile__value { color: #b91c1c; }
#ob-import .obi-outcome {
display: inline-block; padding: 2px 9px; border-radius: 999px;
font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
#ob-import .obi-outcome--apply { background: rgba(13,148,136,0.12); color: #0f766e; }
#ob-import .obi-outcome--error { background: rgba(220,38,38,0.12); color: #b91c1c; }
#ob-import .obi-amount { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: .8rem; color: #132238; }
#ob-import .obi-detail { color: #64748b; font-size: .8rem; }
#ob-import .obi-detail--error { color: #b91c1c; }
#ob-import .obi-result-summary {
padding: 14px 18px; border-radius: 12px; margin-bottom: 14px;
background: rgba(13,148,136,0.08); border: 1px solid rgba(13,148,136,0.30);
color: #0f766e; font-weight: 600; font-size: .92rem;
}
#ob-import .obi-result-summary.is-warn { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.35); color: #b45309; }
#ob-import .obi-result-summary.is-error { background: rgba(220,38,38,0.08); border-color: rgba(220,38,38,0.30); color: #b91c1c; }
#ob-import .obi-result-list { margin-top: 12px; }
#ob-import .obi-result-list h4 { margin: 0 0 6px; font-size: .82rem; font-weight: 700; color: #132238; }
#ob-import .obi-result-list ul { margin: 0; padding-left: 20px; }
#ob-import .obi-result-list li { font-size: .82rem; color: #475569; line-height: 1.5; }
}
@scope ([data-demo-module="profile"]) {
.dash-content .page-header { display: none; }
/* ---------------- Profile summary block (lives inside the hero) ---------------- */
.pb-surface .mp-summary {
margin-top: 1.5rem;
background: #ffffffcc;
backdrop-filter: blur(4px);
border: 1px solid var(--pb-border-light);
border-radius: var(--pb-radius-lg);
padding: 1.1rem 1.25rem;
display: flex;
align-items: center;
gap: 1.1rem;
flex-wrap: wrap;
}
.pb-surface .mp-avatar {
flex: 0 0 auto;
width: 64px;
height: 64px;
border-radius: 50%;
overflow: hidden;
background: #fff;
border: 2px solid #fff;
box-shadow: 0 4px 14px rgba(30, 58, 95, 0.12);
display: flex;
align-items: center;
justify-content: center;
color: var(--pb-tag-text);
font-weight: 700;
font-size: 1.4rem;
text-transform: uppercase;
background: var(--pb-tag-bg);
}
.pb-surface .mp-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pb-surface .mp-summary-main { flex: 1 1 240px; min-width: 0; }
.pb-surface .mp-name {
font-size: 1.15rem;
font-weight: 700;
color: var(--pb-text);
line-height: 1.25;
margin: 0 0 0.2rem;
word-break: break-word;
}
.pb-surface .mp-title {
font-size: 0.88rem;
color: var(--pb-muted);
margin: 0 0 0.45rem;
}
.pb-surface .mp-meta {
display: flex;
flex-wrap: wrap;
gap: 0.4rem 0.85rem;
font-size: 0.8rem;
color: var(--pb-muted);
align-items: center;
}
.pb-surface .mp-meta i { font-size: 0.95rem; margin-right: 0.25rem; opacity: 0.8; }
.pb-surface .mp-meta-item { display: inline-flex; align-items: center; }
.pb-surface .mp-summary-actions { flex: 0 0 auto; display: flex; gap: 0.5rem; flex-wrap: wrap; }
/* ---------------- Section nav (anchor tabs) ---------------- */
.pb-surface .mp-nav {
position: sticky;
top: 16px;
z-index: 5;
}
.pb-surface .mp-nav .nav-tabs {
flex-wrap: nowrap;
overflow-x: auto;
/* Without this, setting overflow-x: auto causes overflow-y to
compute as auto too, which renders a phantom vertical
scrollbar on the right edge of the tab strip. */
overflow-y: hidden;
}
.pb-surface .mp-nav .nav-tabs::-webkit-scrollbar { height: 4px; }
.pb-surface .mp-nav .nav-tabs::-webkit-scrollbar-thumb { background: var(--pb-border); border-radius: 2px; }
/* Account for sticky tabs when jumping with anchors */
.pb-surface .mp-section { scroll-margin-top: 90px; }
/* ---------------- Section card flourishes ---------------- */
.pb-surface .mp-section .pb-section-head {
border-bottom: 1px solid var(--pb-border-light);
padding-bottom: 1.1rem;
margin-bottom: 0.25rem;
}
.pb-surface .mp-section-head-icon {
width: 38px;
height: 38px;
border-radius: var(--pb-radius-md);
background: var(--pb-tag-bg);
color: var(--pb-tag-text);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.15rem;
flex-shrink: 0;
margin-right: 0.85rem;
}
.pb-surface .mp-head-row { display: flex; align-items: flex-start; gap: 0; flex: 1 1 auto; min-width: 0; }
.pb-surface .mp-head-text { min-width: 0; flex: 1 1 auto; }
.pb-surface .mp-locked-pill {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.65rem;
border-radius: 999px;
background: #f1f5f9;
color: #475569;
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
white-space: nowrap;
}
.pb-surface .mp-locked-pill i { font-size: 0.9rem; }
.pb-surface .mp-editable-pill {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.65rem;
border-radius: 999px;
background: var(--pb-tag-bg);
color: var(--pb-tag-text);
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
white-space: nowrap;
}
.pb-surface .mp-editable-pill i { font-size: 0.9rem; }
/* ---------------- Read-only grid ---------------- */
.pb-surface .mp-readonly-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.1rem 1.5rem;
padding-top: 1.25rem;
}
.pb-surface .mp-readonly-grid > div { min-width: 0; }
.pb-surface .mp-readonly-grid dt {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--pb-muted);
margin-bottom: 0.3rem;
font-weight: 600;
}
.pb-surface .mp-readonly-grid dd {
font-size: 0.95rem;
font-weight: 500;
color: var(--pb-text);
margin: 0;
word-break: break-word;
line-height: 1.4;
}
.pb-surface .mp-readonly-grid dd.empty {
color: var(--pb-muted);
font-weight: 400;
font-style: italic;
}
/* ---------------- Form sub-headings ---------------- */
.pb-surface .mp-subheading {
display: flex;
align-items: center;
gap: 0.5rem;
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 0.75rem;
font-weight: 700;
color: var(--pb-muted);
margin: 0 0 1rem;
}
.pb-surface .mp-subheading::after {
content: "";
flex: 1 1 auto;
border-bottom: 1px dashed var(--pb-border);
margin-left: 0.25rem;
}
/* ---------------- Form controls ---------------- */
.pb-surface .mp-section .form-label {
font-size: 0.82rem;
font-weight: 600;
color: var(--pb-text);
margin-bottom: 0.4rem;
}
.pb-surface .mp-section .form-control,
.pb-surface .mp-section .form-select {
border-radius: var(--pb-radius-md);
border-color: var(--pb-border);
font-size: 0.92rem;
padding: 0.55rem 0.8rem;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pb-surface .mp-section .form-control:focus,
.pb-surface .mp-section .form-select:focus {
border-color: var(--pb-tag-text);
box-shadow: 0 0 0 3px rgba(13, 122, 42, 0.10);
}
.pb-surface .mp-section .form-control[readonly] {
background: #f8fafc;
cursor: not-allowed;
}
.pb-surface .mp-section .form-text { font-size: 0.78rem; color: var(--pb-muted); }
.pb-surface .mp-section .input-group-text {
background: #f8fafc;
border-color: var(--pb-border);
color: var(--pb-muted);
font-size: 0.95rem;
}
/* ---------------- Emergency contact block ---------------- */
.pb-surface .mp-emergency-block {
border: 1px solid var(--pb-border-light);
border-radius: var(--pb-radius-md);
padding: 1.15rem 1.25rem;
background: #fafbfc;
}
.pb-surface .mp-emergency-block + .mp-emergency-block { margin-top: 1rem; }
.pb-surface .mp-emergency-title {
display: flex;
align-items: center;
gap: 0.45rem;
font-size: 0.78rem;
font-weight: 700;
color: var(--pb-text);
margin-bottom: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.pb-surface .mp-emergency-title i { color: var(--pb-tag-text); font-size: 1rem; }
.pb-surface .mp-emergency-title .badge-optional {
background: #f1f5f9;
color: #64748b;
font-weight: 600;
font-size: 0.65rem;
padding: 0.15rem 0.5rem;
border-radius: 999px;
margin-left: auto;
letter-spacing: 0.04em;
}
/* ---------------- Section note (info banner) ---------------- */
.pb-surface .mp-note {
background: #eff6ff;
border: 1px solid #bfdbfe;
border-left: 3px solid #3b82f6;
border-radius: var(--pb-radius-sm, 6px);
padding: 0.7rem 0.95rem;
font-size: 0.85rem;
color: #1e40af;
margin: 0.5rem 0 1.25rem;
}
.pb-surface .mp-note.warn {
background: #fffbeb;
border-color: #fde68a;
border-left-color: #f59e0b;
color: #92400e;
}
.pb-surface .mp-note i { margin-right: 0.4rem; opacity: 0.9; }
/* ---------------- Sticky save bar ----------------
The bar is the last child of #mp-form, and the form starts well
below the read-only cards. A sticky element cannot escape its
parent's box, so sticking to the form meant the bar scrolled away
the moment the form's top passed the viewport. Pin the card to the
viewport instead, and keep a same-height spacer in flow so the last
section is never hidden underneath it. */
.pb-surface .mp-save-bar {
position: static;
margin-top: 1.5rem;
}
.pb-surface .mp-save-bar .pb-section-card {
position: fixed;
bottom: 16px;
left: var(--mp-save-bar-left, 0px);
width: var(--mp-save-bar-width, auto);
z-index: 1030;
margin-bottom: 0;
border: 1px solid var(--pb-border);
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
}
.pb-surface .mp-save-bar .pb-section-body {
padding: 0.9rem 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.pb-surface .mp-save-bar .mp-save-bar-msg {
color: var(--pb-muted);
font-size: 0.85rem;
margin: 0;
}
.pb-surface .mp-save-bar .mp-save-bar-msg i {
color: var(--pb-tag-text);
margin-right: 0.3rem;
}
/* ---------------- Responsive ---------------- */
@media (max-width: 640px) {
.pb-surface .mp-summary { padding: 1rem; }
.pb-surface .mp-avatar { width: 56px; height: 56px; font-size: 1.2rem; }
.pb-surface .mp-name { font-size: 1.05rem; }
.pb-surface .mp-summary-actions { width: 100%; }
.pb-surface .mp-summary-actions .pb-btn-outline,
.pb-surface .mp-summary-actions .pb-primary-btn { width: 100%; }
}
}
@scope ([data-demo-module="org-chart"]) {
/* Hide the layout's default page-header; .pb-hero owns the masthead. */
.dash-content .page-header { display: none; }
/* Org chart specific additions, scoped to .pb-surface */
.pb-surface #orgchart-canvas {
min-height: 600px;
border: 1px solid var(--pb-border-light);
border-radius: var(--pb-radius-lg);
background-image: radial-gradient(circle, rgba(140, 144, 164, 0.18) 1px, transparent 1px);
background-size: 22px 22px;
position: relative; overflow: hidden;
}
.pb-surface .oc-canvas-empty {
position: absolute; inset: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 0.6rem; color: var(--pb-muted); pointer-events: none;
}
.pb-surface .oc-canvas-empty i { font-size: 2.5rem; opacity: 0.45; }
/* Re-enable pointer events for the wizard CTA only — the parent
kills them so the d3 canvas behind stays drag/zoom-clean, but
that also blocks the "Start the Org Chart Wizard" anchor click. */
.pb-surface #oc-empty-wizard { pointer-events: auto; }
.pb-surface .oc-filter-grid {
display: grid;
grid-template-columns: minmax(180px, 1fr) minmax(160px, 1fr) minmax(260px, 1.6fr);
gap: 1rem; align-items: end;
}
@media (max-width: 767px) {
.pb-surface .oc-filter-grid { grid-template-columns: 1fr; }
}
/* Node cards rendered inside d3-org-chart's foreignObject */
.pb-surface .oc-node {
width: 100%; height: 100%;
background: #fff;
border: 1px solid var(--pb-border-light);
border-radius: var(--pb-radius-md);
box-shadow: var(--pb-shadow-soft);
padding: 0.75rem 0.9rem;
display: flex; flex-direction: column; gap: 0.35rem;
font-family: var(--bs-body-font-family);
cursor: grab;
transition: box-shadow 0.15s ease;
}
/* NOTE: deliberately NO `position: relative` on .oc-node.
This element is the root of d3-org-chart's node
content. Safari/WebKit has a long-standing bug where a positioned
(relative/absolute) element inside a is painted at
the SVG root (top-left) instead of at its node-group transform — so
every card stacks in the top-left corner and the chart looks broken.
The card lays out fine with flexbox alone, so we keep it static.
See: github.com/bkrem/react-d3-tree#284, OrgChartJS#399. */
.pb-surface .oc-node:hover { box-shadow: var(--pb-shadow-hero); }
.pb-surface .oc-node.oc-drag-source { opacity: 0.5; }
.pb-surface .oc-node.oc-drop-target { outline: 2px dashed var(--pb-primary, #0c7785); outline-offset: 2px; }
.pb-surface .oc-node.oc-drop-invalid { outline: 2px dashed #dc2626; outline-offset: 2px; }
.pb-surface .oc-node.oc-search-hit { outline: 3px solid #f59e0b; outline-offset: 3px; }
.pb-surface .oc-node.oc-node-focus { outline: 3px solid var(--pb-primary, #0c7785); outline-offset: 3px; }
.pb-surface .oc-node-top { display: flex; gap: 0.7rem; align-items: center; }
.pb-surface .oc-avatar {
width: 40px; height: 40px; border-radius: 999px;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 0.85rem;
color: #fff; flex-shrink: 0;
background: var(--pb-primary, #0c7785);
letter-spacing: 0.2px;
}
.pb-surface .oc-avatar img { width: 100%; height: 100%; border-radius: 999px; object-fit: cover; }
.pb-surface .oc-name { font-weight: 700; font-size: 0.92rem; line-height: 1.1; color: var(--pb-text); }
.pb-surface .oc-title { color: var(--pb-muted); font-size: 0.78rem; line-height: 1.1; margin-top: 0.1rem; }
.pb-surface .oc-chips { display: flex; gap: 0.3rem; flex-wrap: wrap; align-items: center; margin-top: 0.15rem; }
.pb-surface .oc-chip {
font-size: 0.7rem; padding: 0.2rem 0.55rem; border-radius: 999px;
background: var(--pb-neutral-bg); color: var(--pb-neutral-text);
display: inline-flex; align-items: center; gap: 0.25rem;
}
.pb-surface .oc-chip.oc-chip-vacant { background: var(--pb-danger-bg); color: var(--pb-danger-text); }
.pb-surface .oc-chip.oc-chip-dotted { background: var(--pb-warning-bg); color: var(--pb-warning-text); }
.pb-surface .oc-chip.oc-chip-reports { background: var(--pb-info-bg); color: var(--pb-info-text); font-weight: 600; }
.pb-surface .links-wrapper path.link.is-dotted { stroke-dasharray: 4 4; }
/* Mobile fallback */
.pb-surface .oc-mobile-list { display: none; padding: 1rem; }
@media (max-width: 767px) {
.pb-surface #orgchart-canvas .svg-chart-container { display: none !important; }
.pb-surface .oc-mobile-list { display: block; }
}
.pb-surface .oc-mobile-item {
display: flex; align-items: center; gap: 0.6rem;
padding: 0.5rem 0.7rem;
border-bottom: 1px solid var(--pb-border-light);
}
.pb-surface .oc-mobile-item .oc-avatar { width: 32px; height: 32px; font-size: 0.75rem; }
.pb-surface .oc-mobile-toggle { background: none; border: none; padding: 0 0.3rem; color: var(--pb-muted); }
.pb-surface .oc-mobile-children { margin-left: 1.2rem; border-left: 2px solid var(--pb-border-light); padding-left: 0.3rem; }
.pb-surface .oc-mobile-children.is-collapsed { display: none; }
/* Modal validation shake */
@keyframes oc-shake {
0%, 100% { transform: translateX(0); }
15%, 45%, 75% { transform: translateX(-5px); }
30%, 60%, 90% { transform: translateX(5px); }
}
.modal .form-control.is-invalid.oc-shake,
.modal .form-select.is-invalid.oc-shake { animation: oc-shake 0.35s ease-in-out; }
.modal .invalid-feedback { display: block; min-height: 1.1em; }
.modal .invalid-feedback:empty { display: none; }
/* View-employee timeline */
#modal-orgchart-viewemployee .oc-timeline { border-left: 2px solid var(--pb-border-light); padding-left: 1rem; margin-left: 0.25rem; }
#modal-orgchart-viewemployee .oc-timeline-item { position: relative; padding-bottom: 0.85rem; font-size: 0.85rem; }
#modal-orgchart-viewemployee .oc-timeline-item::before {
content: ''; position: absolute; left: -1.35rem; top: 0.3rem;
width: 10px; height: 10px; border-radius: 999px;
background: var(--pb-primary, #0c7785);
box-shadow: 0 0 0 3px rgba(12, 119, 133, 0.18);
}
#modal-orgchart-viewemployee .oc-timeline-item time { color: var(--pb-muted); font-size: 0.72rem; display: block; margin-top: 0.15rem; }
/* Bottom-sheet modals < 576px */
@media (max-width: 575.98px) {
#modal-orgchart-newnode .modal-dialog,
#modal-orgchart-editnode .modal-dialog,
#modal-orgchart-movenode .modal-dialog,
#modal-orgchart-viewemployee .modal-dialog,
#modal-orgchart-history .modal-dialog {
position: fixed; left: 0; right: 0; bottom: 0; top: auto;
margin: 0; max-width: 100%;
}
#modal-orgchart-newnode .modal-content,
#modal-orgchart-editnode .modal-content,
#modal-orgchart-movenode .modal-content,
#modal-orgchart-viewemployee .modal-content,
#modal-orgchart-history .modal-content {
border-top-left-radius: 16px; border-top-right-radius: 16px;
border-bottom-left-radius: 0; border-bottom-right-radius: 0;
max-height: 92vh;
}
}
/* Activity log */
#modal-orgchart-history .oc-history-item {
border: 1px solid var(--pb-border-light); border-radius: var(--pb-radius-md);
padding: 0.6rem 0.75rem; margin-bottom: 0.5rem;
}
#modal-orgchart-history .oc-history-meta { display: flex; gap: 0.5rem; align-items: baseline; justify-content: space-between; font-size: 0.8rem; }
#modal-orgchart-history .oc-history-action {
font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
padding: 0.15rem 0.5rem; border-radius: 999px;
background: var(--pb-info-bg); color: var(--pb-info-text); font-size: 0.72rem;
}
#modal-orgchart-history .oc-history-action.action-delete { background: var(--pb-danger-bg); color: var(--pb-danger-text); }
#modal-orgchart-history .oc-history-action.action-move { background: var(--pb-warning-bg); color: var(--pb-warning-text); }
#modal-orgchart-history .oc-history-action.action-create { background: var(--pb-success-bg); color: var(--pb-success-text); }
#modal-orgchart-history .oc-history-when { color: var(--pb-muted); font-size: 0.72rem; }
#modal-orgchart-history .oc-history-diff {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.78rem; color: #475569;
margin-top: 0.35rem;
}
#modal-orgchart-history .oc-diff-row { display: grid; grid-template-columns: 120px 1fr 1fr; gap: 0.5rem; padding: 0.15rem 0; }
#modal-orgchart-history .oc-diff-field { font-weight: 600; color: var(--pb-text); }
#modal-orgchart-history .oc-diff-old { color: #b91c1c; text-decoration: line-through; }
#modal-orgchart-history .oc-diff-new { color: #047857; }
}
@scope ([data-demo-module="attendance"]) {
#pw-attidx .attidx-self {
overflow: hidden;
}
#pw-attidx .attidx-badge {
display: inline-flex;
align-items: center;
padding: 7px 12px;
border-radius: 999px;
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
border: 1px solid transparent;
}
#pw-attidx .attidx-badge--primary {
background: rgba(14, 165, 233, 0.12);
color: #0369a1;
border-color: rgba(14, 165, 233, 0.18);
}
#pw-attidx .attidx-badge--success {
background: #dcfce7;
color: #15803d;
border-color: #bbf7d0;
}
#pw-attidx .attidx-badge--warning {
background: #fef3c7;
color: #b45309;
border-color: #fde68a;
}
#pw-attidx .attidx-badge--info {
background: #e0f2fe;
color: #0369a1;
border-color: #bae6fd;
}
#pw-attidx .attidx-badge--muted {
background: #f1f5f9;
color: #475569;
border-color: #e2e8f0;
}
#pw-attidx .attidx-kpi-text {
font-size: 1.05rem;
line-height: 1.35;
}
#pw-attidx .attidx-quick-actions {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
gap: 14px;
padding: 0 28px 22px;
}
#pw-attidx .attidx-meta-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
#pw-attidx .attidx-meta-card {
min-height: 92px;
padding: 16px 18px;
border-radius: 18px;
border: 1px solid rgba(var(--pw-accent-rgb), 0.14);
background: linear-gradient(180deg, rgba(var(--pw-accent-rgb), 0.05) 0%, #fff 100%);
}
#pw-attidx .attidx-meta-card span {
display: block;
color: var(--pw-mute);
font-size: 0.74rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
}
#pw-attidx .attidx-meta-card strong {
display: block;
margin-top: 8px;
color: var(--pw-ink);
font-size: 1rem;
line-height: 1.35;
}
#pw-attidx .attidx-action-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
padding: 0 28px 28px;
}
#pw-attidx .attidx-action-card {
display: flex;
flex-direction: column;
gap: 14px;
padding: 18px;
min-height: 220px;
border-radius: 20px;
border: 1px solid var(--pw-border);
background: linear-gradient(180deg, rgba(var(--pw-accent-rgb), 0.04) 0%, #ffffff 72%);
}
#pw-attidx .attidx-action-card--primary {
border-color: rgba(15, 118, 110, 0.18);
background: linear-gradient(180deg, rgba(15, 118, 110, 0.08) 0%, #ffffff 76%);
}
#pw-attidx .attidx-action-card--danger {
border-color: rgba(244, 63, 94, 0.16);
background: linear-gradient(180deg, rgba(244, 63, 94, 0.08) 0%, #ffffff 76%);
}
#pw-attidx .attidx-action-card--success {
border-color: rgba(34, 197, 94, 0.16);
background: linear-gradient(180deg, rgba(34, 197, 94, 0.08) 0%, #ffffff 76%);
}
#pw-attidx .attidx-action-card__icon {
width: 48px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 16px;
background: rgba(255, 255, 255, 0.9);
color: var(--pw-accent);
font-size: 1.2rem;
border: 1px solid rgba(var(--pw-accent-rgb), 0.12);
}
#pw-attidx .attidx-action-card__content strong {
display: block;
color: var(--pw-ink);
font-size: 1rem;
margin-bottom: 6px;
}
#pw-attidx .attidx-action-card__content span {
color: var(--pw-mute);
font-size: 0.84rem;
line-height: 1.55;
}
#pw-attidx .attidx-action-card form {
margin-top: auto;
}
#pw-attidx .attidx-btn {
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 0 16px;
border-radius: 12px;
border: 1px solid transparent;
font-size: 0.88rem;
font-weight: 800;
text-decoration: none;
transition: transform .18s, background .18s, border-color .18s, color .18s, box-shadow .18s;
}
#pw-attidx .attidx-btn:hover {
transform: translateY(-1px);
}
#pw-attidx .attidx-btn:disabled,
#pw-attidx .attidx-btn.disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
#pw-attidx .attidx-btn--solid {
background: linear-gradient(180deg, #14938a 0%, #0f766e 100%);
color: #fff;
box-shadow: 0 12px 24px rgba(15, 118, 110, 0.18);
}
#pw-attidx .attidx-btn--solid:hover {
color: #fff;
background: linear-gradient(180deg, #17a79d 0%, #0f766e 100%);
}
#pw-attidx .attidx-btn--danger {
background: linear-gradient(180deg, #fb7185 0%, #f43f5e 100%);
color: #fff;
box-shadow: 0 12px 24px rgba(244, 63, 94, 0.18);
}
#pw-attidx .attidx-btn--danger:hover {
color: #fff;
background: linear-gradient(180deg, #fb8da0 0%, #f43f5e 100%);
}
#pw-attidx .attidx-btn--success {
background: linear-gradient(180deg, #86efac 0%, #22c55e 100%);
color: #14532d;
box-shadow: 0 12px 24px rgba(34, 197, 94, 0.16);
}
#pw-attidx .attidx-btn--success:hover {
color: #14532d;
background: linear-gradient(180deg, #bbf7d0 0%, #4ade80 100%);
}
#pw-attidx .attidx-btn--ghost {
background: #fff;
color: var(--pw-ink);
border-color: rgba(var(--pw-accent-rgb), 0.18);
}
#pw-attidx .attidx-btn--ghost:hover {
color: var(--pw-ink);
background: rgba(var(--pw-accent-rgb), 0.06);
}
#pw-attidx .attidx-btn--danger-outline {
width: auto;
background: #fff1f2;
color: #be123c;
border-color: #fecdd3;
}
#pw-attidx .attidx-btn--danger-outline:hover {
color: #9f1239;
background: #ffe4e6;
}
#pw-attidx .attidx-filter-form {
padding: 0 28px 28px;
}
#pw-attidx .attidx-filter-grid {
display: grid;
grid-template-columns:
minmax(240px, max-content) minmax(160px, 220px) minmax(160px, 1fr) minmax(160px, 1fr);
gap: 14px 16px;
align-items: end;
}
#pw-attidx .attidx-field {
min-width: 0;
}
#pw-attidx .attidx-field--toggle {
align-self: stretch;
}
/* The Type toggle field shouldn't stretch — its content fits inside
a fixed pill and pulling it wider just leaves whitespace. */
#pw-attidx .attidx-field--toggle > .attidx-toggle {
width: 100%;
}
#pw-attidx .attidx-label {
display: block;
margin-bottom: 8px;
color: var(--pw-mute);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
}
#pw-attidx .attidx-input,
#pw-attidx .attidx-filter-form .form-control {
height: 42px;
border-radius: 12px !important;
border: 1px solid var(--pw-border) !important;
background: #fff;
color: var(--pw-ink);
box-shadow: none !important;
}
#pw-attidx .attidx-input:focus,
#pw-attidx .attidx-filter-form .form-control:focus {
border-color: var(--pw-accent) !important;
box-shadow: 0 0 0 4px rgba(var(--pw-accent-rgb), 0.12) !important;
}
#pw-attidx .attidx-toggle {
display: inline-flex;
gap: 4px;
padding: 4px;
border-radius: 14px;
border: 1px solid var(--pw-border);
background: var(--pw-soft);
}
#pw-attidx .attidx-toggle__input {
position: absolute;
opacity: 0;
pointer-events: none;
}
#pw-attidx .attidx-toggle__btn {
flex: 1 1 0;
min-width: 0;
height: 34px;
padding: 0 18px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
font-size: 0.84rem;
font-weight: 700;
color: var(--pw-mute);
cursor: pointer;
transition: background .18s, color .18s, box-shadow .18s;
user-select: none;
}
#pw-attidx .attidx-toggle__btn:hover {
color: var(--pw-ink);
}
#pw-attidx .attidx-toggle__input:checked + .attidx-toggle__btn {
background: #fff;
color: var(--pw-accent);
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}
#pw-attidx .attidx-filter-actions {
display: flex;
align-items: center;
gap: 16px;
margin-top: 18px;
flex-wrap: wrap;
}
#pw-attidx .attidx-filter-actions .attidx-note {
flex: 1 1 320px;
min-width: 0;
}
#pw-attidx .attidx-note--compact {
min-height: 0;
padding: 12px 14px;
border-radius: 12px;
display: flex;
gap: 10px;
align-items: flex-start;
}
#pw-attidx .attidx-note--compact i {
color: var(--pw-accent);
font-size: 18px;
margin-top: 2px;
flex-shrink: 0;
}
#pw-attidx .attidx-note--compact strong {
display: block;
font-size: 0.85rem;
color: var(--pw-ink);
margin-bottom: 2px;
}
#pw-attidx .attidx-note--compact span {
font-size: 0.78rem;
color: var(--pw-mute);
line-height: 1.45;
}
#pw-attidx .attidx-action-row {
display: inline-flex;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
flex-shrink: 0;
}
#pw-attidx .attidx-action-row .attidx-btn {
width: auto;
min-width: 0;
padding: 0 16px;
height: 42px;
}
#pw-attidx .attidx-table-wrap {
padding: 0 24px 24px;
overflow-x: auto;
}
#pw-attidx .attidx-table thead th {
white-space: nowrap;
}
#pw-attidx .attidx-table tbody td {
vertical-align: middle;
}
#pw-attidx .attidx-status {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 92px;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid transparent;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
}
#pw-attidx .attidx-status--success {
background: #dcfce7;
color: #15803d;
border-color: #bbf7d0;
}
#pw-attidx .attidx-status--danger {
background: #ffe4e6;
color: #be123c;
border-color: #fecdd3;
}
#pw-attidx .attidx-status--info {
background: #e0f2fe;
color: #0369a1;
border-color: #bae6fd;
}
#pw-attidx .attidx-status--muted {
background: #f1f5f9;
color: #64748b;
border-color: #e2e8f0;
}
#pw-attidx .attidx-row-actions {
white-space: nowrap;
}
#pw-attidx .attidx-onbehalf-form {
padding: 0 28px 18px;
}
#pw-attidx .attidx-onbehalf-row {
display: grid;
grid-template-columns: minmax(280px, 1.4fr) auto;
gap: 16px;
align-items: end;
}
#pw-attidx .attidx-onbehalf-actions {
display: inline-flex;
gap: 10px;
}
#pw-attidx .attidx-onbehalf-actions .attidx-btn {
min-width: 140px;
width: auto;
}
#pw-attidx .attidx-onbehalf-note {
display: flex;
gap: 10px;
align-items: flex-start;
margin: 0 28px 22px;
padding: 12px 14px;
border-radius: 12px;
background: rgba(14, 165, 233, 0.08);
border: 1px solid rgba(14, 165, 233, 0.18);
color: #0369a1;
font-size: 0.84rem;
line-height: 1.5;
}
#pw-attidx .attidx-onbehalf-note i {
font-size: 1.05rem;
margin-top: 2px;
}
@media (max-width: 767.98px) {
#pw-attidx .attidx-onbehalf-row {
grid-template-columns: 1fr;
}
#pw-attidx .attidx-onbehalf-actions {
flex-direction: column;
}
#pw-attidx .attidx-onbehalf-actions .attidx-btn {
width: 100%;
}
}
#pw-attidx .dataTables_wrapper .dataTables_length,
#pw-attidx .dataTables_wrapper .dataTables_filter {
margin-bottom: 16px;
}
#pw-attidx .dataTables_wrapper .dataTables_length label,
#pw-attidx .dataTables_wrapper .dataTables_filter label,
#pw-attidx .dataTable-info {
color: var(--pw-mute);
font-size: 0.84rem;
font-weight: 700;
}
#pw-attidx .dataTables_wrapper .dataTables_length select,
#pw-attidx .dataTables_wrapper .dataTables_filter input,
#pw-attidx .dataTable-selector,
#pw-attidx .dataTable-input {
height: 40px;
border: 1px solid var(--pw-border);
border-radius: 12px;
padding: 0 14px;
background: #fff;
color: var(--pw-ink);
}
#pw-attidx .dataTables_wrapper .dataTables_filter input:focus,
#pw-attidx .dataTables_wrapper .dataTables_length select:focus,
#pw-attidx .dataTable-selector:focus,
#pw-attidx .dataTable-input:focus {
border-color: var(--pw-accent);
box-shadow: 0 0 0 4px rgba(var(--pw-accent-rgb), 0.12);
outline: none;
}
#pw-attidx .dataTables_wrapper .dataTables_paginate .paginate_button,
#pw-attidx .dataTable-pagination a {
border-radius: 10px !important;
border: 1px solid var(--pw-border) !important;
}
#pw-attidx .dataTables_wrapper .dataTables_paginate .paginate_button.current,
#pw-attidx .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
#pw-attidx .dataTable-pagination .active a {
color: #fff !important;
border-color: transparent !important;
background: linear-gradient(180deg, #14938a 0%, #0f766e 100%) !important;
}
@media (max-width: 1199.98px) {
#pw-attidx .attidx-action-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#pw-attidx .attidx-filter-grid {
grid-template-columns: minmax(220px, max-content) repeat(2, minmax(0, 1fr));
}
#pw-attidx .attidx-field--toggle {
grid-column: 1 / -1;
}
}
@media (max-width: 991.98px) {
#pw-attidx .attidx-quick-actions {
grid-template-columns: 1fr;
}
#pw-attidx .attidx-filter-actions {
flex-direction: column;
align-items: stretch;
}
#pw-attidx .attidx-filter-actions .attidx-note,
#pw-attidx .attidx-action-row {
flex: 0 0 auto;
width: 100%;
}
#pw-attidx .attidx-action-row {
justify-content: flex-start;
}
}
@media (max-width: 767.98px) {
#pw-attidx .attidx-action-grid,
#pw-attidx .attidx-meta-grid,
#pw-attidx .attidx-filter-grid {
grid-template-columns: 1fr;
}
#pw-attidx .attidx-filter-form {
padding: 0 20px 22px;
}
#pw-attidx .attidx-action-row .attidx-btn {
flex: 1 1 0;
}
}
}
@scope ([data-demo-module="kiosks"]) {
/* Per-page chip + status helpers, scoped to the kiosks page so they
layer on top of the canonical pulsebook.css design system without
polluting the shared file. */
#kiosks-workspace .att-overview-card.is-warning {
background:
radial-gradient(circle at top right, rgba(217, 119, 6, 0.12), transparent 42%),
linear-gradient(180deg, #ffffff 0%, #fffbeb 100%);
border-color: #fcd34d;
}
#kiosks-workspace .att-overview-card.is-warning .att-overview-eyebrow { color: #b45309; }
#kiosks-workspace .kiosk-identifier {
display: inline-block;
padding: 0.18rem 0.55rem;
border-radius: 6px;
background: #f1f5f9;
color: #1e293b;
font-size: 0.82rem;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
#kiosks-workspace .kiosk-action-chip {
display: inline-flex; align-items: center; gap: 0.3rem;
padding: 0.18rem 0.55rem;
border-radius: 999px;
background: #eef2ff;
color: #4338ca;
font-size: 0.78rem;
font-weight: 600;
}
#kiosks-workspace .kiosk-action-chip i { font-size: 0.85rem; }
#kiosks-workspace .kiosk-policy-chip {
display: inline-flex; align-items: center; gap: 0.3rem;
padding: 0.18rem 0.55rem;
border-radius: 999px;
font-size: 0.74rem;
font-weight: 600;
border: 1px solid transparent;
}
#kiosks-workspace .kiosk-policy-chip i { font-size: 0.82rem; }
#kiosks-workspace .kiosk-policy-chip--inherit { background: #f8fafc; color: #64748b; border-color: #e2e8f0; }
#kiosks-workspace .kiosk-policy-chip--on { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
#kiosks-workspace .kiosk-policy-chip--off { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
#kiosks-workspace .kiosk-status-pill {
display: inline-flex; align-items: center; gap: 0.4rem;
padding: 0.25rem 0.65rem;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 600;
}
#kiosks-workspace .kiosk-status-pill .dot {
width: 8px; height: 8px;
border-radius: 50%;
}
#kiosks-workspace .kiosk-status-pill--on { background: #ecfdf5; color: #047857; }
#kiosks-workspace .kiosk-status-pill--on .dot { background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18); }
#kiosks-workspace .kiosk-status-pill--off { background: #f1f5f9; color: #475569; }
#kiosks-workspace .kiosk-status-pill--off .dot { background: #94a3b8; }
#kiosks-workspace .kiosk-icon-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px;
border-radius: 8px;
text-decoration: none;
transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
#kiosks-workspace .kiosk-icon-btn--info { background: #eef2ff; color: #4338ca; }
#kiosks-workspace .kiosk-icon-btn--info:hover { background: #4f46e5; color: #ffffff; transform: translateY(-1px); }
#kiosks-workspace .kiosk-icon-btn--danger { background: #fef2f2; color: #b91c1c; }
#kiosks-workspace .kiosk-icon-btn--danger:hover { background: #dc2626; color: #ffffff; transform: translateY(-1px); }
#kiosks-workspace .kiosk-empty {
display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
padding: 2.5rem 1rem;
color: #64748b;
text-align: center;
}
#kiosks-workspace .kiosk-empty i {
font-size: 2.5rem;
opacity: 0.4;
margin-bottom: 0.35rem;
}
#kiosks-workspace .kiosk-empty strong { color: #0f172a; font-size: 0.95rem; }
#kiosks-workspace .kiosk-empty span { font-size: 0.85rem; }
#kiosks-workspace .pb-primary-btn.is-disabled {
opacity: 0.55;
cursor: not-allowed;
pointer-events: auto;
}
#kiosks-workspace .kiosk-icon-btn--accent {
background: #ecfeff; color: #0e7490; border-color: #cffafe;
}
#kiosks-workspace .kiosk-icon-btn--accent:hover { background: #cffafe; }
#kiosks-workspace .kiosk-icon-btn--warn {
background: #fff7ed; color: #c2410c; border-color: #fed7aa;
}
#kiosks-workspace .kiosk-icon-btn--warn:hover { background: #fed7aa; }
}
@scope ([data-demo-module="kiosks"]) {
.kiosk-qr-overlay {
position: fixed; inset: 0; z-index: 1080;
background: rgba(15, 23, 42, 0.7);
display: flex; align-items: center; justify-content: center;
padding: 20px;
}
.kiosk-qr-card {
width: min(360px, 100%); background: #fff; border-radius: 16px;
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.4); overflow: hidden;
}
.kiosk-qr-card__head {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 18px; border-bottom: 1px solid #e2e8f0;
font-size: 0.95rem;
}
.kiosk-qr-card__close {
background: transparent; border: 0; font-size: 1.4rem; line-height: 1;
color: #64748b; cursor: pointer;
}
.kiosk-qr-card__close:hover { color: #0f172a; }
.kiosk-qr-card__body { padding: 18px; text-align: center; }
.kiosk-qr-card__svg { display: flex; justify-content: center; }
.kiosk-qr-card__svg svg { width: 240px; height: 240px; }
.kiosk-qr-card__url { margin: 14px 0 4px; font-size: 0.78rem; color: #475569; word-break: break-all; }
.kiosk-qr-card__url code { background: #f1f5f9; padding: 4px 8px; border-radius: 6px; }
.kiosk-qr-card__hint { margin: 0; color: #64748b; font-size: 0.78rem; }
}
@scope ([data-demo-module="kiosks"]) {
.kiosk-modal-banner {
display: flex; align-items: flex-start; gap: 0.85rem;
margin: 1rem 1.5rem 0;
padding: 0.85rem 1rem;
border: 1px solid #e0e7ff;
border-radius: 12px;
background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 100%);
color: #1e1b4b;
}
.kiosk-modal-banner__icon {
flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px;
border-radius: 10px;
background: #4f46e5; color: #ffffff;
font-size: 1.1rem;
}
.kiosk-modal-banner strong { display: block; font-size: 0.92rem; }
.kiosk-modal-banner p { font-size: 0.82rem; margin: 0.15rem 0 0; color: #475569; }
.kiosk-modal-footer { padding: 1rem 1.5rem; gap: 0.5rem; }
}
@scope ([data-demo-module="remote-working"]) {
#pw-remote .pw-co-suffix { font-weight: 600; color: var(--pw-mute); font-size: 1.1rem; }
#pw-remote .pw-filter-form .form-label { font-weight: 700; color: var(--pw-ink); font-size: 0.82rem; margin-bottom: 6px; }
#pw-remote .pw-filter-form .form-control,
#pw-remote .pw-filter-form .form-select {
padding: 9px 14px; border-radius: 12px; border: 1px solid var(--pw-border);
font-size: 0.9rem; background: #fff; color: var(--pw-ink);
}
#pw-remote .pw-filter-form .form-control:focus,
#pw-remote .pw-filter-form .form-select:focus {
border-color: var(--pw-accent); box-shadow: 0 0 0 4px rgba(var(--pw-accent-rgb), 0.12); outline: none;
}
#pw-remote .pw-group-row td { background: var(--pw-soft); font-size: 0.85rem; color: var(--pw-mute); padding: 10px 14px; }
#pw-remote .pw-group-row strong { color: var(--pw-ink); }
#pw-remote .pw-status-pending { background: #fef3c7; color: #b45309; border-color: #fde68a; }
#pw-remote .pw-status-reject { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
#pw-remote .pw-fixed-col { position: sticky; right: 0; background: #fff; z-index: 1; }
#pw-remote .pw-table tbody tr:hover .pw-fixed-col { background: var(--pw-soft); }
/* Select2 visual alignment */
#pw-remote .select2-container--default .select2-selection--single {
height: 40px; border-radius: 12px; border-color: var(--pw-border);
}
#pw-remote .select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 40px; padding-left: 14px; padding-right: 30px; color: var(--pw-ink);
}
#pw-remote .select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; width: 30px; }
#pw-remote .select2-container--default .select2-selection--single .select2-selection__clear {
right: 10px; color: #be123c; font-size: 1.3rem;
}
}
@scope ([data-demo-module="remote-working"]) {
.form-check-input:checked {
background-color: #0ab39c;
border-color: #0ab39c;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
background: #0ab39c;
border-color: #0ab39c;
}
.rw-map {
height: 240px;
width: 100%;
border-radius: 8px;
border: 1px solid #e5edf6;
background: #f8fbff;
}
}
@scope ([data-demo-module="timesheets"]) {
#pw-tsidx .tsidx-panel { padding-bottom: 22px; }
#pw-tsidx .tsidx-controls {
display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
gap: 16px; align-items: end;
padding: 0 28px 6px;
}
#pw-tsidx .tsidx-filters {
display: grid; grid-template-columns: minmax(220px, 1.6fr) 1fr 1fr;
gap: 12px; align-items: end; min-width: 0;
}
#pw-tsidx .tsidx-field > label {
display: block; color: var(--pw-mute); font-size: 0.74rem; font-weight: 700;
letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px;
}
#pw-tsidx .tsidx-field .form-control,
#pw-tsidx .tsidx-field select.form-control {
height: 40px; padding: 0 14px;
border: 1px solid var(--pw-border) !important; border-radius: 12px !important;
background: #fff; color: var(--pw-ink); font-size: 0.9rem;
}
#pw-tsidx .tsidx-field .form-control:focus { border-color: var(--pw-accent) !important; box-shadow: 0 0 0 4px rgba(var(--pw-accent-rgb), 0.12) !important; }
#pw-tsidx .tsidx-actions-shell {
display: flex; flex-direction: column; gap: 12px; align-items: stretch;
}
#pw-tsidx .tsidx-actions { display: inline-flex; gap: 8px; align-items: end; justify-content: flex-end; flex-wrap: wrap; }
#pw-tsidx .tsidx-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 10px 18px; border-radius: 14px; font-weight: 700; font-size: 0.9rem;
border: 1px solid transparent; transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
min-height: 42px; line-height: 1;
}
#pw-tsidx .tsidx-btn i {
font-size: 1rem; line-height: 1; display: inline-flex;
}
#pw-tsidx .tsidx-btn--primary {
background: linear-gradient(180deg, #818cf8 0%, #6366f1 100%);
color: #fff;
box-shadow: 0 12px 24px rgba(99,102,241,0.20);
}
#pw-tsidx .tsidx-btn--primary:hover,
#pw-tsidx .tsidx-btn--primary:focus-visible {
background: linear-gradient(180deg, #a5b4fc 0%, #818cf8 100%);
color: #fff;
transform: translateY(-1px);
box-shadow: 0 16px 32px rgba(99,102,241,0.22);
}
#pw-tsidx .tsidx-btn--ghost {
background: #fff; color: var(--pw-mute); border-color: var(--pw-border);
}
#pw-tsidx .tsidx-btn--ghost:hover,
#pw-tsidx .tsidx-btn--ghost:focus-visible {
background: var(--pw-soft); color: var(--pw-ink); border-color: rgba(var(--pw-accent-rgb), 0.30);
}
#pw-tsidx .tsidx-menu { border: 1px solid var(--pw-border); border-radius: 12px; padding: 6px; box-shadow: 0 18px 36px rgba(15,23,42,0.10); }
#pw-tsidx .tsidx-menu .dropdown-item { border-radius: 8px; font-size: 0.86rem; padding: 8px 12px; }
#pw-tsidx .tsidx-grid-wrap { padding: 0 24px 24px; overflow-x: auto; }
#pw-tsidx .tsidx-table thead th {
white-space: nowrap;
background: var(--pw-soft);
color: var(--pw-mute);
}
#pw-tsidx .tsidx-table tbody td { vertical-align: middle; }
#pw-tsidx .tsidx-empty { min-height: 220px; }
@media (max-width: 991.98px) {
#pw-tsidx .tsidx-controls { grid-template-columns: 1fr; }
#pw-tsidx .tsidx-filters { grid-template-columns: 1fr; }
#pw-tsidx .tsidx-actions { justify-content: flex-start; flex-wrap: wrap; }
}
}
@scope ([data-demo-module="shifts"]) {
/* Page-specific tweaks that don't fit into the shared pw-* token surface. */
#pw-att-shifts .ash-screen { animation: ash-fade 0.18s ease-in; }
@keyframes ash-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
#pw-att-shifts .pw-table .pw-row-actions button { cursor: pointer; }
#pw-att-shifts .pw-table tbody td.pw-empty-state { padding: 32px 16px; border-bottom: 0; }
#pw-att-shifts .ti-loader { animation: pw-spin 1.1s linear infinite; }
@keyframes pw-spin { to { transform: rotate(360deg); } }
/* === Shift table column layout ===
The shared pw-table is flex on widths; we steer per-column here so
Name has the headroom it needs and numeric columns hug their values. */
#pw-att-shifts .pw-table { table-layout: auto; }
#pw-att-shifts .ash-col-code { width: 140px; }
#pw-att-shifts .ash-col-name { min-width: 220px; }
#pw-att-shifts .ash-col-type { width: 88px; white-space: nowrap; }
#pw-att-shifts .ash-col-time { width: 130px; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
#pw-att-shifts .ash-col-num { width: 80px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
#pw-att-shifts thead .ash-col-num { text-align: right; }
#pw-att-shifts .ash-col-status { width: 96px; white-space: nowrap; }
#pw-att-shifts .ash-col-actions{ width: 1%; white-space: nowrap; padding-right: 24px; }
#pw-att-shifts .pw-row-name-text { white-space: nowrap; }
#pw-att-shifts .pw-table tbody td { padding-top: 12px; padding-bottom: 12px; }
}
@scope ([data-demo-module="shifts"]) {
.newshift-wizard .pw-section + .pw-section { border-top: 1px solid var(--pw-border); }
.newshift-wizard .pw-repeat__row.row-breaks { grid-template-columns: 2fr 1fr 1fr 1fr 1.6fr 38px; }
.newshift-wizard .pw-repeat__row.row-allowances { grid-template-columns: 2fr 1.4fr 1fr 0.8fr 1fr 38px; }
.newshift-wizard .pw-repeat__row.row-eligibility { grid-template-columns: 1.4fr 1fr 1.6fr 1fr 1fr 38px; }
.newshift-wizard .pw-repeat__row.row-constraints { grid-template-columns: 1fr 2fr 1fr 1fr 1fr 38px; }
@media (max-width: 991.98px) {
.newshift-wizard .pw-repeat__row { grid-template-columns: 1fr !important; }
.newshift-wizard .pw-repeat__row > * { grid-column: span 1; }
}
.newshift-wizard .pw-step__num i { font-size: 0.75rem; }
.newshift-wizard .pw-step.is-done .pw-step__num::after { content: "\2713"; }
.newshift-wizard .pw-step.is-done .pw-step__num { color: #fff; }
.newshift-wizard .pw-step.is-done .pw-step__num > span { display: none; }
}
@scope ([data-demo-module="shift-patterns"]) {
#pw-att-patterns .ash-screen { animation: ash-fade 0.18s ease-in; }
@keyframes ash-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
#pw-att-patterns .pw-table tbody td.pw-empty-state { padding: 32px 16px; border-bottom: 0; }
#pw-att-patterns .ti-loader { animation: pw-spin 1.1s linear infinite; }
@keyframes pw-spin { to { transform: rotate(360deg); } }
}
@scope ([data-demo-module="shift-patterns"]) {
.newpattern-grid {
display: grid; gap: 10px;
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.newpattern-grid__cell {
min-height: 96px;
border: 2px dashed var(--pw-border); border-radius: 14px;
padding: 10px; background: var(--pw-soft);
display: flex; flex-direction: column; gap: 6px; align-items: stretch;
cursor: pointer; transition: all .12s;
}
.newpattern-grid__cell.is-rest { background: var(--pw-soft); border-style: dashed; }
.newpattern-grid__cell.is-working { border-style: solid; border-color: transparent; background: #ffffff; box-shadow: 0 6px 14px rgba(15,23,42,0.06); }
.newpattern-grid__cell.is-dropping { background: rgba(var(--pw-accent-rgb), 0.10); border-color: var(--pw-accent); transform: scale(1.02); }
.newpattern-grid__cell-day {
font-size: 0.7rem; font-weight: 800; color: var(--pw-mute);
text-transform: uppercase; letter-spacing: 0.06em;
}
.newpattern-grid__cell-shift {
flex: 1 1 auto;
display: flex; flex-direction: column; align-items: center; justify-content: center;
border-radius: 10px; padding: 8px;
color: #fff; font-size: 0.82rem; font-weight: 800;
background: var(--cell-color, #3b82f6);
text-align: center; word-break: break-word; line-height: 1.2;
}
.newpattern-grid__cell-shift small { font-size: 0.68rem; opacity: 0.92; font-weight: 600; margin-top: 2px; }
.newpattern-grid__cell-rest {
flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
color: #94a3b8; font-size: 0.78rem; font-style: italic;
}
.newpattern-chip-rail { display: flex; flex-direction: column; gap: 8px; max-height: 600px; overflow-y: auto; }
.newpattern-chip {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px; border-radius: 12px;
background: #fff; border: 1px solid var(--pw-border);
cursor: grab; user-select: none;
transition: border-color .12s, transform .12s;
}
.newpattern-chip:hover { border-color: rgba(var(--pw-accent-rgb), 0.40); transform: translateY(-1px); }
.newpattern-chip:active { cursor: grabbing; }
.newpattern-chip__swatch {
width: 22px; height: 22px; border-radius: 8px;
background: var(--chip-color, #3b82f6);
flex: 0 0 auto;
box-shadow: 0 2px 4px rgba(15,23,42,0.10);
}
.newpattern-chip__body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.newpattern-chip__code { font-size: 0.68rem; font-weight: 800; color: var(--pw-mute); text-transform: uppercase; letter-spacing: 0.04em; }
.newpattern-chip__name { font-size: 0.85rem; font-weight: 700; color: var(--pw-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@scope ([data-demo-module="shift-rotations"]) {
#pw-att-rotations .ash-screen { animation: ash-fade 0.18s ease-in; }
@keyframes ash-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
#pw-att-rotations .pw-table tbody td.pw-empty-state { padding: 32px 16px; border-bottom: 0; }
#pw-att-rotations .ti-loader { animation: pw-spin 1.1s linear infinite; }
@keyframes pw-spin { to { transform: rotate(360deg); } }
}
@scope ([data-demo-module="shift-rotations"]) {
.newrotation-grid-wrap { overflow-x: auto; }
.newrotation-grid {
display: grid; gap: 6px;
min-width: 760px;
}
.newrotation-grid__corner { padding: 6px; }
.newrotation-grid__th {
text-align: center;
font-size: 0.7rem; font-weight: 800; color: var(--pw-mute);
text-transform: uppercase; letter-spacing: 0.04em;
padding: 6px;
}
.newrotation-grid__th--week {
grid-column: span 7;
color: var(--pw-accent);
background: rgba(var(--pw-accent-rgb), 0.06);
border-radius: 8px;
}
.newrotation-grid__team {
display: flex; align-items: center; justify-content: center;
background: rgba(var(--pw-accent-rgb), 0.10);
color: var(--pw-accent); font-weight: 800;
border-radius: 10px;
padding: 6px 8px;
font-size: 0.85rem;
}
.newrotation-grid__cell {
min-height: 56px;
border: 1px dashed var(--pw-border);
border-radius: 10px;
background: var(--pw-soft);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
padding: 4px;
transition: all .12s;
}
.newrotation-grid__cell.is-working { background: var(--cell-color, #3b82f6); border-style: solid; border-color: transparent; color: #fff; font-size: 0.72rem; font-weight: 800; box-shadow: 0 2px 6px rgba(15,23,42,0.10); }
.newrotation-grid__cell.is-rest { color: #94a3b8; font-size: 0.7rem; font-style: italic; }
.newrotation-grid__cell.is-dropping { background: rgba(var(--pw-accent-rgb), 0.12); border-color: var(--pw-accent); transform: scale(1.06); }
.newpattern-chip-rail { display: flex; flex-direction: column; gap: 8px; max-height: 600px; overflow-y: auto; }
.newpattern-chip {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px; border-radius: 12px;
background: #fff; border: 1px solid var(--pw-border);
cursor: grab; user-select: none;
transition: border-color .12s, transform .12s;
}
.newpattern-chip:hover { border-color: rgba(var(--pw-accent-rgb), 0.40); transform: translateY(-1px); }
.newpattern-chip:active { cursor: grabbing; }
.newpattern-chip__swatch { width: 22px; height: 22px; border-radius: 8px; background: var(--chip-color, #3b82f6); flex: 0 0 auto; box-shadow: 0 2px 4px rgba(15,23,42,0.10); }
.newpattern-chip__body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.newpattern-chip__code { font-size: 0.68rem; font-weight: 800; color: var(--pw-mute); text-transform: uppercase; letter-spacing: 0.04em; }
.newpattern-chip__name { font-size: 0.85rem; font-weight: 700; color: var(--pw-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@scope ([data-demo-module="rosters"]) {
#pw-att-rostering .ros-screen { animation: ros-fade 0.18s ease-in; }
@keyframes ros-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
#pw-att-rostering .pw-badge--draft { background: #fef3c7; color: #92400e; border-color: #fde68a; }
#pw-att-rostering .pw-badge--pending { background: #fef9c3; color: #854d0e; border-color: #fef08a; }
#pw-att-rostering .pw-badge--published { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
#pw-att-rostering .pw-badge--locked { background: #f1f5f9; color: #1e293b; border-color: #e2e8f0; }
#pw-att-rostering .pw-badge--archived { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
#pw-att-rostering .pw-table tbody td.pw-empty-state { padding: 32px 16px; border-bottom: 0; }
#pw-att-rostering .ti-loader { animation: pw-spin 1.1s linear infinite; }
@keyframes pw-spin { to { transform: rotate(360deg); } }
}
@scope ([data-demo-module="rosters"]) {
body{font:14px/1.5 -apple-system,Segoe UI,sans-serif;color:#475569;display:flex;align-items:center;justify-content:center;height:100vh;margin:0}
}
@scope ([data-demo-module="rosters"]) {
'
+ ' @page { size: A4 landscape; margin: 10mm; }'
+ ' * { box-sizing: border-box; }'
+ ' html, body { margin: 0; padding: 0; }'
+ ' body { font: 12px/1.45 -apple-system, Segoe UI, Roboto, sans-serif; color: #0f172a; }'
+ ' /* Report-level header. Repeats on every page via the table'
+ ' thead trick: it sits inside a on each printable'
+ ' , with display: table-header-group so browsers'
+ ' reprint it on every page break. */'
+ ' .print-head-row td { padding: 0 !important; border: 0 !important; background: #fff !important; }'
+ ' .print-head { display: flex; justify-content: space-between; align-items: flex-end;'
+ ' border-bottom: 2px solid #0f172a; padding: 0 0 6px 0; margin: 0 0 8px 0; gap: 16px; }'
+ ' .print-head .tenant { font-size: 10px; color: #64748b; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }'
+ ' .print-head h1 { margin: 3px 0 0; font-size: 16px; font-weight: 800; line-height: 1.2; }'
+ ' .print-head .meta { font-size: 10px; color: #475569; line-height: 1.55; text-align: right; white-space: nowrap; }'
+ ' .print-head .meta strong { color: #0f172a; }'
+ ' /* Section title that sits below the running header on every page. */'
+ ' .print-section-title { font-size: 12px; font-weight: 800; color: #1e293b;'
+ ' text-transform: uppercase; letter-spacing: .05em;'
+ ' border-bottom: 1px solid #cbd5e1; padding: 0 0 3px 0; margin: 6px 0 6px 0; }'
+ ' table { width: 100%; border-collapse: collapse; table-layout: fixed; }'
+ ' th, td { padding: 4px 5px; border: 1px solid #e2e8f0; vertical-align: middle;'
+ ' overflow: hidden; word-wrap: break-word; }'
+ ' th { background: #f1f5f9; color: #1e293b; font-weight: 700; text-align: left; }'
+ ' .empty { text-align: center; color: #64748b; padding: 16px; font-style: italic; }'
+ ''
+ ' /* Roster grid — fixed layout, density-driven column widths. */'
+ ' .grid table { font-size: 10px; }'
+ ' .grid.grid--lg table { font-size: 11px; }'
+ ' .grid.grid--md table { font-size: 10px; }'
+ ' .grid.grid--sm table { font-size: 9px; }'
+ ' .grid.grid--xs table { font-size: 8px; }'
+ ' .grid table th, .grid table td { text-align: center; padding: 3px 2px; }'
+ ' .grid table col.emp-col-group { width: 28mm; }'
+ ' .grid table th.emp-col, .grid table td.emp-col {'
+ ' text-align: left; font-weight: 600;'
+ ' white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 3px 6px; }'
+ ' .grid table th.day-th { padding: 3px 1px; line-height: 1.05; }'
+ ' .grid table th.day-th .dow { display: block; font-size: .82em; color: #475569; font-weight: 600; letter-spacing: .02em; }'
+ ' .grid table th.day-th .num { display: block; font-size: 1em; color: #0f172a; font-weight: 800; }'
+ ' .grid .cell { padding: 2px 1px; }'
+ ' .grid .cell.rest { color: #94a3b8; font-size: .82em; letter-spacing: .04em; }'
+ ' .grid .cell .chip { display: inline-block; padding: 1px 4px; border-radius: 3px;'
+ ' background: color-mix(in srgb, var(--c) 18%, white); border: 1px solid var(--c);'
+ ' color: #0f172a; font-weight: 700; font-size: .9em;'
+ ' max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }'
+ ''
+ ' /* Detail table — column widths summing to 100% with table-layout:fixed. */'
+ ' .detail-table { font-size: 10px; }'
+ ' .detail-table col.c-date { width: 14%; }'
+ ' .detail-table col.c-emp { width: 18%; }'
+ ' .detail-table col.c-shift { width: 24%; }'
+ ' .detail-table col.c-time { width: 11%; }'
+ ' .detail-table col.c-hours { width: 8%; }'
+ ' .detail-table col.c-source { width: 12%; }'
+ ' .detail-table col.c-status { width: 13%; }'
+ ' .detail-table tr:nth-child(even) td { background: #f8fafc; }'
+ ' .detail-table thead { display: table-header-group; }'
+ ' .detail-table tr { page-break-inside: avoid; }'
+ ''
+ ' /* Screen preview: add a little body padding so the on-screen'
+ ' view doesnt sit edge-to-edge in the print preview window. */'
+ ' @media screen { body { padding: 14mm 10mm; } }'
+ ' footer.print-foot { margin-top: 12px; font-size: 9px; color: #94a3b8; text-align: center;'
+ ' border-top: 1px solid #e2e8f0; padding-top: 4px; }'
+ '
}
@scope ([data-demo-module="rosters"]) {
.newroster-source-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 12px;
}
.newroster-source-card {
display: block;
border: 2px dashed var(--pw-border); border-radius: 14px;
padding: 14px 14px 14px 40px; cursor: pointer;
transition: all 0.15s; position: relative;
background: #fff;
}
.newroster-source-card input[type="radio"] {
position: absolute; left: 14px; top: 16px;
appearance: none; -webkit-appearance: none;
width: 18px; height: 18px; border-radius: 999px;
border: 2px solid #cbd5e1; background: #fff;
cursor: pointer;
}
.newroster-source-card input[type="radio"]:checked {
border-color: var(--pw-accent); background: var(--pw-accent);
box-shadow: inset 0 0 0 3px #fff;
}
.newroster-source-card:has(input:checked) {
border-color: var(--pw-accent); border-style: solid;
background: rgba(var(--pw-accent-rgb), 0.05);
box-shadow: 0 6px 14px rgba(var(--pw-accent-rgb), 0.12);
}
.newroster-source-card__body { display: flex; flex-direction: column; gap: 4px; }
.newroster-source-card__body i { font-size: 1.25rem; color: var(--pw-accent); }
.newroster-source-card__body strong { font-size: 0.92rem; font-weight: 800; color: var(--pw-ink); }
.newroster-source-card__body small { color: var(--pw-mute); font-size: 0.78rem; line-height: 1.4; display: block; }
/* Employee multiselect (Step 3 - Scope) */
.newroster-emp-picker { display: flex; flex-direction: column; gap: 12px; }
.newroster-emp-toolbar {
display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap;
}
.newroster-emp-search {
flex: 1 1 320px; min-width: 240px;
position: relative;
display: flex; align-items: center;
}
.newroster-emp-search > i {
position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
color: var(--pw-mute); font-size: 1rem; pointer-events: none;
}
.newroster-emp-search input {
width: 100%;
padding: 10px 36px 10px 36px;
border: 1px solid var(--pw-border);
border-radius: 10px;
font-size: 0.9rem;
background: #fff;
transition: border-color .15s ease, box-shadow .15s ease;
}
.newroster-emp-search input:focus {
outline: none;
border-color: var(--pw-accent);
box-shadow: 0 0 0 3px var(--pw-accent-bg);
}
.newroster-emp-search__clear {
position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
background: transparent; border: 0; padding: 4px;
color: var(--pw-mute); cursor: pointer; border-radius: 6px;
display: none;
}
.newroster-emp-search__clear:hover { background: var(--pw-soft); color: var(--pw-ink); }
.newroster-emp-toolbar__actions {
display: flex; gap: 8px; align-items: center; flex: 0 0 auto;
}
.newroster-emp-toolbar__actions .newroster-emp-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px;
border-radius: 10px;
border: 1px solid var(--pw-border);
background: #fff; color: var(--pw-ink);
font-size: 0.82rem; font-weight: 600;
cursor: pointer; white-space: nowrap;
transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.newroster-emp-toolbar__actions .newroster-emp-btn:hover {
background: var(--pw-soft); border-color: var(--pw-accent);
}
.newroster-emp-toolbar__actions .newroster-emp-btn i { font-size: 0.95rem; }
.newroster-emp-toolbar__actions .newroster-emp-btn--danger:hover {
color: #dc2626; border-color: #fecaca; background: #fef2f2;
}
.newroster-emp-summary {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 16px; padding: 10px 14px;
background: var(--pw-soft); border-radius: 10px;
font-size: 0.82rem; color: var(--pw-mute);
flex-wrap: wrap;
}
.newroster-emp-summary__count {
flex: 0 0 auto; line-height: 1.6;
white-space: nowrap;
}
.newroster-emp-summary__count strong { color: var(--pw-accent); font-weight: 700; }
.newroster-emp-summary__dot { margin: 0 .35rem; opacity: .5; }
.newroster-emp-chips {
display: flex; flex-wrap: wrap; gap: 6px;
max-height: 72px; overflow-y: auto;
flex: 1 1 280px; min-width: 0;
justify-content: flex-end;
}
.newroster-emp-chip {
display: inline-flex; align-items: center; gap: 6px;
background: #fff; border: 1px solid var(--pw-border);
color: var(--pw-ink); font-size: 0.72rem; font-weight: 600;
padding: 3px 8px 3px 10px; border-radius: 999px;
max-width: 220px;
}
.newroster-emp-chip > span {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
min-width: 0;
}
.newroster-emp-chip button {
background: transparent; border: 0; color: var(--pw-mute);
cursor: pointer; padding: 0; line-height: 1; flex: 0 0 auto;
display: inline-flex; align-items: center;
}
.newroster-emp-chip button:hover { color: #dc2626; }
.newroster-emp-list {
border: 1px solid var(--pw-border); border-radius: 12px;
max-height: 360px; overflow-y: auto; background: #fff;
padding: 6px;
}
.newroster-emp-row {
display: flex; align-items: center; gap: 12px;
padding: 10px 12px; border-radius: 8px;
cursor: pointer; user-select: none;
transition: background .12s ease;
margin: 0;
}
.newroster-emp-row + .newroster-emp-row {
border-top: 1px solid var(--pw-border);
border-radius: 0;
}
.newroster-emp-row:first-child { border-top-left-radius: 8px; border-top-right-radius: 8px; }
.newroster-emp-row:last-child { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
.newroster-emp-row:hover { background: var(--pw-soft); }
.newroster-emp-row.is-selected { background: var(--pw-accent-bg); }
.newroster-emp-row input[type="checkbox"] { margin: 0; cursor: pointer; flex: 0 0 auto; }
.newroster-emp-row__avatar {
width: 34px; height: 34px; flex: 0 0 34px;
border-radius: 8px;
background: var(--pw-accent-bg); color: var(--pw-accent);
display: inline-flex; align-items: center; justify-content: center;
font-size: 0.72rem; font-weight: 700;
}
.newroster-emp-row__body {
flex: 1 1 auto; min-width: 0; line-height: 1.3;
display: flex; flex-direction: column; gap: 2px;
}
.newroster-emp-row__name {
font-size: 0.88rem; font-weight: 600; color: var(--pw-ink);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.newroster-emp-row__sub {
font-size: 0.74rem; color: var(--pw-mute);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.newroster-emp-row__id {
font-size: 0.7rem; color: var(--pw-mute); font-family: monospace;
flex: 0 0 auto;
}
.newroster-emp-empty {
display: flex; flex-direction: column; align-items: center;
gap: 6px; padding: 28px 12px; color: var(--pw-mute);
font-size: 0.85rem;
}
.newroster-emp-empty i { font-size: 1.6rem; opacity: .55; }
}
@scope ([data-demo-module="rosters"]) {
.ros-calendar-grid {
display: grid; grid-template-columns: 220px minmax(0, 1fr) 260px; gap: 12px;
}
.ros-calendar-centre {
background: #fff; border: 1px solid #e5edf6; border-radius: 14px;
padding: 14px 16px; overflow: hidden; min-width: 0;
}
.ros-calendar-centre .fc-resource-timeline th,
.ros-calendar-centre .fc-resource-timeline td { vertical-align: middle; }
.ros-calendar-centre .fc-datagrid-cell-cushion { font-weight: 600; color: #132238; }
.ros-calendar-centre .fc-timeline-slot-cushion { font-size: 0.78rem; font-weight: 600; color: #475569; }
.ros-calendar-centre .fc-toolbar-title { font-size: 1rem; font-weight: 700; color: #132238; }
.ros-rail {
background: #fff; border: 1px solid #e5edf6; border-radius: 14px;
padding: 14px 14px; overflow-y: auto;
}
.ros-rail__title {
display: flex; align-items: center; gap: 8px;
font-size: 0.85rem; font-weight: 700; color: #132238;
margin: 0 0 8px;
}
.ros-rail__body { font-size: 0.85rem; }
.ros-rail__section { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px dashed #f1f5f9; }
.ros-rail__section:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.ros-shift-palette { display: flex; flex-direction: column; gap: 6px; }
.ros-shift-chip {
display: flex !important; align-items: center; gap: 10px;
padding: 10px 12px !important; border-radius: 10px !important;
background: #fff !important;
border: 1px solid #e5edf6 !important;
border-left: 4px solid var(--chip-color, #3b82f6) !important;
color: #132238 !important;
cursor: grab; user-select: none;
box-shadow: none !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
.ros-shift-chip:hover {
border-color: rgba(var(--pw-accent-rgb, 5,150,105), 0.45) !important;
box-shadow: 0 2px 8px rgba(15,23,42,0.06) !important;
}
.ros-shift-chip:active { cursor: grabbing; transform: scale(0.98); }
.ros-shift-chip__swatch { width: 14px; height: 14px; border-radius: 4px; background: var(--chip-color, #3b82f6) !important; flex: 0 0 auto; }
.ros-shift-chip__code { font-size: 0.68rem !important; font-weight: 700 !important; color: #94a3b8 !important; text-transform: uppercase; letter-spacing: 0.04em; }
.ros-shift-chip__name { font-size: 0.85rem !important; font-weight: 600 !important; color: #132238 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ros-employee-pool { display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow-y: auto; }
.ros-employee-pool label { font-size: 0.85rem; padding: 2px 0; }
.ros-validation-list .ros-violation {
display: flex; gap: 8px; align-items: flex-start;
padding: 6px 8px; border-radius: 8px; margin-bottom: 6px;
background: #fff; border: 1px solid #f1f5f9;
}
.ros-validation-list .ros-violation--block { border-left: 4px solid #dc2626; }
.ros-validation-list .ros-violation--warn { border-left: 4px solid #d97706; }
.ros-validation-list .ros-violation--info { border-left: 4px solid #2563eb; }
.ros-validation-list code { background: #f1f5f9; padding: 1px 5px; border-radius: 4px; font-size: 0.74rem; }
.ros-context-menu {
position: fixed; z-index: 1080;
background: #fff; border: 1px solid #e5edf6; border-radius: 10px;
box-shadow: 0 12px 30px rgba(15,23,42,0.12);
padding: 6px; display: flex; flex-direction: column; min-width: 200px;
}
.ros-context-menu button {
display: flex; gap: 8px; align-items: center;
background: none; border: 0; padding: 8px 10px; border-radius: 6px;
text-align: left; font-size: 0.88rem; color: #132238;
}
.ros-context-menu button:hover { background: #ecfdf5; color: #059669; }
.fc { background: #fff; }
.fc-event.ros-assign--rest { opacity: 0.5; }
/* === Calendar event tile === */
.ros-calendar-centre .fc-timeline-event {
border-radius: 6px; padding: 0;
border: 0; box-shadow: 0 1px 2px rgba(15,23,42,0.10);
overflow: hidden;
}
.ros-calendar-centre .fc-timeline-event .fc-event-main { padding: 0; }
.ros-calendar-centre .ros-evt-code {
padding: 6px 8px; font-size: 0.78rem; font-weight: 700;
color: #fff; letter-spacing: 0.02em;
text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
text-align: center;
}
.ros-calendar-centre .fc-timeline-event:hover { filter: brightness(1.08); }
/* === Header toolbar — emerald segmented pills === */
.ros-calendar-centre .fc-toolbar.fc-header-toolbar {
margin-bottom: 14px;
padding: 4px 4px 10px;
border-bottom: 1px solid #eef2f7;
}
.ros-calendar-centre .fc-toolbar-title {
font-size: 0.95rem !important; font-weight: 700; color: #132238;
letter-spacing: 0.01em;
}
.ros-calendar-centre .fc-button-group,
.ros-calendar-centre .fc-toolbar-chunk .fc-button-group {
background: #f1f5f9; border-radius: 999px; padding: 3px;
box-shadow: none; gap: 0;
}
.ros-calendar-centre .fc-button,
.ros-calendar-centre .fc-button-primary {
background: transparent !important;
border: 0 !important;
color: #475569 !important;
font-size: 0.78rem !important;
font-weight: 600 !important;
padding: 6px 12px !important;
border-radius: 999px !important;
box-shadow: none !important;
text-transform: none !important;
transition: background 0.15s ease, color 0.15s ease;
}
.ros-calendar-centre .fc-button:hover { background: rgba(15,23,42,0.05) !important; color: #132238 !important; }
.ros-calendar-centre .fc-button.fc-button-active,
.ros-calendar-centre .fc-button-primary:not(:disabled).fc-button-active {
background: #fff !important;
color: var(--pw-accent, #059669) !important;
box-shadow: 0 1px 2px rgba(15,23,42,0.10) !important;
}
.ros-calendar-centre .fc-button:disabled { opacity: 0.4 !important; }
.ros-calendar-centre .fc-button:focus { box-shadow: none !important; }
/* Today + nav: keep as standalone capsule buttons */
.ros-calendar-centre .fc-today-button,
.ros-calendar-centre .fc-prev-button,
.ros-calendar-centre .fc-next-button {
background: #fff !important;
border: 1px solid #e5edf6 !important;
color: #475569 !important;
padding: 6px 12px !important;
}
.ros-calendar-centre .fc-prev-button { border-radius: 8px 0 0 8px !important; }
.ros-calendar-centre .fc-next-button { border-radius: 0 8px 8px 0 !important; border-left: 0 !important; }
.ros-calendar-centre .fc-today-button { border-radius: 8px !important; margin-left: 8px !important; }
.ros-calendar-centre .fc-today-button:hover,
.ros-calendar-centre .fc-prev-button:hover,
.ros-calendar-centre .fc-next-button:hover { background: #f8fafc !important; }
/* === Resource (employee) column === */
.ros-calendar-centre .fc-datagrid-cell-cushion {
font-size: 0.82rem; font-weight: 600; color: #132238;
padding: 8px 10px;
}
.ros-calendar-centre .fc-datagrid-header .fc-datagrid-cell-cushion {
text-transform: uppercase; font-size: 0.72rem;
color: #74839a; letter-spacing: 0.06em;
}
/* === Slot labels === */
.ros-calendar-centre .fc-timeline-slot-cushion {
font-size: 0.76rem !important; font-weight: 600 !important;
color: #475569 !important;
}
.ros-calendar-centre .fc-day-today .fc-timeline-slot-cushion { color: var(--pw-accent, #059669) !important; }
.ros-calendar-centre .fc-day-today { background: rgba(var(--pw-accent-rgb, 5,150,105), 0.05) !important; }
.ros-calendar-centre .fc-day-sat,
.ros-calendar-centre .fc-day-sun { background: #fafbfc; }
.ros-calendar-centre .fc-day-sat .fc-timeline-slot-cushion,
.ros-calendar-centre .fc-day-sun .fc-timeline-slot-cushion { color: #94a3b8 !important; }
/* === Custom header action buttons === */
.ros-header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ros-header-actions__group { display: flex; align-items: center; gap: 4px; }
.ros-header-actions__group--secondary {
padding-right: 10px; border-right: 1px solid #e5edf6;
}
.ros-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px; border-radius: 10px;
font-size: 0.82rem; font-weight: 600;
border: 1px solid transparent;
transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
white-space: nowrap;
}
.ros-btn--outline {
background: #fff; color: var(--pw-accent, #059669);
border-color: rgba(var(--pw-accent-rgb, 5,150,105), 0.30);
}
.ros-btn--outline:hover { background: rgba(var(--pw-accent-rgb, 5,150,105), 0.08); }
.ros-btn--ghost {
background: transparent; color: #475569;
border-color: transparent;
}
.ros-btn--ghost:hover { background: #f1f5f9; color: #0f172a; }
.ros-btn--primary {
background: var(--pw-accent, #059669); color: #fff;
border-color: var(--pw-accent, #059669);
box-shadow: 0 1px 2px rgba(5,150,105,0.20);
}
.ros-btn--primary:hover:not(:disabled) {
background: #047857; border-color: #047857;
box-shadow: 0 4px 12px rgba(5,150,105,0.25);
}
.ros-btn--primary:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.ros-btn--danger {
background: #be123c; color: #fff;
border-color: #be123c;
box-shadow: 0 1px 2px rgba(190,18,60,0.20);
}
.ros-btn--danger:hover:not(:disabled) {
background: #9f1239; border-color: #9f1239;
box-shadow: 0 4px 12px rgba(190,18,60,0.25);
}
.ros-btn--danger:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
/* Bulk-apply button + modal */
.ros-bulk-btn {
background: rgba(var(--pw-accent-rgb, 5,150,105), 0.08);
color: var(--pw-accent, #059669);
border: 1px solid rgba(var(--pw-accent-rgb, 5,150,105), 0.30);
font-weight: 600;
}
.ros-bulk-btn:hover { background: rgba(var(--pw-accent-rgb, 5,150,105), 0.16); color: var(--pw-accent, #059669); }
.ros-bulk-modal { position: fixed; inset: 0; z-index: 1090; }
.ros-bulk-modal__backdrop { position: absolute; inset: 0; background: rgba(15,23,42,0.45); }
.ros-bulk-modal__panel {
position: relative; max-width: 520px; margin: 5vh auto 0;
background: #fff; border-radius: 14px; box-shadow: 0 18px 50px rgba(15,23,42,0.25);
display: flex; flex-direction: column; max-height: 86vh; overflow: hidden;
}
.ros-bulk-modal__header {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 18px; border-bottom: 1px solid #e5edf6;
}
.ros-bulk-modal__header h4 { margin: 0; font-size: 1rem; font-weight: 700; color: #132238; display: flex; gap: 8px; align-items: center; }
.ros-bulk-modal__close { background: none; border: 0; color: #74839a; font-size: 1.1rem; padding: 4px 6px; border-radius: 6px; }
.ros-bulk-modal__close:hover { background: #f1f5f9; color: #132238; }
.ros-bulk-modal__body { padding: 16px 18px; overflow-y: auto; }
.ros-bulk-modal__footer {
display: flex; gap: 8px; justify-content: flex-end;
padding: 12px 18px; border-top: 1px solid #e5edf6; background: #fafbfc;
}
.ros-bulk-modal__summary { padding: 6px 0 0; font-style: italic; }
.ros-bulk-dow { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.ros-bulk-dow label { font-size: 0.85rem; color: #132238; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.ros-bulk-emps {
display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px;
max-height: 180px; overflow-y: auto;
padding: 8px; border: 1px solid #e5edf6; border-radius: 8px; background: #fafbfc;
}
.ros-bulk-emps label { font-size: 0.85rem; color: #132238; display: flex; align-items: center; gap: 6px; cursor: pointer; }
/* Preview modal — wider panel + summary cards */
.ros-preview-modal { position: fixed; inset: 0; z-index: 1091; }
.ros-preview-modal__panel {
position: relative; max-width: 720px; margin: 5vh auto 0;
background: #fff; border-radius: 14px; box-shadow: 0 18px 50px rgba(15,23,42,0.25);
display: flex; flex-direction: column; max-height: 86vh; overflow: hidden;
}
.ros-preview-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.ros-preview-summary__card {
padding: 10px 12px; border: 1px solid #e5edf6; border-radius: 10px; background: #fafbfc;
}
.ros-preview-summary__label { font-size: 0.68rem; font-weight: 700; color: #74839a; text-transform: uppercase; letter-spacing: 0.04em; }
.ros-preview-summary__value { font-size: 1.05rem; font-weight: 700; color: #132238; margin-top: 4px; }
.ros-preview-section { margin-top: 14px; }
.ros-preview-section h6 { font-size: 0.82rem; font-weight: 700; color: #132238; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.ros-preview-emp-table { width: 100%; font-size: 0.82rem; }
.ros-preview-emp-table th, .ros-preview-emp-table td { padding: 6px 8px; text-align: left; border-bottom: 1px solid #f1f5f9; }
.ros-preview-emp-table th { font-weight: 700; color: #74839a; text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.04em; }
.ros-preview-emp-table td.text-end, .ros-preview-emp-table th.text-end { text-align: right; }
.ros-preview-vlist { display: flex; flex-direction: column; gap: 6px; }
.ros-preview-vbadge {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px; border-radius: 999px;
font-size: 0.78rem; font-weight: 600;
}
.ros-preview-vbadge--ok { background: #dcfce7; color: #15803d; }
.ros-preview-vbadge--warn { background: #fef3c7; color: #92400e; }
.ros-preview-vbadge--block { background: #fee2e2; color: #b91c1c; }
.ros-preview-note {
display: flex; gap: 8px; align-items: flex-start;
padding: 10px 12px; border-radius: 8px; margin-bottom: 14px;
background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af;
font-size: 0.82rem;
}
.ros-preview-note .ti { font-size: 1rem; margin-top: 1px; }
/* Footer status line — explains a disabled "Publish" button */
.ros-preview-footer-status {
flex: 1 1 auto; min-width: 0;
font-size: 0.78rem; color: #475569;
display: flex; align-items: center; gap: 6px;
}
.ros-preview-footer-status .ti { font-size: 0.95rem; flex: 0 0 auto; }
.ros-preview-footer-status--block { color: #b91c1c; }
.ros-preview-footer-status--warn { color: #92400e; }
.ros-preview-footer-status--ok { color: #15803d; }
.ros-bulk-modal__footer { align-items: center; }
.ros-btn[disabled] { cursor: not-allowed; }
.ros-cell-heatmap--green { background: rgba(16,185,129,0.10); }
.ros-cell-heatmap--yellow { background: rgba(217,119,6,0.12); }
.ros-cell-heatmap--red { background: rgba(220,38,38,0.14); }
}
@scope ([data-demo-module="coverage"]) {
#pw-att-coverage .pw-badge--sev-low { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
#pw-att-coverage .pw-badge--sev-medium { background: #fef3c7; color: #92400e; border-color: #fde68a; }
#pw-att-coverage .pw-badge--sev-high { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
#pw-att-coverage .pw-badge--sev-critical { background: #b91c1c; color: #fff; border-color: #b91c1c; }
#pw-att-coverage .pw-table tbody td.pw-empty-state { padding: 32px 16px; border-bottom: 0; }
}
@scope ([data-demo-module="swaps"]) {
#pw-att-swaps .pw-table tbody td.pw-empty-state { padding: 32px 16px; border-bottom: 0; }
}
@scope ([data-demo-module="offers"]) {
#pw-att-offers .pw-table tbody td.pw-empty-state { padding: 32px 16px; border-bottom: 0; }
#pw-att-offers .ti-loader { animation: pw-spin 1.1s linear infinite; }
@keyframes pw-spin { to { transform: rotate(360deg); } }
}
@scope ([data-demo-module="on-call"]) {
#pw-att-oncall .pw-table tbody td.pw-empty-state { padding: 32px 16px; border-bottom: 0; }
#pw-att-oncall .ti-loader { animation: pw-spin 1.1s linear infinite; }
@keyframes pw-spin { to { transform: rotate(360deg); } }
}
@scope ([data-demo-module="availability"]) {
#pw-att-availability .availability-heatmap-wrap { overflow-x: auto; padding: 4px 4px 0; }
#pw-att-availability .availability-heatmap {
width: 100%; border-collapse: separate; border-spacing: 4px;
min-width: 880px;
}
#pw-att-availability .availability-heatmap__corner {
background: #fff; padding: 12px 14px;
border-radius: 12px; border: 1px solid var(--pw-border);
text-align: left; min-width: 240px; vertical-align: middle;
position: sticky; left: 0; z-index: 2;
}
#pw-att-availability .availability-heatmap__corner-label {
font-size: 0.78rem; font-weight: 800; color: var(--pw-mute);
text-transform: uppercase; letter-spacing: 0.04em;
}
#pw-att-availability .availability-heatmap__dayhead {
background: #fff; padding: 10px 12px; text-align: center;
border-radius: 12px; border: 1px solid var(--pw-border);
min-width: 100px;
}
#pw-att-availability .availability-heatmap__dayhead.is-today {
background: rgba(var(--pw-accent-rgb), 0.08); border-color: var(--pw-accent);
}
#pw-att-availability .availability-heatmap__dow { font-size: 0.72rem; font-weight: 800; color: var(--pw-mute); text-transform: uppercase; letter-spacing: 0.06em; }
#pw-att-availability .availability-heatmap__dom { font-size: 0.95rem; font-weight: 800; color: var(--pw-ink); margin-top: 2px; }
#pw-att-availability .availability-heatmap__coverage {
margin-top: 6px; display: inline-flex; align-items: center; gap: 4px;
font-size: 0.72rem; font-weight: 700; color: var(--pw-mute);
padding: 3px 8px; border-radius: 999px; background: var(--pw-soft);
}
#pw-att-availability .availability-heatmap__coverage.is-ok { background: #dcfce7; color: #15803d; }
#pw-att-availability .availability-heatmap__coverage.is-shortfall { background: #fee2e2; color: #b91c1c; }
#pw-att-availability .availability-heatmap__coverage i { font-size: 0.78rem; }
#pw-att-availability .availability-heatmap__rowhead {
background: #fff; padding: 10px 14px; text-align: left;
border-radius: 12px; border: 1px solid var(--pw-border);
position: sticky; left: 0; z-index: 1;
}
#pw-att-availability .availability-heatmap__emp { display: flex; align-items: center; gap: 10px; min-width: 0; }
#pw-att-availability .availability-heatmap__avatar {
width: 32px; height: 32px; border-radius: 10px;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, rgba(var(--pw-accent-rgb), 0.18), rgba(var(--pw-accent-rgb), 0.32));
color: var(--pw-accent); font-weight: 800; font-size: 0.74rem; letter-spacing: 0.02em;
flex-shrink: 0;
}
#pw-att-availability .availability-heatmap__emp-text { display: flex; flex-direction: column; min-width: 0; }
#pw-att-availability .availability-heatmap__emp-name { font-weight: 700; color: var(--pw-ink); font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
#pw-att-availability .availability-heatmap__emp-meta { font-size: 0.74rem; color: var(--pw-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
#pw-att-availability .availability-heatmap__cell {
padding: 10px 8px; text-align: center; cursor: pointer;
border-radius: 12px; border: 1px solid transparent;
transition: transform .12s, box-shadow .12s;
vertical-align: middle; line-height: 1.2;
}
#pw-att-availability .availability-heatmap__cell:hover {
transform: translateY(-1px); box-shadow: 0 6px 14px rgba(15,23,42,0.10);
}
#pw-att-availability .availability-heatmap__cell-status { display: block; font-weight: 700; font-size: 0.78rem; }
#pw-att-availability .availability-heatmap__cell-window { display: block; font-size: 0.7rem; opacity: 0.85; margin-top: 1px; }
#pw-att-availability .availability-heatmap__cell--preferred { background: #dcfce7; color: #15803d; }
#pw-att-availability .availability-heatmap__cell--available { background: #f1f5f9; color: #475569; }
#pw-att-availability .availability-heatmap__cell--available-on-request { background: #fef3c7; color: #92400e; }
#pw-att-availability .availability-heatmap__cell--unavailable { background: #fee2e2; color: #b91c1c; }
#pw-att-availability .availability-heatmap__cell--on-leave { background: #dbeafe; color: #1e40af; }
#pw-att-availability .availability-legend {
display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
padding: 12px 20px; border-top: 1px solid var(--pw-border);
margin-top: 6px;
font-size: 0.82rem; color: var(--pw-ink); font-weight: 600;
}
#pw-att-availability .availability-swatch {
display: inline-block; width: 14px; height: 14px;
border-radius: 4px; margin-right: 6px; vertical-align: middle;
}
#pw-att-availability .availability-swatch--preferred { background: #dcfce7; }
#pw-att-availability .availability-swatch--available { background: #f1f5f9; }
#pw-att-availability .availability-swatch--available-on-request { background: #fef3c7; }
#pw-att-availability .availability-swatch--unavailable { background: #fee2e2; }
#pw-att-availability .availability-swatch--on-leave { background: #dbeafe; }
}
@scope ([data-demo-module="my-swaps"]) {
#pw-att-myswaps .my-swaps-kpis {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
@media (max-width: 992px) {
#pw-att-myswaps .my-swaps-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#pw-att-myswaps .my-swaps-kpi {
position: relative;
background: #fff;
border: 1px solid var(--pw-border, #e5e7eb);
border-radius: 14px;
padding: 14px 16px;
display: flex; flex-direction: column; gap: 4px;
transition: transform .15s ease, box-shadow .15s ease;
}
#pw-att-myswaps .my-swaps-kpi:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(15, 23, 42, .06);
}
#pw-att-myswaps .my-swaps-kpi__label {
font-size: .78rem; font-weight: 600;
color: var(--pw-mute, #475569);
display: inline-flex; align-items: center; gap: 6px;
text-transform: uppercase; letter-spacing: .04em;
}
#pw-att-myswaps .my-swaps-kpi__value {
font-size: 1.65rem; font-weight: 700;
color: var(--pw-ink, #0f172a); line-height: 1.1;
}
#pw-att-myswaps .my-swaps-kpi__hint {
font-size: .74rem; color: var(--pw-mute, #6b7280);
}
#pw-att-myswaps .my-swaps-kpi--incoming { border-left: 4px solid #d97706; }
#pw-att-myswaps .my-swaps-kpi--incoming .my-swaps-kpi__label { color: #b45309; }
#pw-att-myswaps .my-swaps-kpi--outgoing { border-left: 4px solid #2563eb; }
#pw-att-myswaps .my-swaps-kpi--outgoing .my-swaps-kpi__label { color: #1d4ed8; }
#pw-att-myswaps .my-swaps-kpi--manager { border-left: 4px solid #9333ea; }
#pw-att-myswaps .my-swaps-kpi--manager .my-swaps-kpi__label { color: #7e22ce; }
#pw-att-myswaps .my-swaps-kpi--done { border-left: 4px solid #16a34a; }
#pw-att-myswaps .my-swaps-kpi--done .my-swaps-kpi__label { color: #15803d; }
#pw-att-myswaps .my-swaps-warning {
margin: 12px 16px 4px;
display: flex; align-items: flex-start; gap: 10px;
padding: 12px 14px;
background: #fef3c7;
border: 1px solid #fde68a;
border-radius: 10px;
color: #92400e;
}
#pw-att-myswaps .my-swaps-warning i { font-size: 1.1rem; margin-top: 2px; }
#pw-att-myswaps .my-swaps-warning strong { display: block; font-size: .88rem; }
#pw-att-myswaps .my-swaps-warning span { font-size: .8rem; opacity: .85; }
#pw-att-myswaps .my-swaps-tabs {
display: flex; gap: 4px;
padding: 10px 16px 0;
border-bottom: 1px solid var(--pw-border, #e5e7eb);
margin-bottom: 0;
}
#pw-att-myswaps .my-swaps-tab {
appearance: none; border: 0; background: transparent;
color: var(--pw-mute, #64748b); font-size: .85rem; font-weight: 600;
padding: 10px 14px; cursor: pointer;
display: inline-flex; align-items: center; gap: 6px;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color .12s, border-color .12s;
}
#pw-att-myswaps .my-swaps-tab:hover { color: var(--pw-ink, #0f172a); }
#pw-att-myswaps .my-swaps-tab.is-active {
color: var(--pw-accent, #d97706);
border-bottom-color: var(--pw-accent, #d97706);
}
#pw-att-myswaps .my-swaps-tab__count {
background: var(--pw-soft, #f1f5f9); color: inherit;
font-size: .68rem; font-weight: 700;
padding: 1px 7px; border-radius: 999px; min-width: 18px; text-align: center;
}
#pw-att-myswaps .my-swaps-tab.is-active .my-swaps-tab__count {
background: var(--pw-accent-bg, #fffbeb);
}
#pw-att-myswaps .my-swaps-status-filters {
display: flex; flex-wrap: wrap; gap: 6px;
padding: 10px 16px 0;
}
#pw-att-myswaps .my-swaps-chip {
appearance: none; border: 1px solid var(--pw-border, #e5e7eb);
background: #fff; color: var(--pw-ink, #0f172a);
font-size: .78rem; font-weight: 600;
padding: 5px 12px; border-radius: 999px; cursor: pointer;
transition: background .12s, border-color .12s, color .12s;
}
#pw-att-myswaps .my-swaps-chip:hover { background: var(--pw-soft, #f8fafc); }
#pw-att-myswaps .my-swaps-chip.is-active {
background: var(--pw-ink, #0f172a); color: #fff;
border-color: var(--pw-ink, #0f172a);
}
#pw-att-myswaps .myswaps-row__id {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: .78rem; font-weight: 600;
color: var(--pw-mute, #64748b);
}
#pw-att-myswaps .myswaps-row__direction {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 8px; border-radius: 999px;
font-size: .72rem; font-weight: 700;
}
#pw-att-myswaps .myswaps-row__direction--incoming { background: #fef3c7; color: #b45309; }
#pw-att-myswaps .myswaps-row__direction--outgoing { background: #dbeafe; color: #1d4ed8; }
#pw-att-myswaps .myswaps-row__counterparty {
display: inline-flex; align-items: center; gap: 8px;
}
#pw-att-myswaps .myswaps-row__avatar {
width: 28px; height: 28px; border-radius: 999px;
background: var(--pw-accent-bg, #fffbeb);
color: var(--pw-accent, #d97706);
display: inline-flex; align-items: center; justify-content: center;
font-size: .72rem; font-weight: 700;
}
#pw-att-myswaps .myswaps-row__reason {
color: var(--pw-mute, #64748b);
font-size: .82rem;
max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
display: inline-block; vertical-align: middle;
}
#pw-att-myswaps .myswaps-row__reason--empty { font-style: italic; opacity: .6; }
#pw-att-myswaps .myswaps-row__date {
font-size: .8rem; color: var(--pw-mute, #64748b);
}
#pw-att-myswaps .pw-table tbody td.pw-empty-state { padding: 32px 16px; border-bottom: 0; }
#pw-att-myswaps .ti-loader { animation: pw-spin 1.1s linear infinite; }
@keyframes pw-spin { to { transform: rotate(360deg); } }
}
@scope ([data-demo-module="open-shifts"]) {
#pw-att-myopenshifts .my-openshifts-kpis {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
@media (max-width: 992px) {
#pw-att-myopenshifts .my-openshifts-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#pw-att-myopenshifts .my-openshifts-kpi {
background: #fff;
border: 1px solid var(--pw-border, #e5e7eb);
border-radius: 14px;
padding: 14px 16px;
display: flex; flex-direction: column; gap: 4px;
transition: transform .15s ease, box-shadow .15s ease;
}
#pw-att-myopenshifts .my-openshifts-kpi:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(15, 23, 42, .06);
}
#pw-att-myopenshifts .my-openshifts-kpi__label {
font-size: .78rem; font-weight: 600;
color: var(--pw-mute, #475569);
display: inline-flex; align-items: center; gap: 6px;
text-transform: uppercase; letter-spacing: .04em;
}
#pw-att-myopenshifts .my-openshifts-kpi__value {
font-size: 1.65rem; font-weight: 700;
color: var(--pw-ink, #0f172a); line-height: 1.1;
}
#pw-att-myopenshifts .my-openshifts-kpi__hint {
font-size: .74rem; color: var(--pw-mute, #6b7280);
}
#pw-att-myopenshifts .my-openshifts-kpi--total { border-left: 4px solid #0891b2; }
#pw-att-myopenshifts .my-openshifts-kpi--total .my-openshifts-kpi__label { color: #0e7490; }
#pw-att-myopenshifts .my-openshifts-kpi--soon { border-left: 4px solid #dc2626; }
#pw-att-myopenshifts .my-openshifts-kpi--soon .my-openshifts-kpi__label { color: #b91c1c; }
#pw-att-myopenshifts .my-openshifts-kpi--targeted { border-left: 4px solid #9333ea; }
#pw-att-myopenshifts .my-openshifts-kpi--targeted .my-openshifts-kpi__label { color: #7e22ce; }
#pw-att-myopenshifts .my-openshifts-kpi--department { border-left: 4px solid #2563eb; }
#pw-att-myopenshifts .my-openshifts-kpi--department .my-openshifts-kpi__label { color: #1d4ed8; }
#pw-att-myopenshifts .my-openshifts-warning {
margin: 12px 16px 4px;
display: flex; align-items: flex-start; gap: 10px;
padding: 12px 14px;
background: #fef3c7;
border: 1px solid #fde68a;
border-radius: 10px;
color: #92400e;
}
#pw-att-myopenshifts .my-openshifts-warning i { font-size: 1.1rem; margin-top: 2px; }
#pw-att-myopenshifts .my-openshifts-warning strong { display: block; font-size: .88rem; }
#pw-att-myopenshifts .my-openshifts-warning span { font-size: .8rem; opacity: .85; }
#pw-att-myopenshifts .my-openshifts-filters {
display: flex; flex-wrap: wrap; gap: 6px;
padding: 10px 16px 0;
}
#pw-att-myopenshifts .my-openshifts-chip {
appearance: none; border: 1px solid var(--pw-border, #e5e7eb);
background: #fff; color: var(--pw-ink, #0f172a);
font-size: .78rem; font-weight: 600;
padding: 5px 12px; border-radius: 999px; cursor: pointer;
display: inline-flex; align-items: center; gap: 5px;
transition: background .12s, border-color .12s, color .12s;
}
#pw-att-myopenshifts .my-openshifts-chip:hover { background: var(--pw-soft, #f8fafc); }
#pw-att-myopenshifts .my-openshifts-chip.is-active {
background: var(--pw-accent, #0891b2); color: #fff;
border-color: var(--pw-accent, #0891b2);
}
#pw-att-myopenshifts .my-openshifts-chip__count {
background: rgba(0,0,0,.06); color: inherit;
font-size: .68rem; font-weight: 700;
padding: 1px 6px; border-radius: 999px; min-width: 18px; text-align: center;
}
#pw-att-myopenshifts .my-openshifts-chip.is-active .my-openshifts-chip__count {
background: rgba(255,255,255,.25);
}
/* Card cells */
#pw-att-myopenshifts .openshifts-row__offer {
display: inline-flex; flex-direction: column; gap: 2px;
}
#pw-att-myopenshifts .openshifts-row__offer-id {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: .8rem; font-weight: 700;
color: var(--pw-ink, #0f172a);
}
#pw-att-myopenshifts .openshifts-row__assignment {
font-size: .72rem; color: var(--pw-mute, #6b7280);
}
#pw-att-myopenshifts .openshifts-row__pool {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 9px; border-radius: 999px;
font-size: .72rem; font-weight: 700;
}
#pw-att-myopenshifts .openshifts-row__pool--all_eligible { background: #ecfeff; color: #0e7490; }
#pw-att-myopenshifts .openshifts-row__pool--department { background: #dbeafe; color: #1d4ed8; }
#pw-att-myopenshifts .openshifts-row__pool--location { background: #dcfce7; color: #15803d; }
#pw-att-myopenshifts .openshifts-row__pool--specific { background: #ede9fe; color: #6d28d9; }
#pw-att-myopenshifts .openshifts-row__poster {
display: inline-flex; align-items: center; gap: 8px;
font-size: .85rem; color: var(--pw-ink, #0f172a);
}
#pw-att-myopenshifts .openshifts-row__avatar {
width: 28px; height: 28px; border-radius: 999px;
background: var(--pw-accent-bg, #ecfeff);
color: var(--pw-accent, #0891b2);
display: inline-flex; align-items: center; justify-content: center;
font-size: .72rem; font-weight: 700;
}
#pw-att-myopenshifts .openshifts-row__expires {
font-size: .82rem;
display: inline-flex; flex-direction: column; gap: 2px;
}
#pw-att-myopenshifts .openshifts-row__expires-strong { font-weight: 600; color: var(--pw-ink, #0f172a); }
#pw-att-myopenshifts .openshifts-row__expires-hint { font-size: .72rem; color: var(--pw-mute, #6b7280); }
#pw-att-myopenshifts .openshifts-row__expires--soon { color: #b91c1c; }
#pw-att-myopenshifts .openshifts-row__expires--soon .openshifts-row__expires-strong { color: #b91c1c; }
#pw-att-myopenshifts .openshifts-row__claim {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 14px; border-radius: 999px;
background: var(--pw-accent, #0891b2); color: #fff;
border: 0; font-size: .82rem; font-weight: 600;
cursor: pointer;
transition: background .12s, transform .12s;
}
#pw-att-myopenshifts .openshifts-row__claim:hover:not(:disabled) {
background: #0e7490;
}
#pw-att-myopenshifts .openshifts-row__claim:disabled {
opacity: .55; cursor: not-allowed;
}
#pw-att-myopenshifts .pw-table tbody td.pw-empty-state { padding: 32px 16px; border-bottom: 0; }
#pw-att-myopenshifts .ti-loader { animation: pw-spin 1.1s linear infinite; }
@keyframes pw-spin { to { transform: rotate(360deg); } }
}
@scope ([data-demo-module="my-availability"]) {
#pw-att-myavailability .my-availability-kpis {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
@media (max-width: 992px) {
#pw-att-myavailability .my-availability-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#pw-att-myavailability .my-availability-kpi {
position: relative;
background: #fff;
border: 1px solid var(--pw-border, #e5e7eb);
border-radius: 14px;
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 4px;
transition: transform .15s ease, box-shadow .15s ease;
}
#pw-att-myavailability .my-availability-kpi:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(15, 23, 42, .06);
}
#pw-att-myavailability .my-availability-kpi__label {
font-size: .78rem; font-weight: 600;
color: var(--pw-mute, #475569);
display: inline-flex; align-items: center; gap: 6px;
text-transform: uppercase; letter-spacing: .04em;
}
#pw-att-myavailability .my-availability-kpi__value {
font-size: 1.65rem; font-weight: 700;
color: var(--pw-ink, #0f172a); line-height: 1.1;
}
#pw-att-myavailability .my-availability-kpi__hint {
font-size: .74rem; color: var(--pw-mute, #6b7280);
}
#pw-att-myavailability .my-availability-kpi--preferred { border-left: 4px solid #16a34a; }
#pw-att-myavailability .my-availability-kpi--preferred .my-availability-kpi__label { color: #15803d; }
#pw-att-myavailability .my-availability-kpi--available { border-left: 4px solid #65a30d; }
#pw-att-myavailability .my-availability-kpi--available .my-availability-kpi__label { color: #4d7c0f; }
#pw-att-myavailability .my-availability-kpi--unavailable { border-left: 4px solid #dc2626; }
#pw-att-myavailability .my-availability-kpi--unavailable .my-availability-kpi__label { color: #b91c1c; }
#pw-att-myavailability .my-availability-kpi--leave { border-left: 4px solid #2563eb; }
#pw-att-myavailability .my-availability-kpi--leave .my-availability-kpi__label { color: #1d4ed8; }
#pw-att-myavailability .my-availability-warning {
margin: 12px 16px 4px;
display: flex; align-items: flex-start; gap: 10px;
padding: 12px 14px;
background: #fef3c7;
border: 1px solid #fde68a;
border-radius: 10px;
color: #92400e;
}
#pw-att-myavailability .my-availability-warning i { font-size: 1.1rem; margin-top: 2px; }
#pw-att-myavailability .my-availability-warning strong { display: block; font-size: .88rem; }
#pw-att-myavailability .my-availability-warning span { font-size: .8rem; opacity: .85; }
#pw-att-myavailability .my-availability-filters {
display: flex; flex-wrap: wrap; gap: 6px;
padding: 10px 16px 0;
}
#pw-att-myavailability .my-availability-chip {
appearance: none; border: 1px solid var(--pw-border, #e5e7eb);
background: #fff; color: var(--pw-ink, #0f172a);
font-size: .78rem; font-weight: 600;
padding: 6px 12px; border-radius: 999px;
cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
transition: background .12s, border-color .12s, color .12s;
}
#pw-att-myavailability .my-availability-chip:hover { background: var(--pw-soft, #f8fafc); }
#pw-att-myavailability .my-availability-chip.is-active {
background: var(--pw-accent, #65a30d);
color: #fff;
border-color: var(--pw-accent, #65a30d);
}
#pw-att-myavailability .my-availability-chip__count {
background: rgba(0,0,0,.06);
color: inherit; opacity: .8;
font-size: .68rem; font-weight: 700;
padding: 1px 6px; border-radius: 999px; min-width: 18px; text-align: center;
}
#pw-att-myavailability .my-availability-chip.is-active .my-availability-chip__count {
background: rgba(255,255,255,.25); opacity: 1;
}
#pw-att-myavailability .pw-table .availability-row__type {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px; border-radius: 999px;
font-size: .72rem; font-weight: 700;
}
#pw-att-myavailability .availability-row__type--preferred { background: #dcfce7; color: #15803d; }
#pw-att-myavailability .availability-row__type--available { background: #ecfccb; color: #4d7c0f; }
#pw-att-myavailability .availability-row__type--unavailable { background: #fee2e2; color: #b91c1c; }
#pw-att-myavailability .availability-row__type--on_leave { background: #dbeafe; color: #1d4ed8; }
#pw-att-myavailability .availability-row__when {
display: inline-flex; align-items: center; gap: 8px;
font-size: .85rem;
}
#pw-att-myavailability .availability-row__when .pw-code {
background: var(--pw-soft, #f1f5f9); color: var(--pw-ink, #0f172a);
padding: 2px 8px; border-radius: 6px; font-size: .72rem; font-weight: 600;
}
#pw-att-myavailability .availability-row__window {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: .82rem;
background: var(--pw-soft, #f8fafc);
padding: 2px 8px; border-radius: 6px;
display: inline-block;
}
/* Auto-synced rows (from leave / remote-working activity). */
#pw-att-myavailability .availability-row--auto td { background: rgba(101,163,13,.035); }
#pw-att-myavailability .availability-row__source {
display: inline-flex; align-items: center; gap: 4px;
margin-left: 6px; padding: 2px 7px; border-radius: 999px;
font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
background: #ecfccb; color: #4d7c0f; vertical-align: middle;
}
#pw-att-myavailability .availability-row__reason {
margin-top: 3px; font-size: .72rem; color: var(--pw-mute, #64748b);
}
#pw-att-myavailability .pw-badge--pending { background: #fef3c7; color: #b45309; }
#pw-att-myavailability .pw-table tbody td.pw-empty-state { padding: 32px 16px; border-bottom: 0; }
#pw-att-myavailability .ti-loader { animation: pw-spin 1.1s linear infinite; }
@keyframes pw-spin { to { transform: rotate(360deg); } }
}
@scope ([data-demo-module="claims"]) {
/* Live conversion preview on the claim line item. */
.li-fx-preview {
margin-top: .4rem; padding: .5rem .65rem; border-radius: 8px;
background: rgba(12,119,133,.06); border: 1px solid rgba(12,119,133,.16);
font-size: .82rem; color: #0c7785;
}
.li-fx-preview.is-unavailable {
background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.28); color: #b45309;
}
.li-fx-preview__amount { font-weight: 600; }
.li-fx-preview__meta { margin-top: .15rem; font-size: .76rem; color: #6b7280; }
.li-fx-preview__meta.is-stale { color: #b45309; }
.li-fx-preview.is-unavailable .li-fx-preview__meta { color: #92400e; }
/* The currency select sits inside the amount input group, so it must not
stretch: flex-grow-0 on the element plus a sane width here. A floor
width as well as a cap, because flex-grow-0 with only a max-width lets
the select shrink to its chevron in a narrow modal column, leaving the
user an unlabelled arrow where the currency code should be. */
.li-currency-select {
flex: 0 0 auto;
width: auto;
min-width: 5.25rem;
max-width: 6.5rem;
font-weight: 600;
background-color: #f8fafc;
color: #0f172a;
}
/* Foreign-currency notice written by the receipt scanner
(setLineItemCurrency in receipt-scanner.js). It had no rule at all, so
it rendered as unstyled body copy wrapping over three lines directly
beneath the amount. Same visual family as .li-fx-preview so the two FX
surfaces on this card read as one system. */
/* The note's own grid cell. No .form-group here, so it supplies the
vertical rhythm the sibling columns get from .my-2. */
.line-item-card__fx-note-cell { margin: .5rem 0; }
.fx-line-note {
display: flex;
align-items: flex-start;
gap: .4rem;
margin-top: .4rem;
padding: .45rem .6rem;
border-radius: 8px;
background: rgba(12,119,133,.06);
border: 1px solid rgba(12,119,133,.16);
font-size: .76rem;
line-height: 1.35;
color: #0f6f7c;
text-wrap: pretty;
}
.fx-line-note::before {
content: "\eac5"; /* ti-info-circle, verified against the bundled 1.41.1 build */
font-family: tabler-icons;
font-size: .85rem;
line-height: 1.2;
flex: 0 0 auto;
opacity: .75;
}
/* The scanner's note and the live conversion preview are two views of the
same fact. When the preview (which carries the actual converted figure)
is visible, the generic note is redundant. The note now lives in its own
grid cell, so the two are cousins rather than siblings: match on the
card, not with a sibling combinator. */
[data-line-item-card]:has(.li-fx-preview:not([hidden])) .fx-line-note {
display: none;
}
.li-fx-declared { margin-top: .5rem; }
.li-fx-optional { font-size: .7rem; color: #9ca3af; font-weight: 400; }
.li-fx-hint { font-size: .74rem; color: #6b7280; margin-top: .2rem; }
.li-fx-variance { margin-top: .3rem; font-size: .76rem; color: #047857; }
.li-fx-variance.is-flagged { color: #b45309; font-weight: 600; }
/* Remove control on a line-item tab. Kept subtle until hover so the tab
strip does not read as a row of delete buttons. */
.ce-tab-remove { display: inline-flex; align-items: center; margin-left: .4rem;
opacity: .45; border-radius: 3px; padding: 0 .12rem; }
.ce-tab-remove:hover, .ce-tab-remove:focus { opacity: 1; color: #dc2626; outline: none;
box-shadow: 0 0 0 2px rgba(220,38,38,.25); }
.ce-tab-remove[hidden] { display: none; }
}
@scope ([data-demo-module="claims"]) {
#pw-expidx .expidx-panel { padding-bottom: 22px; }
#pw-expidx .expidx-filters {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 12px; align-items: end; padding: 0 28px 6px;
}
#pw-expidx .expidx-filter > label {
display: block; color: var(--pw-mute); font-size: 0.74rem; font-weight: 700;
letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px;
}
#pw-expidx .expidx-filter select {
width: 100%; height: 40px; padding: 0 32px 0 14px;
border: 1px solid var(--pw-border); border-radius: 12px;
background: #fff; color: var(--pw-ink); font-size: 0.9rem; outline: none;
appearance: none; -webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 10px center; background-size: 12px 12px;
}
#pw-expidx .expidx-filter select:focus { border-color: var(--pw-accent); box-shadow: 0 0 0 4px rgba(var(--pw-accent-rgb), 0.12); }
#pw-expidx .expidx-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 9px 16px; border-radius: 12px; font-weight: 700; font-size: 0.85rem;
border: 1px solid transparent; transition: background .18s, color .18s;
text-decoration: none; height: 40px;
}
#pw-expidx .expidx-btn--primary {
background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%); color: #fff;
box-shadow: 0 12px 24px rgba(245,158,11,0.20);
}
#pw-expidx .expidx-btn--primary:hover { background: linear-gradient(180deg, #fcd34d 0%, #fbbf24 100%); color: #fff; }
#pw-expidx .expidx-table-wrap { padding: 0 24px 24px; overflow-x: auto; }
#pw-expidx #expenseTable {
border-collapse: separate;
border-spacing: 0 10px;
}
#pw-expidx #expenseTable thead th {
border-bottom: none;
background: #f7f9fc;
color: #5d6b84;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: .03em;
text-transform: uppercase;
padding: 16px 18px;
}
#pw-expidx #expenseTable tbody tr.expidx-group-row td {
border: none;
padding: 14px 0 4px;
background: transparent;
}
#pw-expidx #expenseTable tbody tr.expidx-claim-row td {
background: #fff;
border-top: 1px solid #edf1f7;
border-bottom: 1px solid #edf1f7;
padding: 16px 18px;
vertical-align: middle;
}
#pw-expidx #expenseTable tbody tr.expidx-claim-row td:first-child {
border-left: 1px solid #edf1f7;
border-top-left-radius: 16px;
border-bottom-left-radius: 16px;
}
#pw-expidx #expenseTable tbody tr.expidx-claim-row td:last-child {
border-right: 1px solid #edf1f7;
border-top-right-radius: 16px;
border-bottom-right-radius: 16px;
}
#pw-expidx .expidx-group-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 16px 18px;
border: 1px solid #eef2f8;
border-radius: 18px;
background: linear-gradient(180deg, #fbfcff 0%, #f4f8ff 100%);
}
#pw-expidx .expidx-group-main {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
}
#pw-expidx .expidx-group-avatar {
width: 42px;
height: 42px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, rgba(var(--pw-accent-rgb), 0.16) 0%, rgba(var(--pw-accent-rgb), 0.08) 100%);
color: #c26c08;
font-weight: 800;
font-size: 0.92rem;
flex: 0 0 auto;
}
#pw-expidx .expidx-group-name {
font-size: 1.05rem;
font-weight: 800;
color: #1c2b48;
line-height: 1.25;
}
#pw-expidx .expidx-group-sub {
font-size: 0.82rem;
color: #7c8aa5;
margin-top: 2px;
}
#pw-expidx .expidx-group-metrics {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: flex-end;
}
#pw-expidx .expidx-metric {
min-width: 110px;
padding: 10px 12px;
border-radius: 14px;
background: #fff;
border: 1px solid #edf1f7;
text-align: right;
}
#pw-expidx .expidx-metric-label {
display: block;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: .04em;
color: #8a96ae;
font-weight: 700;
}
#pw-expidx .expidx-metric-value {
display: block;
font-size: 0.98rem;
font-weight: 800;
color: #1c2b48;
margin-top: 4px;
}
#pw-expidx .expidx-claim-main {
min-width: 0;
}
#pw-expidx .expidx-claim-title {
font-size: 1rem;
font-weight: 700;
color: #1f2937;
line-height: 1.3;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
#pw-expidx .expidx-claim-sub {
font-size: 0.82rem;
color: #8a96ae;
margin-top: 5px;
}
#pw-expidx .expidx-inline-badge {
display: inline-flex;
align-items: center;
padding: 3px 8px;
border-radius: 999px;
background: #eff6ff;
color: #2563eb;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: .02em;
}
#pw-expidx .expidx-amount {
display: inline-flex;
flex-direction: column;
align-items: flex-end;
gap: 3px;
}
#pw-expidx .expidx-amount-main {
font-size: 1.02rem;
font-weight: 800;
color: #1c2b48;
white-space: nowrap;
}
#pw-expidx .expidx-amount-sub {
font-size: 0.76rem;
color: #8a96ae;
text-transform: uppercase;
letter-spacing: .04em;
}
#pw-expidx .expidx-date {
display: inline-flex;
flex-direction: column;
gap: 3px;
}
#pw-expidx .expidx-date-main {
font-size: 0.94rem;
font-weight: 700;
color: #1f2937;
white-space: nowrap;
}
#pw-expidx .expidx-date-sub {
font-size: 0.78rem;
color: #8a96ae;
white-space: nowrap;
}
#pw-expidx .expidx-status {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 7px 12px;
border-radius: 999px;
font-size: 0.74rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .03em;
border: 1px solid transparent;
}
#pw-expidx .expidx-status::before {
content: '';
width: 7px;
height: 7px;
border-radius: 999px;
background: currentColor;
}
#pw-expidx .expidx-status--pending {
background: #fff7ed;
color: #d97706;
border-color: #fde7c7;
}
#pw-expidx .expidx-status--approved {
background: #ecfdf5;
color: #15803d;
border-color: #cdeed8;
}
#pw-expidx .expidx-status--cancelled {
background: #fef2f2;
color: #dc2626;
border-color: #fecaca;
}
#pw-expidx .expidx-status--rejected {
background: #f8fafc;
color: #475569;
border-color: #dbe3ef;
}
#pw-expidx .expidx-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
flex-wrap: wrap;
}
#pw-expidx .expidx-action {
width: 40px;
height: 40px;
border: 1px solid #e7edf6;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #fff;
color: #5d6b84;
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
#pw-expidx .expidx-action:hover {
transform: translateY(-1px);
box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}
#pw-expidx .expidx-action--edit { color: #0f766e; background: #ecfeff; border-color: #bfecf1; }
#pw-expidx .expidx-action--approve { color: #15803d; background: #ecfdf5; border-color: #cdeed8; }
#pw-expidx .expidx-action--reject { color: #b45309; background: #fffbeb; border-color: #fde7c7; }
#pw-expidx .expidx-action--delete { color: #e11d48; background: #fff1f2; border-color: #fecdd3; }
#pw-expidx .expidx-empty {
text-align: center;
padding: 18px;
color: #8a96ae;
}
@media (max-width: 991.98px) {
#pw-expidx .expidx-filters { grid-template-columns: 1fr 1fr; }
#pw-expidx .expidx-group-card { flex-direction: column; align-items: stretch; }
#pw-expidx .expidx-group-metrics { justify-content: flex-start; }
}
@media (max-width: 575.98px) {
#pw-expidx .expidx-filters { grid-template-columns: 1fr; }
#pw-expidx #expenseTable thead th,
#pw-expidx #expenseTable tbody tr.expidx-claim-row td { padding: 14px 12px; }
#pw-expidx .expidx-actions { justify-content: flex-start; }
}
}
@scope ([data-demo-module="mileage"]) {
.mym-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; margin-bottom: 1.1rem; }
.mym-stat { border: 1px solid #eef0f3; border-radius: 10px; padding: .85rem .95rem; background: #fff; }
.mym-stat-label { font-size: .72rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .02em; color: #6b7280; margin-bottom: .3rem; }
.mym-stat-value { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; color: #111827; }
.mym-next { border-radius: 10px; padding: .9rem 1rem; margin-bottom: 1.1rem;
background: rgba(37,99,235,.08); color: #1d4ed8; }
.mym-next strong { display: block; font-size: 1.05rem; margin-bottom: .2rem; }
.mym-next-meta { font-size: .8rem; opacity: .9; }
.mym-bar { height: 8px; border-radius: 999px; background: #eef0f3; overflow: hidden; margin-top: .5rem; }
.mym-bar span { display: block; height: 100%; background: #2563eb; }
.mym-trip { border-bottom: 1px solid #f3f4f6; padding: .85rem .95rem; }
.mym-trip:last-child { border-bottom: 0; }
.mym-trip-head { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.mym-trip-route { font-weight: 600; color: #111827; }
.mym-trip-date { font-size: .78rem; color: #6b7280; }
.mym-trip-total { font-weight: 700; font-variant-numeric: tabular-nums; }
.mym-trip-purpose { font-size: .82rem; color: #6b7280; margin-top: .15rem; }
.mym-working { margin-top: .5rem; font-size: .78rem; }
.mym-working table { width: 100%; border-collapse: collapse; }
.mym-working th, .mym-working td { text-align: left; padding: .25rem .4rem;
border-bottom: 1px solid #f3f4f6; }
.mym-working th { font-size: .7rem; text-transform: uppercase; color: #6b7280; font-weight: 700; }
.mym-working td:last-child, .mym-working th:last-child { text-align: right;
font-variant-numeric: tabular-nums; }
.mym-tag { display: inline-block; padding: .1rem .45rem; border-radius: 999px;
font-size: .68rem; font-weight: 700; text-transform: uppercase; margin-left: .3rem; }
.mym-tag--capped { background: rgba(245,158,11,.14); color: #b45309; }
.mym-tag--excluded { background: rgba(220,38,38,.10); color: #b91c1c; }
.mym-tag--reversal { background: rgba(107,114,128,.14); color: #4b5563; }
.mym-empty { padding: 2rem .9rem; text-align: center; color: #6b7280; font-size: .9rem; }
@media (max-width: 991.98px) { .mym-stats { grid-template-columns: 1fr 1fr; } }
}
@scope ([data-demo-module="claim-entitlements"]) {
.pw.ce {
--pw-accent: #0f8f82;
--pw-accent-rgb: 15, 143, 130;
--pw-accent-bg: #ecfdf9;
}
/* ------------------------------------------------------------------
* Sub-section heading inside the workbench panel
* ------------------------------------------------------------------ */
.ce .ce-subhead {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
gap: 14px;
padding: 20px 28px 6px;
}
.ce .ce-subhead h2 {
margin: 0;
color: var(--pw-ink);
font-size: 1.05rem;
font-weight: 800;
}
.ce .ce-subhead p {
margin: 4px 0 0;
color: var(--pw-mute);
font-size: 0.88rem;
}
/* ------------------------------------------------------------------
* Period switcher (All Time / YTD / This Month / Last Month)
* ------------------------------------------------------------------ */
.ce-periods {
display: inline-flex;
flex-wrap: wrap;
gap: 4px;
padding: 4px;
border-radius: 14px;
background: var(--pw-soft);
border: 1px solid var(--pw-border);
}
.ce-period-btn {
appearance: none;
border: 0;
background: transparent;
color: var(--pw-mute);
padding: 7px 14px;
min-height: 34px;
border-radius: 10px;
font-size: 0.84rem;
font-weight: 700;
line-height: 1.2;
cursor: pointer;
transition: background .18s, color .18s, box-shadow .18s;
}
.ce-period-btn:hover {
color: var(--pw-ink);
background: rgba(var(--pw-accent-rgb), 0.08);
}
.ce-period-btn.active {
background: #fff;
color: var(--pw-accent);
box-shadow: 0 4px 12px rgba(var(--pw-accent-rgb), 0.18);
}
/* ------------------------------------------------------------------
* Employee row styling (used by overview + entitlement tables)
* ------------------------------------------------------------------ */
.ce-employee {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.ce-avatar {
width: 38px;
height: 38px;
border-radius: 50%;
object-fit: cover;
object-position: center;
background: rgba(var(--pw-accent-rgb), 0.10);
flex: 0 0 auto;
}
.ce-employee__name {
color: var(--pw-ink);
font-weight: 800;
font-size: 0.93rem;
line-height: 1.25;
}
.ce-employee__meta {
margin-top: 2px;
color: var(--pw-mute);
font-size: 0.82rem;
word-break: break-word;
}
.ce-role-pill {
display: inline-flex;
align-items: center;
max-width: 360px;
min-height: 28px;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid var(--pw-border);
background: var(--pw-soft);
color: var(--pw-ink);
font-size: 0.78rem;
font-weight: 700;
line-height: 1.25;
}
.ce-amount {
color: var(--pw-ink);
font-size: 0.95rem;
font-weight: 800;
}
.ce-row-cue {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: rgba(var(--pw-accent-rgb), 0.10);
color: var(--pw-accent);
}
.ce .pw-table tbody tr.clickable-row,
.ce .pw-table tbody tr.ce-entitlement-row {
cursor: pointer;
}
.ce .pw-table tbody tr.clickable-row:hover td {
background: rgba(var(--pw-accent-rgb), 0.05);
}
/* ------------------------------------------------------------------
* Templates + entitlements collapsible cards
* ------------------------------------------------------------------ */
.ce-card-stack {
display: grid;
gap: 12px;
padding: 4px 24px 22px;
}
.ce-template-card,
.ce-entitlement-card {
border: 1px solid var(--pw-border);
border-radius: 18px;
background: #fff;
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
overflow: hidden;
transition: border-color .18s, box-shadow .18s;
}
.ce-template-card:hover,
.ce-entitlement-card:hover {
border-color: rgba(var(--pw-accent-rgb), 0.30);
box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
}
.ce-template-toggle,
.ce-entitlement-toggle {
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 16px 20px;
background: #fff;
}
.ce-template-toggle:hover,
.ce-entitlement-toggle:hover {
background: var(--pw-soft);
}
.ce-template-title,
.ce-entitlement-title {
color: var(--pw-ink);
font-size: 0.98rem;
font-weight: 800;
}
.ce-template-actions,
.ce-entitlement-actions {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
flex-wrap: wrap;
}
/* Compact icon buttons (save / delete / etc.) */
.ce-icon-btn {
width: 36px;
height: 36px;
padding: 0;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--pw-border);
background: #fff;
color: var(--pw-mute);
transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.ce-icon-btn:hover {
color: var(--pw-ink);
border-color: rgba(var(--pw-accent-rgb), 0.30);
background: rgba(var(--pw-accent-rgb), 0.06);
}
.ce-icon-btn--save {
background: var(--pw-accent);
border-color: var(--pw-accent);
color: #fff;
box-shadow: 0 8px 16px rgba(var(--pw-accent-rgb), 0.20);
}
.ce-icon-btn--save:hover {
background: #0b746a;
border-color: #0b746a;
color: #fff;
}
.ce-icon-btn--delete {
border-color: #fecdd3;
color: #be123c;
}
.ce-icon-btn--delete:hover {
background: #fff1f2;
border-color: #fda4af;
color: #9f1239;
}
.ce-icon-btn.is-loading {
border-color: #cbd5e1;
background: #f8fafc;
color: var(--pw-mute);
}
.ce-icon-btn.is-error {
border-color: #fde68a;
background: #fffbeb;
color: #b45309;
}
.ce-template-settings,
.ce-setting-row {
border-top: 1px solid var(--pw-border);
background: #fff;
}
.ce-form-strip {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 14px;
padding: 16px 20px;
background: var(--pw-soft);
border-bottom: 1px solid var(--pw-border);
}
.ce-form-strip .ce-form-field {
min-width: 240px;
flex: 1 1 240px;
}
.ce-form-strip label {
display: block;
margin: 0 0 6px;
color: var(--pw-ink);
font-size: 0.84rem;
font-weight: 800;
}
.ce-form-strip .form-control,
.ce-form-strip .form-select {
width: 100%;
min-height: 40px;
border-radius: 10px;
border: 1px solid var(--pw-border);
font-size: 0.9rem;
color: var(--pw-ink);
background: #fff;
}
.ce-form-strip .form-control:focus,
.ce-form-strip .form-select:focus {
border-color: var(--pw-accent);
box-shadow: 0 0 0 4px rgba(var(--pw-accent-rgb), 0.12);
outline: none;
}
/* Empty / "add new" template card */
.ce-empty-template {
border: 1px dashed rgba(var(--pw-accent-rgb), 0.40);
background: linear-gradient(135deg, rgba(var(--pw-accent-rgb), 0.05), #fff);
box-shadow: none;
}
.ce-empty-template:hover {
background: linear-gradient(135deg, rgba(var(--pw-accent-rgb), 0.08), #fff);
}
.ce-new-template-trigger {
color: var(--pw-accent);
font-weight: 800;
}
.ce-new-template-trigger .ce-template-title {
color: var(--pw-accent);
display: inline-flex;
align-items: center;
gap: 10px;
}
.ce-new-template-trigger .ce-template-title i {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: rgba(var(--pw-accent-rgb), 0.12);
color: var(--pw-accent);
font-size: 1rem;
}
/* ------------------------------------------------------------------
* Inline settings table (used in template editor + entitlement editor)
* ------------------------------------------------------------------ */
.ce-settings-table-wrap {
overflow-x: auto;
padding: 0;
}
.ce-settings-table {
width: 100%;
min-width: 900px;
border-collapse: separate;
border-spacing: 0;
margin: 0;
}
.ce-settings-table thead th {
padding: 12px 14px;
background: var(--pw-soft);
color: var(--pw-mute);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
text-align: left;
border-bottom: 1px solid var(--pw-border);
border-top: 0;
}
.ce-settings-table tbody td {
padding: 12px 14px;
vertical-align: middle;
border-bottom: 1px solid #f0f4fa;
font-size: 0.9rem;
color: var(--pw-ink);
background: #fff;
}
.ce-settings-table tbody tr:last-child td {
border-bottom: 0;
}
.ce-settings-table .form-control,
.ce-settings-table .form-select {
min-height: 36px;
border-radius: 8px;
border: 1px solid var(--pw-border);
color: var(--pw-ink);
font-size: 0.86rem;
background: #fff;
padding: 6px 10px;
}
.ce-settings-table .form-control:focus,
.ce-settings-table .form-select:focus {
border-color: var(--pw-accent);
box-shadow: 0 0 0 3px rgba(var(--pw-accent-rgb), 0.12);
outline: none;
}
.ce-settings-table .form-check-input {
width: 1.05rem;
height: 1.05rem;
border-color: var(--pw-border);
cursor: pointer;
}
.ce-settings-table .form-check-input:checked {
background-color: var(--pw-accent);
border-color: var(--pw-accent);
}
.ce-type-name {
color: var(--pw-ink);
font-weight: 800;
font-size: 0.92rem;
}
.ce-child-badge,
.ce-template-badge {
display: inline-flex;
align-items: center;
min-height: 22px;
padding: 3px 9px;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 700;
border: 1px solid rgba(var(--pw-accent-rgb), 0.18);
background: rgba(var(--pw-accent-rgb), 0.08);
color: var(--pw-accent);
letter-spacing: 0.02em;
}
.ce-template-badge.is-empty {
background: #fff1f2;
border-color: #fecdd3;
color: #be123c;
}
.ce-template-badge.is-applied {
background: #ecfdf9;
border-color: rgba(var(--pw-accent-rgb), 0.22);
color: var(--pw-accent);
}
.ce-message {
color: var(--pw-mute);
font-size: 0.82rem;
font-weight: 700;
}
/* ------------------------------------------------------------------
* DataTables compatibility shim (kept so legacy JS still works without
* needing a rewrite). We just neutralise default styling and let our
* own toolbar + footer take over.
* ------------------------------------------------------------------ */
.ce .dataTables_wrapper > .row:first-child,
.ce .dataTables_wrapper > .row:last-child {
display: none !important;
}
.ce .pw-dt-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 16px 0 22px;
margin-top: 2px;
border-top: 1px solid var(--pw-border);
background: transparent;
}
.ce .pw-dt-footer .dataTables_info {
color: var(--pw-mute);
font-size: 0.82rem;
font-weight: 600;
}
.ce .pw-dt-footer .dataTables_paginate {
display: inline-flex;
align-items: center;
gap: 4px;
}
.ce .pw-dt-footer .paginate_button {
min-width: 34px;
height: 34px;
padding: 0 10px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--pw-border);
border-radius: 8px;
background: #fff;
color: var(--pw-ink);
font-weight: 600;
font-size: 0.82rem;
cursor: pointer;
margin: 0 2px;
}
.ce .pw-dt-footer .paginate_button:hover {
background: var(--pw-soft);
border-color: rgba(var(--pw-accent-rgb), 0.30);
color: var(--pw-accent);
}
.ce .pw-dt-footer .paginate_button.current {
background: var(--pw-accent);
border-color: var(--pw-accent);
color: #fff;
}
.ce .pw-dt-footer .paginate_button.disabled {
opacity: 0.4;
cursor: not-allowed;
background: #fff;
color: var(--pw-mute);
}
/* ------------------------------------------------------------------
* Side drawer modal — claims usage detail
* ------------------------------------------------------------------ */
#sideModal .modal-dialog.modal-claim-usage {
max-width: min(720px, calc(100vw - 48px));
width: min(720px, calc(100vw - 48px));
margin-left: auto;
margin-right: 0;
}
#sideModal .modal-dialog.modal-claim-usage .modal-content {
border: 0;
border-radius: 24px 0 0 24px;
min-height: 100vh;
box-shadow: -18px 0 48px rgba(15, 23, 42, 0.18);
background: var(--pw-soft, #f8fbff);
}
.ce-usage-drawer {
padding: 26px 28px 32px;
color: var(--pw-ink, #132238);
}
.ce-usage-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
}
.ce-usage-head h4 {
margin: 0;
color: var(--pw-ink);
font-size: 1.05rem;
font-weight: 800;
}
.ce-usage-close {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--pw-border, #e5edf6);
border-radius: 12px;
background: #fff;
color: var(--pw-mute, #74839a);
cursor: pointer;
transition: background .18s, color .18s;
}
.ce-usage-close:hover {
background: var(--pw-soft, #f8fbff);
color: var(--pw-ink, #132238);
}
.ce-usage-profile {
display: grid;
grid-template-columns: 84px minmax(0, 1fr);
gap: 18px;
align-items: center;
padding: 20px;
border: 1px solid var(--pw-border, #e5edf6);
border-radius: 20px;
background: #fff;
box-shadow: 0 12px 26px rgba(15, 23, 42, 0.04);
}
.ce-usage-avatar {
width: 84px;
height: 84px;
border-radius: 22px;
object-fit: cover;
object-position: center;
border: 3px solid #fff;
box-shadow: 0 0 0 1px rgba(15, 143, 130, 0.18);
}
.ce-usage-identity { min-width: 0; }
.ce-usage-name {
color: var(--pw-ink, #132238);
font-size: 1.12rem;
font-weight: 800;
line-height: 1.2;
}
.ce-usage-email {
margin-top: 4px;
color: var(--pw-mute, #74839a);
font-size: 0.88rem;
font-weight: 600;
overflow-wrap: anywhere;
}
.ce-usage-role {
display: inline-flex;
align-items: center;
margin-top: 10px;
max-width: 100%;
padding: 5px 11px;
border-radius: 999px;
background: rgba(15, 143, 130, 0.10);
color: #0f8f82;
font-size: 0.78rem;
font-weight: 800;
line-height: 1.3;
}
.ce-usage-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin: 16px 0 22px;
}
.ce-usage-stats div {
padding: 13px 14px;
border: 1px solid var(--pw-border, #e5edf6);
border-radius: 14px;
background: #fff;
}
.ce-usage-stats span {
display: block;
color: var(--pw-mute, #74839a);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.ce-usage-stats strong {
display: block;
margin-top: 5px;
color: var(--pw-ink, #132238);
font-size: 1.05rem;
font-weight: 800;
}
.ce-usage-section { margin-top: 20px; }
.ce-usage-section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
.ce-usage-section-head h5 {
margin: 0;
color: var(--pw-ink, #132238);
font-size: 0.96rem;
font-weight: 800;
}
.ce-usage-section-head span {
color: var(--pw-mute, #74839a);
font-size: 0.78rem;
font-weight: 700;
}
.ce-claim-list {
display: grid;
gap: 10px;
}
.ce-claim-item {
padding: 14px 16px;
border: 1px solid var(--pw-border, #e5edf6);
border-radius: 16px;
background: #fff;
}
.ce-claim-item__top,
.ce-claim-item__meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.ce-claim-item__top strong {
color: var(--pw-ink, #132238);
font-size: 0.92rem;
font-weight: 800;
line-height: 1.3;
}
.ce-claim-item__top span {
flex: 0 0 auto;
color: #0f8f82;
font-size: 0.78rem;
font-weight: 800;
}
.ce-claim-meter {
height: 8px;
margin: 10px 0 9px;
border-radius: 999px;
background: #edf4f7;
overflow: hidden;
}
.ce-claim-meter span {
display: block;
height: 100%;
border-radius: inherit;
background: #0f8f82;
}
.ce-claim-item--unlimited .ce-claim-meter span {
background: rgba(15, 143, 130, 0.24);
}
.ce-claim-item__meta {
color: var(--pw-mute, #74839a);
font-size: 0.8rem;
font-weight: 700;
}
.ce-usage-empty {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
border: 1px dashed var(--pw-border, #e5edf6);
border-radius: 14px;
background: #fff;
color: var(--pw-mute, #74839a);
font-weight: 700;
font-size: 0.86rem;
}
.ce-usage-empty i { color: #0f8f82; }
/* ------------------------------------------------------------------
* Responsive
* ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
.ce .ce-subhead { padding: 16px 20px 6px; }
.ce .ce-card-stack { padding: 4px 16px 18px; }
.ce-template-toggle,
.ce-entitlement-toggle { align-items: flex-start; flex-direction: column; }
.ce-form-strip .ce-form-field { min-width: 0; flex-basis: 100%; }
#sideModal .modal-dialog.modal-claim-usage {
max-width: 100vw;
width: 100vw;
}
#sideModal .modal-dialog.modal-claim-usage .modal-content {
border-radius: 0;
}
.ce-usage-drawer { padding: 20px 16px 28px; }
.ce-usage-profile { grid-template-columns: 1fr; text-align: left; }
.ce-usage-stats { grid-template-columns: 1fr; }
.ce .pw-dt-footer { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 18px 18px; }
}
}
@scope ([data-demo-module="approvals"], [data-demo-module="approval-settings"]) {
#pw-mta {
--pw-accent: #0f8f82;
--pw-accent-rgb: 15,143,130;
--pw-accent-bg: #ecfdf9;
}
.mta-workspace .pw-page-header {
border-radius: 20px;
}
.mta-workspace .pw-page-header__title {
letter-spacing: 0;
}
.mta-shell {
overflow: hidden;
}
.mta-main-tabs {
gap: 8px;
padding: 20px 24px 0;
border-bottom: 1px solid var(--pw-border);
}
.mta-main-tabs .nav-link {
display: inline-flex;
align-items: center;
gap: 8px;
border: 1px solid transparent;
border-radius: 12px 12px 0 0;
color: var(--pw-mute);
font-weight: 800;
padding: 12px 18px;
margin-bottom: -1px;
background: transparent;
}
.mta-main-tabs .nav-link:hover {
color: var(--pw-ink);
background: var(--pw-soft);
}
.mta-main-tabs .nav-link.active {
color: var(--pw-accent);
border-color: var(--pw-border);
border-bottom-color: #fff;
background: #fff;
}
.mta-tab-content {
padding: 24px;
}
.mta-request-tabs {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding-bottom: 18px;
border-bottom: 1px solid var(--pw-border);
margin-bottom: 18px;
}
.mta-request-tab {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 10px 16px;
border: 1px solid rgba(var(--pw-accent-rgb), 0.26);
border-radius: 12px;
background: #fff;
color: #0b6f64;
font-size: 0.86rem;
font-weight: 800;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}
.mta-request-tab:hover,
.mta-request-tab.active {
border-color: var(--pw-accent);
background: var(--pw-accent);
color: #fff;
}
.mta-request-tab .badge {
min-width: 22px;
border-radius: 999px;
background: #f59e0b !important;
color: #111827 !important;
}
/* === Shift Swap approvals panel === */
.mta-swap-panel {
background: #fff;
border: 1px solid #e5edf6;
border-radius: 14px;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
overflow: hidden;
}
.mta-swap-panel__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 22px;
border-bottom: 1px solid #eef2f7;
background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%);
}
.mta-swap-panel__title h5 { color: #132238; font-weight: 700; font-size: 1rem; }
.mta-swap-panel__title small { color: #74839a; font-size: 0.82rem; }
.mta-swap-panel__actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.mta-swap-panel__actions .btn { white-space: nowrap; }
.mta-swap-panel__actions .btn i { margin-right: 4px; }
.mta-swap-panel__body { padding: 0; }
.mta-swap-panel__body table { margin: 0; }
.mta-swap-panel__body thead th {
background: #fafbfc;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #74839a;
padding: 12px 16px;
border-bottom: 1px solid #eef2f7;
}
.mta-swap-panel__body tbody td {
padding: 14px 16px;
vertical-align: middle;
font-size: 0.86rem;
color: #132238;
border-bottom: 1px solid #f1f5f9;
}
.mta-swap-panel__body tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 720px) {
.mta-swap-panel__header { flex-direction: column; align-items: flex-start; }
.mta-swap-panel__actions { width: 100%; justify-content: flex-end; }
}
.mta-overview-layout {
--mta-filter-width: 320px;
display: grid;
grid-template-columns: var(--mta-filter-width) minmax(0, 1fr);
gap: 28px;
margin: 0;
}
.mta-overview-layout > [class*="col-"] {
width: auto;
max-width: none;
flex: initial;
padding: 0;
}
.mta-filter-panel {
align-self: start;
position: sticky;
top: 92px;
overflow: hidden;
padding: 0;
border: 0 !important;
border-radius: 18px;
background:
linear-gradient(180deg, #ffffff 0%, #fbfefd 100%);
box-shadow:
0 18px 40px rgba(15, 23, 42, 0.08),
0 0 0 1px rgba(213, 226, 236, 0.86);
}
.mta-filter-panel .mb-3 {
margin-bottom: 15px !important;
}
.mta-filter-panel .d-flex.gap-2 {
flex-direction: column;
}
.mta-filter-panel h6 {
display: inline-flex;
align-items: center;
gap: 10px;
width: 100%;
margin: 0 !important;
padding: 18px 18px 16px;
border: 0;
background:
linear-gradient(135deg, rgba(var(--pw-accent-rgb), 0.10) 0%, rgba(var(--pw-accent-rgb), 0.02) 58%, #fff 100%);
color: var(--pw-ink);
font-size: 0.98rem;
font-weight: 800;
letter-spacing: 0;
}
.mta-filter-panel h6::before {
content: "\f0b0";
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: #fff;
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: var(--pw-accent);
font-size: 0.9rem;
box-shadow: 0 8px 18px rgba(var(--pw-accent-rgb), 0.12);
}
.mta-filter-panel form {
padding: 16px 18px 0;
}
.mta-filter-panel .form-label {
margin-bottom: 7px;
color: #7a8aa1;
font-size: 0.68rem;
line-height: 1.2;
letter-spacing: 0.08em;
}
.mta-filter-panel .form-select,
.mta-filter-panel .form-control {
min-height: 40px;
border: 1px solid transparent;
border-radius: 11px;
background-color: #f4f8fb;
color: var(--pw-ink);
font-size: 0.88rem;
font-weight: 700;
box-shadow: inset 0 0 0 1px rgba(213, 226, 236, 0.70);
}
.mta-filter-panel .form-select:hover,
.mta-filter-panel .form-control:hover {
background-color: #f8fbfd;
box-shadow: inset 0 0 0 1px rgba(var(--pw-accent-rgb), 0.22);
}
.mta-filter-panel .form-select:focus,
.mta-filter-panel .form-control:focus {
background-color: #fff;
border-color: rgba(var(--pw-accent-rgb), 0.50);
box-shadow: 0 0 0 4px rgba(var(--pw-accent-rgb), 0.11);
}
.mta-filter-panel [id^="apply"][id$="FilterBtn"] {
width: calc(100% - 36px) !important;
min-height: 42px;
margin: 4px 18px 0;
border-radius: 11px;
box-shadow: 0 14px 24px rgba(var(--pw-accent-rgb), 0.20);
}
.mta-filter-panel [id^="apply"][id$="FilterBtn"]::before {
content: "\f002";
margin-right: 8px;
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 0.78rem;
}
.mta-filter-panel hr {
margin: 18px 18px 14px;
border: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(213, 226, 236, 0.95) 18%, rgba(213, 226, 236, 0.95) 82%, transparent 100%);
}
.mta-filter-panel > small {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 18px 10px;
color: var(--pw-mute);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.mta-filter-panel > small::before {
content: "\f56e";
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: var(--pw-accent);
font-size: 0.78rem;
}
.mta-filter-panel [id^="export"][id$="ExcelBtn"] {
width: calc(100% - 36px) !important;
min-height: 40px;
margin: 0 18px 18px;
border-color: rgba(var(--pw-accent-rgb), 0.18);
border-radius: 11px;
background: rgba(var(--pw-accent-rgb), 0.10);
color: #0b6f64;
box-shadow: none;
}
.mta-filter-panel [id^="export"][id$="ExcelBtn"]:hover {
border-color: rgba(var(--pw-accent-rgb), 0.26);
background: rgba(var(--pw-accent-rgb), 0.16);
color: #085b52;
}
.mta-filter-panel [id^="export"][id$="ExcelBtn"]::before {
content: "\f1c3";
margin-right: 8px;
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 0.84rem;
}
.mta-workspace .form-label {
color: var(--pw-mute);
font-size: 0.74rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.mta-workspace .form-control,
.mta-workspace .form-select,
.mta-workspace .select2-container--default .select2-selection--single,
.mta-workspace .select2-container--default .select2-selection--multiple {
min-height: 44px;
border-color: #dbe6ef;
border-radius: 12px;
box-shadow: none;
}
.mta-workspace .form-control:focus,
.mta-workspace .form-select:focus {
border-color: var(--pw-accent);
box-shadow: 0 0 0 4px rgba(var(--pw-accent-rgb), 0.12);
}
.mta-workspace .btn-primary,
.mta-workspace .btn-success {
border-color: var(--pw-accent);
background: var(--pw-accent);
box-shadow: 0 10px 20px rgba(var(--pw-accent-rgb), 0.16);
font-weight: 800;
}
.mta-workspace .btn-primary:hover,
.mta-workspace .btn-success:hover {
border-color: #0b7268;
background: #0b7268;
}
.mta-workspace .btn-outline-secondary,
.mta-workspace .btn-outline-primary {
border-color: #dbe6ef;
color: var(--pw-ink);
font-weight: 800;
}
.mta-workspace .btn-outline-secondary:hover,
.mta-workspace .btn-outline-primary:hover {
border-color: rgba(var(--pw-accent-rgb), 0.35);
background: rgba(var(--pw-accent-rgb), 0.08);
color: var(--pw-accent);
}
.mta-filter-panel hr,
.mta-workspace hr {
border-color: var(--pw-border);
opacity: 1;
}
.mta-list-panel {
min-width: 0;
}
.mta-list-panel > .list-group {
gap: 14px;
}
.mta-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
padding: 16px;
margin-bottom: 14px !important;
border: 1px solid var(--pw-border);
border-radius: 16px;
background: #fff;
}
.mta-toolbar .input-group {
max-width: 540px !important;
min-width: min(100%, 320px);
}
.mta-toolbar .input-group-text,
.mta-toolbar .btn {
border-color: #dbe6ef;
}
.mta-list-item,
.mta-workspace .leave-list-item,
.mta-workspace .expense-list-item,
.mta-workspace .remote-list-item,
.mta-workspace .replacement-list-item {
margin-bottom: 10px;
border: 1px solid var(--pw-border) !important;
border-radius: 16px !important;
background: #fff;
box-shadow: 0 10px 22px rgba(15,23,42,0.04);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.mta-list-item:hover,
.mta-workspace .leave-list-item:hover,
.mta-workspace .expense-list-item:hover,
.mta-workspace .remote-list-item:hover,
.mta-workspace .replacement-list-item:hover {
transform: translateY(-1px);
border-color: rgba(var(--pw-accent-rgb), 0.35) !important;
box-shadow: 0 16px 30px rgba(15,23,42,0.08);
}
.mta-list-item .fw-semibold.text-primary,
.mta-list-item .fw-semibold.text-info,
.mta-workspace .leave-list-item .fw-semibold.text-primary,
.mta-workspace .leave-list-item .fw-semibold.text-info,
.mta-workspace .expense-list-item .fw-semibold.text-primary,
.mta-workspace .remote-list-item .fw-semibold.text-primary,
.mta-workspace .replacement-list-item .fw-semibold.text-primary {
color: var(--pw-ink) !important;
}
.mta-list-item small,
.mta-workspace .leave-list-item small,
.mta-workspace .expense-list-item small,
.mta-workspace .remote-list-item small,
.mta-workspace .replacement-list-item small {
line-height: 1.45;
}
.mta-list-item .badge,
.mta-workspace .leave-list-item .badge,
.mta-workspace .expense-list-item .badge,
.mta-workspace .remote-list-item .badge,
.mta-workspace .replacement-list-item .badge {
border-radius: 999px;
padding: 5px 10px;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: .04em;
}
.mta-calendar-card {
border: 1px solid var(--pw-border) !important;
border-radius: 16px;
box-shadow: 0 10px 22px rgba(15,23,42,0.04) !important;
}
.mta-settings-layout {
display: grid;
grid-template-columns: 260px minmax(0, 1fr);
gap: 24px;
}
.mta-settings-sidebar {
border: 1px solid var(--pw-border) !important;
border-radius: 16px;
background: var(--pw-soft);
padding: 14px;
}
.mta-settings-sidebar .sidebar-tab-btn {
height: 66px;
min-height: 66px;
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px !important;
border-radius: 12px;
font-size: 0.84rem;
line-height: 1.25;
white-space: normal;
}
.mta-settings-sidebar .sidebar-tab-btn i {
flex: 0 0 auto;
width: 18px;
margin-right: 0 !important;
text-align: center;
font-size: 1rem;
}
.mta-settings-sidebar .sidebar-tab-btn.active {
border-color: var(--pw-accent) !important;
background: var(--pw-accent) !important;
color: #fff !important;
}
.mta-settings-content {
min-width: 0;
padding: 0 !important;
}
.mta-template-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 18px;
}
.mta-template-header h5 {
margin: 0;
color: var(--pw-ink);
font-weight: 800;
}
.mta-template-header p {
margin: 4px 0 0;
color: var(--pw-mute);
font-size: 0.88rem;
}
.mta-template-header .mta-new-template-btn {
min-width: 168px;
min-height: 46px;
border-radius: 18px;
box-shadow: none;
}
.mta-template-add-tier-btn,
.mta-template-action-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: 18px;
font-weight: 800;
line-height: 1.2;
text-decoration: none;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
white-space: nowrap;
}
.mta-template-add-tier-btn {
width: 100%;
min-height: 48px;
border: 1px solid var(--pw-accent);
background: var(--pw-accent);
color: #fff;
}
.mta-template-add-tier-btn:hover,
.mta-template-action-btn--primary:hover {
border-color: #0b746a;
background: #0b746a;
color: #fff;
}
.mta-template-add-tier-btn i,
.mta-template-action-btn i,
.mta-new-template-btn i {
flex: 0 0 auto;
font-size: 1rem;
line-height: 1;
}
.mta-template-action-btn {
min-width: 156px;
min-height: 48px;
padding: 11px 24px;
border: 1px solid #b9d9d5;
background: #f4fbfa;
color: var(--pw-accent);
}
.mta-template-action-btn:hover {
border-color: rgba(var(--pw-accent-rgb), 0.45);
background: #ecf8f6;
color: #0b746a;
}
.mta-template-action-btn--primary {
border-color: var(--pw-accent);
background: var(--pw-accent);
color: #fff;
box-shadow: 0 10px 22px rgba(var(--pw-accent-rgb), 0.16);
}
.mta-template-action-btn--danger {
border-color: #f0c6c6;
background: #fff5f5;
color: #b42318;
}
.mta-template-action-btn--danger:hover {
border-color: #d92d20;
background: #d92d20;
color: #fff;
}
.mta-workspace .accordion-item {
border: 1px solid var(--pw-border);
border-radius: 16px !important;
overflow: hidden;
box-shadow: 0 10px 22px rgba(15,23,42,0.04);
}
.mta-workspace .accordion-button {
color: var(--pw-ink);
font-weight: 800;
background: #fff;
}
.mta-workspace .accordion-button:not(.collapsed) {
color: var(--pw-accent);
background: rgba(var(--pw-accent-rgb), 0.08);
box-shadow: none;
}
.mta-workspace .table {
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
border: 1px solid var(--pw-border);
border-radius: 16px;
}
.mta-workspace .table thead th {
border-bottom: 1px solid var(--pw-border);
background: var(--pw-soft);
color: var(--pw-mute);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.mta-workspace .table td,
.mta-workspace .table th {
border-color: #edf2f7;
vertical-align: middle;
}
/* Tier rows use the shared pw-repeat row builder (workspace-styles.blade.php).
pw-repeat__row is display:grid with NO grid-template-columns of its own —
every consumer supplies its own track list, so the tier row declares one
here. The trailing 38px column is the remove button, matching the
reference implementation in partials/attendance/shifts/screen_newshift.
All four places that build a tier row (two in JS, two in Blade) now emit
this same markup, so the rows can no longer drift apart the way they had. */
.mta-workspace .pw-repeat__row.row-tier {
grid-template-columns: 58px minmax(0, 1.5fr) minmax(0, 3fr) minmax(0, 1.4fr) 38px;
gap: 12px;
}
/* The ordinal ("1st", "2nd") sits on the field baseline, not the row's,
because pw-repeat__row is align-items:end and the cell has no label. */
.mta-workspace .pw-repeat__row.row-tier .tier-ordinal {
padding-bottom: 11px;
color: var(--pw-ink);
font-weight: 800;
white-space: nowrap;
}
@media (max-width: 991.98px) {
.mta-workspace .pw-repeat__row.row-tier {
grid-template-columns: 1fr;
}
.mta-workspace .pw-repeat__row.row-tier > * {
grid-column: span 1;
}
.mta-workspace .pw-repeat__row.row-tier .tier-ordinal {
padding-bottom: 0;
}
}
/* ------------------------------------------------------------------
select2 multi-select chips (the approver pills).
Scoped to this page deliberately. The base rule in public/css/site.css
(~26088) sets no width constraint, so a long "NAME (DESIGNATION)" chip
overflows its container and runs under the border instead of
truncating. Fixing it at source would restyle every select2 in the
product, so the correction is confined to #pw-mta.
------------------------------------------------------------------ */
.mta-workspace .select2-container--default .select2-selection--multiple {
padding: 5px 8px;
}
.mta-workspace .select2-container--default .select2-selection--multiple .select2-selection__rendered {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin: 0;
padding: 0;
}
.mta-workspace .select2-container--default .select2-selection--multiple .select2-selection__choice {
display: inline-flex;
align-items: center;
/* The cap is what stops the overflow: a chip may use the full row
width but never more, and its label ellipsises rather than
escaping the control. */
max-width: 100%;
min-width: 0;
margin: 0;
padding: 3px 8px;
border: 1px solid rgba(var(--pw-accent-rgb), 0.22);
border-radius: 8px;
background: rgba(var(--pw-accent-rgb), 0.10);
color: var(--pw-ink);
font-size: 0.8rem;
font-weight: 600;
line-height: 1.45;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* select2 orders the remove control after the label (order:2) in site.css.
Keep it inline and on the baseline so it reads as part of the chip
rather than floating loose above the field. */
.mta-workspace .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
order: 2;
flex: 0 0 auto;
margin-left: 6px;
color: var(--pw-mute);
font-weight: 700;
}
.mta-workspace .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
color: #b42318;
}
.applied-template-card,
.add-template-card,
#addTemplateCardLeave,
#addTemplateCardExpense,
#addTemplateCardRemote,
#addTemplateCardReplacement {
border-radius: 16px !important;
}
.mta-workspace .modal-content {
border: 1px solid #dfe9e5;
border-radius: 22px;
overflow: hidden;
box-shadow: 0 28px 60px rgba(15, 23, 42, 0.18);
}
.mta-workspace .modal-header {
padding: 20px 24px;
border-bottom: 1px solid #e9f0ed;
background: linear-gradient(180deg, #fbfffe 0%, #f7fbfa 100%);
}
.mta-workspace .modal-title {
color: var(--pw-ink);
font-weight: 800;
}
.mta-workspace .modal-body {
padding: 24px;
}
.mta-workspace .btn-close {
width: 38px;
height: 38px;
padding: 0;
border: 1px solid #e4ece9;
border-radius: 12px;
background-color: #fff;
background-size: 14px;
opacity: .78;
}
.mta-workspace .btn-close:hover {
opacity: 1;
}
.mta-audit-body {
padding: 0 !important;
}
.mta-audit-title {
display: flex;
align-items: center;
gap: 10px;
color: var(--pw-ink);
font-weight: 800;
}
.mta-audit-title::before {
content: "\f15c";
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: var(--pw-accent);
}
.mta-audit-box {
border: 1px solid var(--pw-border) !important;
border-radius: 14px !important;
background: var(--pw-soft) !important;
}
.mta-workspace .timeline {
border-left-color: rgba(var(--pw-accent-rgb), 0.22);
}
.mta-workspace .timeline-icon {
box-shadow: 0 0 0 3px rgba(var(--pw-accent-rgb), 0.16);
}
.mta-workspace .list-group-item {
border-color: var(--pw-border);
}
.mta-workspace .pb-cancel-btn {
border: 1px solid #dbe6ef;
border-radius: 12px;
background: #fff;
color: var(--pw-ink);
min-height: 40px;
padding: 8px 16px;
font-weight: 800;
}
.mta-workspace .pb-cancel-btn:hover {
background: var(--pw-soft);
}
/* overlay styles */
#globalAjaxOverlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.30);
z-index: 20000;
display: none;
align-items: center;
justify-content: center;
-webkit-tap-highlight-color: transparent;
}
.global-ajax-spinner {
background: rgba(255,255,255,0.95);
padding: 18px 22px;
border-radius: 8px;
box-shadow: 0 6px 18px rgba(0,0,0,0.2);
display: flex;
align-items: center;
justify-content: center;
}
/* optional body state while busy */
body.ajax-busy { overflow: hidden; }
#appliedTemplatesCards {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.applied-template-card {
width: 160px;
height: 160px;
border-radius: 16px;
background: #f8f9fb;
border: 1px solid #e5e7eb;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
transition: all 0.25s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
cursor: pointer;
}
.applied-template-card:hover {
background: #f1f3f6;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}
.applied-template-card .template-name {
font-weight: 600;
font-size: 0.95rem;
color: #1f2937;
margin-bottom: 10px;
padding: 0 8px;
word-wrap: break-word;
}
.applied-template-card .delete-template-btn {
background-color: #f43f5e; /* pinkish red */
color: #fff;
border: none;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background-color 0.2s ease;
}
.applied-template-card .delete-template-btn:hover {
background-color: #e11d48;
}
.add-template-card {
width: 160px;
height: 160px;
border-radius: 16px;
border: 2px dashed #cbd5e1;
display: flex;
align-items: center;
justify-content: center;
color: #6b7280;
font-size: 2rem;
cursor: pointer;
transition: border-color 0.2s ease, color 0.2s ease;
}
.add-template-card:hover {
border-color: #9ca3af;
color: #4b5563;
}
@media (max-width: 991.98px) {
.mta-overview-layout,
.mta-settings-layout {
grid-template-columns: 1fr;
}
.mta-filter-panel {
position: static;
}
.mta-toolbar {
align-items: stretch;
}
.mta-toolbar .input-group {
min-width: 100%;
}
}
}
@scope ([data-demo-module="approvals"], [data-demo-module="approval-settings"]) {
.btn-teal {
background-color: #007d7a;
border: none;
}
.btn-teal:hover {
background-color: #00615f;
}
.border-dashed {
border: 2px dashed #ccc;
}
}
@scope ([data-demo-module="payrun"]) {
.dash-content .page-header { display: none; }
.pb-payrun-table th.pb-th-num,
.pb-payrun-table td.pb-td-num {
text-align: right;
white-space: nowrap;
}
.pb-payrun-table th.pb-th-center,
.pb-payrun-table td.pb-td-center {
text-align: center;
}
.pb-payrun-period,
.pb-payrun-date,
.pb-payrun-schedule,
.pb-payrun-money {
display: flex;
flex-direction: column;
gap: 2px;
}
.pb-payrun-period-main,
.pb-payrun-date-main,
.pb-payrun-money-main {
font-weight: 700;
color: #1f2937;
line-height: 1.25;
}
.pb-payrun-period-sub,
.pb-payrun-date-sub,
.pb-payrun-schedule-sub,
.pb-payrun-money-sub {
font-size: 0.82rem;
color: #8a93ad;
line-height: 1.2;
}
.pb-payrun-money-main,
.pb-payrun-money-sub {
white-space: nowrap;
}
.pb-payrun-state {
display: inline-flex;
flex-direction: column;
gap: 6px;
align-items: center;
}
.pb-payrun-state-chip {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 12px;
background: #f5f7fb;
color: #4b5563;
border: 1px solid #e5eaf3;
}
.pb-payrun-state-chip.is-positive {
color: #0f766e;
background: #ecfdf5;
border-color: #ccefe3;
}
.pb-payrun-state-chip.is-muted {
color: #9aa3b8;
background: #f8fafc;
}
.pb-payrun-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
flex-wrap: wrap;
}
.pb-payrun-actions .pb-btn-outline {
min-width: 118px;
justify-content: center;
white-space: nowrap;
}
.pb-payrun-table td {
vertical-align: middle;
}
@media (max-width: 1199.98px) {
.pb-payrun-actions {
justify-content: flex-start;
}
}
}
@scope ([data-demo-module="payrun"], [data-demo-module="billing"], [data-demo-module="entities"], [data-demo-module="users"], [data-demo-module="branches"], [data-demo-module="departments"], [data-demo-module="dimensions"], [data-demo-module="work-types"], [data-demo-module="leave-settings"], [data-demo-module="pay-settings"], [data-demo-module="pay-schedules"], [data-demo-module="expense-settings"], [data-demo-module="attendance-settings"], [data-demo-module="email-settings"]) {
.dash-content .page-header { display: none; }
}
@scope ([data-demo-module="payrun"]) {
.dropup .dropdown-menu {
max-height: 300px;
overflow-y: auto;
font-size: 14px;
padding: 5px;
}
.dropup .dropdown-item {
padding: 5px 10px;
}
#payrun-recalc-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255,255,255,0.85);
z-index: 9999;
justify-content: center;
align-items: center;
flex-direction: column;
}
#payrun-recalc-overlay.show { display: flex; }
#payrun-recalc-overlay .spinner-border { width: 3rem; height: 3rem; }
.pb-payment-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
margin-bottom: 1.25rem;
}
.pb-payment-stat {
border: 1px solid #e4eaf5;
border-radius: 20px;
padding: 1rem 1.1rem;
background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}
.pb-payment-stat .label {
display: block;
font-size: .82rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: #6f7f9a;
margin-bottom: .35rem;
}
.pb-payment-stat .value {
font-size: 1.6rem;
font-weight: 800;
color: #132238;
}
.pb-payment-stat .hint {
margin-top: .25rem;
color: #7f8ca7;
font-size: .92rem;
}
.pb-payment-pill {
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .35rem .7rem;
border-radius: 999px;
font-size: .82rem;
font-weight: 700;
background: #edf3ff;
color: #35507c;
}
.pb-payment-pill.success { background: #ddf9e8; color: #0d7a3d; }
.pb-payment-pill.warning { background: #fff3d8; color: #a86408; }
.pb-payment-pill.danger { background: #fde2e2; color: #b42318; }
.pb-payment-panel {
border: 1px solid #e6edf7;
border-radius: 24px;
padding: 1.25rem;
background: #fff;
}
.pb-payment-panel + .pb-payment-panel { margin-top: 1rem; }
.pb-payment-table td, .pb-payment-table th { vertical-align: middle; }
.pb-payment-table .muted { color: #7f8ca7; font-size: .92rem; }
.pb-payment-table .form-check-input { width: 1.1rem; height: 1.1rem; }
.pb-payment-table .pb-payment-select-cell { width: 52px; }
.pb-payment-selection-summary {
display: inline-flex;
align-items: center;
gap: .65rem;
flex-wrap: wrap;
color: #46607f;
font-weight: 600;
}
}
@scope ([data-demo-module="payrun"]) {
#employeeEditModal .employee-edit-modal-dialog {
max-width: none;
width: calc(100vw - 3rem);
height: calc(100vh - 3rem);
margin: 1.5rem;
}
#employeeEditModal .modal-content {
width: 100%;
height: 100%;
max-height: 100%;
overflow: hidden;
}
#employeeEditModal .modal-body.p-0 {
flex: 1 1 auto;
min-height: 0;
padding: 1rem !important;
overflow: hidden;
}
#employeeEditModal #employeeEditFrame {
display: block;
width: 100%;
height: 100%;
border: 0;
}
}
@scope ([data-demo-module="payrun"]) {
/* Inline EPF / EIS / SOCSO breakdown info icon next to the value. */
.pb-stat-info {
cursor: help;
color: var(--pb-muted, #6b7280);
font-size: 0.95rem;
margin-left: 0.25rem;
vertical-align: middle;
opacity: 0.7;
transition: opacity 0.12s ease, color 0.12s ease;
}
.pb-stat-info:hover { opacity: 1; color: var(--pb-text, #1e3a5f); }
/* The breakdown tooltip body — Bootstrap renders our HTML inside its
default .tooltip-inner, so style the inner wrapper we control. */
.pb-stat-tip { text-align: left; line-height: 1.45; font-size: 0.78rem; }
.pb-stat-tip strong { display: block; margin-bottom: 0.25rem; font-size: 0.82rem; }
.pb-stat-tip-rule { margin: 0.35rem 0; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.25); }
/* PCB / MTD breakdown popover — wider than default so the
formula and value table read cleanly. Click the info button
next to the Tax (PCB) cell to open. */
.pcb-info-btn {
border: 0;
background: transparent;
padding: 0;
margin-left: 0.25rem;
color: var(--pb-muted, #6b7280);
font-size: 0.95rem;
line-height: 1;
vertical-align: middle;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.12s ease, color 0.12s ease;
}
.pcb-info-btn:hover,
.pcb-info-btn:focus { opacity: 1; color: var(--pb-text, #1e3a5f); outline: none; }
/* PCB popup — plain absolutely-positioned panel attached to .
Cream/amber palette deliberately distinct from the surrounding
white-on-grey table to draw the eye, matching the original
inline LHDN explanation block. */
.pcb-popup {
position: absolute;
z-index: 1080;
width: 480px;
background: #fffbeb;
border: 1px solid #f5d782;
border-radius: 8px;
box-shadow: 0 12px 32px rgba(120, 53, 15, 0.18);
font-size: 0.92rem;
color: #1f2937;
line-height: 1.5;
}
.pcb-popup .pcb-popup-header {
font-weight: 700;
font-size: 1rem;
color: #92400e;
padding: 0.85rem 1.1rem;
border-bottom: 1px solid #f5d782;
background: #fef3c7;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.pcb-popup .pcb-popup-body {
padding: 0.95rem 1.1rem;
}
.pcb-popup .pcb-popup-formula {
margin: 0 0 0.75rem 0;
color: #78350f;
font-size: 0.82rem;
font-style: italic;
}
.pcb-popup .pcb-popup-empty {
margin: 0;
color: #78350f;
font-style: italic;
}
.pcb-popup .pcb-popup-table {
width: 100%;
border-collapse: collapse;
}
.pcb-popup .pcb-popup-table td {
padding: 0.4rem 0.4rem;
border-bottom: 1px solid #fde68a;
}
.pcb-popup .pcb-popup-table td:last-child {
text-align: right;
font-variant-numeric: tabular-nums;
font-weight: 600;
}
.pcb-popup .pcb-popup-table tr.pcb-popup-total td {
font-weight: 700;
font-size: 1rem;
color: #92400e;
border-top: 2px solid #92400e;
border-bottom: 0;
padding-top: 0.6rem;
}
.tax-calculation-actions .tax-calculation-action-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
min-height: 42px;
padding: 0.55rem 1.05rem;
border: 1px solid #d7dee9;
border-radius: 999px;
background: #ffffff;
color: #536171;
font-weight: 700;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
white-space: nowrap;
transition: color 0.16s ease, border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}
.tax-calculation-actions .tax-calculation-action-btn i {
font-size: 1rem;
}
.tax-calculation-actions .tax-calculation-action-btn:hover,
.tax-calculation-actions .tax-calculation-action-btn:focus {
border-color: #b8c4d4;
background: #f8fafc;
color: #243044;
box-shadow: 0 4px 12px rgba(16, 24, 40, 0.08);
}
.tax-calculation-actions .tax-calculation-action-btn:disabled {
border-color: #e4e9f0;
background: #f7f9fb;
color: #a0a8b2;
box-shadow: none;
opacity: 1;
}
}
@scope ([data-demo-module="payrun"]) {
' +
'body{font-family:Arial,sans-serif;color:#111827;margin:32px;line-height:1.45;}' +
'h1{font-size:22px;margin:0 0 4px;} h2{font-size:15px;margin:24px 0 8px;}' +
'.employee{color:#4b5563;margin-bottom:24px;}' +
'.accordion-item{border-top:1px solid #d1d5db;padding:12px 0;}' +
'.accordion-button{border:0;background:transparent;padding:0;font-weight:700;font-size:15px;}' +
'.collapse{display:block!important;height:auto!important;visibility:visible!important;}' +
'.accordion-body{padding:8px 0 0;} table{width:100%;border-collapse:collapse;margin:8px 0;}' +
'td{padding:6px 0;border-bottom:1px solid #e5e7eb;} td:last-child{text-align:right;font-weight:600;}' +
'.text-muted{color:#6b7280;} .mb-0,.mb-1,.mb-2{margin-bottom:8px;} p{margin-top:0;}' +
'@media print{body{margin:20mm;} button{color:#111827;}}' +
'
}
@scope ([data-demo-module="salary-scale"], [data-demo-module="compa-ratio"]) {
.ss {
--pw-accent: #0f8f82;
--pw-accent-rgb: 15,143,130;
--pw-accent-bg: #ecfdf9;
}
.ss .ss-actions {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.ss .ss-action {
min-height: 40px;
display: inline-flex;
align-items: center;
gap: 8px;
border-radius: 11px;
font-weight: 800;
}
.ss .ss-action--primary {
border-color: var(--pw-accent);
background: var(--pw-accent);
color: #fff;
box-shadow: 0 12px 24px rgba(var(--pw-accent-rgb), 0.18);
}
.ss .ss-action--primary:hover {
border-color: #0b746a;
background: #0b746a;
color: #fff;
}
.ss .ss-action--ghost {
border: 1px solid #dbe6ef;
background: #fff;
color: var(--pw-ink);
}
.ss .ss-action--ghost:hover {
border-color: rgba(var(--pw-accent-rgb), 0.30);
background: rgba(var(--pw-accent-rgb), 0.08);
color: var(--pw-accent);
}
.ss .ss-panel {
overflow: hidden;
}
.ss .ss-panel-body {
padding: 24px 26px 26px;
}
.ss .ss-onboard {
display: grid;
grid-template-columns: minmax(0, 1fr) 220px;
gap: 24px;
padding: 28px;
border: 1px solid rgba(var(--pw-accent-rgb), 0.14);
border-radius: 20px;
background:
radial-gradient(circle at top right, rgba(var(--pw-accent-rgb), 0.14), transparent 32%),
linear-gradient(135deg, #fff 0%, #f8fffd 100%);
box-shadow: var(--pw-shadow);
}
.ss .ss-onboard h2 {
margin: 0 0 8px;
color: var(--pw-ink);
font-size: 1.25rem;
font-weight: 800;
}
.ss .ss-onboard p {
max-width: 880px;
color: var(--pw-mute);
line-height: 1.55;
}
.ss .ss-steps {
display: grid;
gap: 8px;
margin: 16px 0 20px;
padding: 0;
list-style: none;
}
.ss .ss-steps li {
display: flex;
gap: 10px;
color: var(--pw-ink);
font-size: 0.9rem;
line-height: 1.45;
}
.ss .ss-steps li::before {
content: counter(ss-step);
counter-increment: ss-step;
width: 24px;
height: 24px;
flex: 0 0 24px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: rgba(var(--pw-accent-rgb), 0.10);
color: var(--pw-accent);
font-size: 0.76rem;
font-weight: 900;
}
.ss .ss-steps {
counter-reset: ss-step;
}
.ss .ss-watermark {
align-self: center;
justify-self: center;
width: 132px;
height: 132px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 32px;
background: rgba(var(--pw-accent-rgb), 0.08);
color: var(--pw-accent);
font-size: 4.6rem;
opacity: .72;
}
.ss .ss-table-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 0 26px 18px;
color: var(--pw-mute);
font-size: 0.88rem;
}
.ss .ss-table-wrap {
padding: 0 26px 24px;
overflow-x: auto;
}
.ss .table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
.ss .table thead th {
padding: 13px 14px;
border-bottom: 1px solid var(--pw-border);
background: var(--pw-soft);
color: var(--pw-mute);
font-size: 0.72rem;
font-weight: 900;
letter-spacing: .06em;
text-transform: uppercase;
}
.ss .table thead th:first-child {
border-top-left-radius: 12px;
}
.ss .table thead th:last-child {
border-top-right-radius: 12px;
}
.ss .table tbody td {
padding: 15px 14px;
border-bottom: 1px solid #edf3f7;
color: var(--pw-ink);
vertical-align: middle;
}
.ss .table tbody tr:hover td {
background: #fbfdff;
}
.ss .ss-code {
display: inline-flex;
align-items: center;
padding: 5px 10px;
border: 1px solid #dbe6ef;
border-radius: 9px;
background: #f8fbfd;
color: var(--pw-ink);
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 0.8rem;
font-weight: 800;
}
.ss .ss-status {
display: inline-flex;
align-items: center;
padding: 5px 10px;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 900;
letter-spacing: .04em;
text-transform: uppercase;
}
.ss .ss-status--active { background: #dcfce7; color: #15803d; }
.ss .ss-status--draft { background: #eef2ff; color: #4338ca; }
.ss .ss-status--archived { background: #f1f5f9; color: #475569; }
.ss .ss-status--warn { background: #fef3c7; color: #a16207; }
.ss .ss-row-actions {
display: inline-flex;
align-items: center;
gap: 7px;
}
.ss .ss-icon-btn {
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #dbe6ef;
border-radius: 10px;
background: #fff;
color: var(--pw-mute);
}
.ss .ss-icon-btn:hover {
border-color: rgba(var(--pw-accent-rgb), 0.30);
background: rgba(var(--pw-accent-rgb), 0.08);
color: var(--pw-accent);
}
.ss .ss-icon-btn--danger {
color: #be123c;
border-color: #fecdd3;
}
.ss .ss-icon-btn--danger:hover {
background: #fff1f2;
color: #9f1239;
}
.ss .ss-form-card {
padding: 28px;
}
.ss .form-label,
#commonModal .salary-scale-modal .form-label {
margin-bottom: 8px;
color: var(--pw-mute, #74839a);
font-size: 0.72rem;
font-weight: 900;
letter-spacing: .06em;
text-transform: uppercase;
}
.ss .form-control,
.ss .form-select,
#commonModal .salary-scale-modal .form-control,
#commonModal .salary-scale-modal .form-select {
min-height: 44px;
border: 1px solid #dbe6ef;
border-radius: 12px;
background: #fff;
color: var(--pw-ink, #132238);
box-shadow: none;
}
.ss textarea.form-control,
#commonModal .salary-scale-modal textarea.form-control {
min-height: 92px;
}
.ss .form-control:focus,
.ss .form-select:focus,
#commonModal .salary-scale-modal .form-control:focus,
#commonModal .salary-scale-modal .form-select:focus {
border-color: var(--pw-accent, #0f8f82);
box-shadow: 0 0 0 4px rgba(var(--pw-accent-rgb, 15,143,130), 0.12);
}
.ss .form-group,
#commonModal .salary-scale-modal .form-group {
margin-bottom: 16px;
}
#commonModal .salary-scale-modal {
padding: 24px;
}
#commonModal .modal-content {
border: 1px solid #dfe9e5;
border-radius: 22px;
overflow: hidden;
box-shadow: 0 28px 60px rgba(15, 23, 42, 0.18);
}
#commonModal .modal-header {
padding: 20px 24px;
border-bottom: 1px solid #e9f0ed;
background: linear-gradient(180deg, #fbfffe 0%, #f7fbfa 100%);
}
#commonModal .modal-title {
color: var(--pw-ink, #132238);
font-weight: 800;
}
#commonModal .btn-close {
width: 38px;
height: 38px;
padding: 0;
border: 1px solid #e4ece9;
border-radius: 12px;
background-color: #fff;
background-size: 14px;
opacity: .78;
}
#commonModal .salary-scale-modal-footer {
padding: 18px 24px 22px;
border-top: 1px solid #e8f0f6;
background: #fbfefd;
gap: 10px;
}
#commonModal .salary-scale-modal .pb-save-btn,
.ss .pb-save-btn {
min-height: 42px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 16px;
border: 1px solid var(--pw-accent, #0f8f82);
border-radius: 11px;
background: var(--pw-accent, #0f8f82);
color: #fff;
font-weight: 800;
}
#commonModal .salary-scale-modal .pb-cancel-btn,
.ss .pb-cancel-btn {
min-height: 42px;
padding: 9px 16px;
border: 1px solid #dbe6ef;
border-radius: 11px;
background: #fff;
color: var(--pw-ink, #132238);
font-weight: 800;
}
#commonModal .salary-scale-modal .form-check,
.ss .form-check {
padding: 12px 14px 12px 38px;
border: 1px solid #e4edf5;
border-radius: 12px;
background: #fbfdff;
}
@media (max-width: 991.98px) {
.ss .ss-onboard {
grid-template-columns: 1fr;
}
.ss .ss-watermark {
display: none;
}
}
}
@scope ([data-demo-module="report-shortcuts"]) {
.pw .rep-company { font-weight: 600; color: var(--pw-mute); font-size: 1.1rem; }
.pw .rep-card__icon {
width: 44px; height: 44px; border-radius: 13px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(var(--pw-accent-rgb), 0.10); color: var(--pw-accent);
font-size: 1.1rem; flex-shrink: 0;
}
.pw .rep-card__icon--accent {
background: rgba(var(--rep-accent-rgb), 0.12); color: var(--rep-accent);
}
.pw .rep-count-chip {
display: inline-flex; align-items: center;
padding: 5px 12px; border-radius: 999px;
background: var(--pw-accent-bg); color: var(--pw-accent);
font-size: 0.78rem; font-weight: 700;
border: 1px solid rgba(var(--pw-accent-rgb), 0.22);
}
/* Operational sub-columns */
.pw .rep-subgroup {
border: 1px solid var(--pw-border); border-radius: 16px;
background: linear-gradient(180deg, #fff 0%, var(--pw-soft) 100%);
padding: 16px 18px;
}
.pw .rep-subgroup__head {
display: flex; align-items: center; gap: 10px;
margin-bottom: 12px;
color: var(--pw-ink); font-weight: 800; font-size: 0.9rem;
letter-spacing: 0.02em;
}
.pw .rep-subgroup__head i {
width: 28px; height: 28px; border-radius: 8px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(var(--pw-accent-rgb), 0.12); color: var(--pw-accent);
font-size: 0.85rem;
}
/* Generic report link list */
.pw .rep-list { list-style: none; padding: 0; margin: 0; }
.pw .rep-list li + li { margin-top: 4px; }
.pw .rep-link {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 10px 12px; border-radius: 10px;
color: var(--pw-ink); text-decoration: none; font-size: 0.88rem; font-weight: 600;
transition: background .15s, color .15s, transform .15s;
}
.pw .rep-link:hover {
background: rgba(var(--pw-accent-rgb), 0.08);
color: var(--pw-accent);
transform: translateX(2px);
}
.pw .rep-link__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw .rep-link__arrow { font-size: 0.74rem; opacity: 0; transition: opacity .15s; }
.pw .rep-link:hover .rep-link__arrow { opacity: 1; }
/* Per-card-group accent variant */
.pw .rep-group-card {
padding: 22px;
border-top: 4px solid var(--rep-accent);
}
.pw .rep-group-card__head {
display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.pw .rep-group-card__title {
margin: 0; font-size: 0.98rem; font-weight: 800; color: var(--pw-ink);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pw .rep-group-card__count {
font-size: 0.74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
color: var(--pw-mute);
}
.pw .rep-list--card .rep-link--accent:hover {
background: rgba(var(--rep-accent-rgb), 0.10);
color: var(--rep-accent);
}
.pw .min-width-0 { min-width: 0; }
/* Section header sits between operational card and the new-reports grid;
has no body padding because it's just a band. */
.pw .rep-section-header .pw-panel__header { padding-bottom: 24px; }
@media (max-width: 991.98px) {
.pw .rep-group-card { padding: 18px; }
}
}
@scope ([data-demo-module="benefits"]) {
.fb-ai-launch-btn {
background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: #fff !important;
border: none;
border-radius: 999px;
padding: 6px 16px;
box-shadow: 0 4px 12px rgba(99,102,241,.30);
}
.fb-ai-launch-btn:hover {
filter: brightness(1.08);
color: #fff !important;
transform: translateY(-1px);
}
.fb-ai-launch-btn i { margin-right: 4px; }
.fb-dict-btn {
background: #f0fdfa;
color: #0f766e !important;
border: 1px solid #ccfbf1;
border-radius: 999px;
padding: 6px 14px;
font-weight: 600;
transition: background .15s, border-color .15s, transform .15s;
}
.fb-dict-btn:hover {
background: #ccfbf1;
border-color: #0d9488;
color: #0f766e !important;
transform: translateY(-1px);
}
.fb-dict-btn i { margin-right: 4px; color: #0d9488; }
}
@scope ([data-demo-module="benefits"]) {
#pw-flexi .fb-phase-one-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
#pw-flexi .fb-phase-one-card {
padding: 18px 20px;
border: 1px solid rgba(var(--pw-accent-rgb), 0.12);
border-radius: 20px;
background: linear-gradient(180deg, #ffffff 0%, #f8fcfb 100%);
}
#pw-flexi .fb-phase-one-card__label {
display: block;
color: var(--pw-mute);
font-size: 0.76rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
}
#pw-flexi .fb-phase-one-card__value {
display: block;
margin: 10px 0 6px;
color: var(--pw-ink);
font-size: 2rem;
line-height: 1;
}
#pw-flexi .fb-phase-one-card__hint {
display: block;
color: var(--pw-mute);
font-size: 0.82rem;
line-height: 1.45;
}
#pw-flexi .fb-phase-one-list {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 0;
border-bottom: 1px solid #edf3f0;
}
#pw-flexi .fb-phase-one-list:last-child {
border-bottom: 0;
padding-bottom: 0;
}
#pw-flexi .fb-phase-one-list:first-of-type {
padding-top: 0;
}
#pw-flexi .fb-phase-one-list__meta {
display: flex;
align-items: center;
gap: 10px;
color: var(--pw-mute);
font-size: 0.82rem;
font-weight: 700;
text-align: right;
}
@media (max-width: 991.98px) {
#pw-flexi .fb-phase-one-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 575.98px) {
#pw-flexi .fb-phase-one-grid {
grid-template-columns: minmax(0, 1fr);
}
#pw-flexi .fb-phase-one-list {
flex-direction: column;
align-items: flex-start;
}
#pw-flexi .fb-phase-one-list__meta {
text-align: left;
}
}
}
@scope ([data-demo-module="benefit-enrollment"], [data-demo-module="flexi-claims"], [data-demo-module="benefit-plans"], [data-demo-module="benefit-management"], [data-demo-module="providers"], [data-demo-module="pulse-first"]) {
#commonModal.fb-modal-active .modal-dialog {
max-width: 760px;
margin-top: 1.4rem;
}
#commonModal.fb-modal-active.fb-modal-size-compact .modal-dialog {
max-width: 640px;
}
#commonModal.fb-modal-active.fb-modal-size-wide .modal-dialog {
max-width: 1040px;
}
#commonModal.fb-modal-active .modal-content {
border: 1px solid #dfe9e5;
border-radius: 28px;
overflow: hidden;
background: linear-gradient(180deg, #fcfffe 0%, #ffffff 100%);
box-shadow: 0 28px 60px rgba(15, 23, 42, 0.18);
}
#commonModal.fb-modal-active .modal-header {
padding: 24px 28px 18px;
border-bottom: 1px solid #e9f0ed;
background:
radial-gradient(circle at top right, rgba(15, 143, 130, 0.10), transparent 28%),
linear-gradient(180deg, #fbfffe 0%, #f7fbfa 100%);
}
#commonModal.fb-modal-active .modal-title {
color: #16253d;
font-size: 1.3rem;
font-weight: 800;
letter-spacing: -0.02em;
}
#commonModal.fb-modal-active .btn-close {
width: 42px;
height: 42px;
padding: 0;
margin: 0;
border: 1px solid #e4ece9;
border-radius: 14px;
background-color: #fff;
background-size: 15px;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
opacity: .75;
}
#commonModal.fb-modal-active .btn-close:hover {
opacity: 1;
}
#commonModal.fb-modal-active .modal-body {
padding: 28px;
}
#commonModal.fb-modal-active .modal-footer {
padding: 18px 28px 24px;
border-top: 1px solid #e9f0ed;
background: #fbfefd;
gap: 12px;
}
#commonModal.fb-modal-active .modal-footer > * {
margin: 0;
}
#commonModal .fb-modal {
color: #16253d;
}
#commonModal .fb-modal .form-label,
#commonModal .fb-modal .col-form-label {
display: block;
margin-bottom: 8px;
color: #6f7f98;
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
#commonModal .fb-modal .form-control,
#commonModal .fb-modal .form-select {
min-height: 48px;
border: 1px solid #dce7e3;
border-radius: 15px;
background-color: #fff;
color: #16253d;
box-shadow: none;
}
#commonModal .fb-modal textarea.form-control {
min-height: 120px;
padding-top: 14px;
padding-bottom: 14px;
resize: vertical;
}
#commonModal .fb-modal .form-control:focus,
#commonModal .fb-modal .form-select:focus,
#commonModal .fb-modal .form-check-input:focus {
border-color: #0f8f82;
box-shadow: 0 0 0 4px rgba(15, 143, 130, 0.12);
}
#commonModal .fb-modal .form-text {
color: #7c8aa5;
font-size: 0.82rem;
line-height: 1.5;
}
#commonModal .fb-modal .form-control-color {
width: 100%;
min-width: 100%;
padding: 6px;
}
#commonModal .fb-modal .select2-container {
width: 100% !important;
}
#commonModal .fb-modal .select2-container--default .select2-selection--single {
min-height: 48px;
border: 1px solid #dce7e3;
border-radius: 15px;
background: #fff;
display: flex;
align-items: center;
padding: 6px 42px 6px 14px;
}
#commonModal .fb-modal .select2-container--default .select2-selection--single .select2-selection__rendered {
width: 100%;
padding: 0;
color: #16253d;
line-height: 1.2;
}
#commonModal .fb-modal .select2-container--default .select2-selection--single .select2-selection__placeholder {
color: #7c8aa5;
}
#commonModal .fb-modal .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 46px;
right: 12px;
}
#commonModal .fb-modal .select2-container--default .select2-selection--multiple {
min-height: 48px;
border: 1px solid #dce7e3;
border-radius: 15px;
background: #fff;
padding: 6px 40px 6px 10px;
position: relative;
}
#commonModal .fb-modal .fb-benefit-select-shell {
position: relative;
}
#commonModal .fb-modal .fb-benefit-select-shell .select2-selection--multiple::after {
content: '';
position: absolute;
top: 50%;
right: 16px;
width: 9px;
height: 9px;
border-right: 2px solid #7c8aa5;
border-bottom: 2px solid #7c8aa5;
transform: translateY(-62%) rotate(45deg);
pointer-events: none;
}
#commonModal .fb-modal .fb-benefit-select-shell .select2-container--open .select2-selection--multiple::after {
transform: translateY(-36%) rotate(225deg);
}
#commonModal .fb-modal .fb-benefit-select-shell .select2-dropdown {
margin-top: 8px;
z-index: 12;
}
#commonModal .fb-modal .select2-container--default .select2-selection--multiple .select2-selection__rendered {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 0;
}
#commonModal .fb-modal .select2-container--default .select2-selection--multiple .select2-selection__choice {
margin: 0;
border: 1px solid rgba(15, 143, 130, 0.18);
border-radius: 999px;
background: rgba(15, 143, 130, 0.10);
color: #0f8f82;
font-weight: 700;
padding: 4px 10px 4px 26px;
position: relative;
}
#commonModal .fb-modal .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
position: absolute;
left: 9px;
top: 50%;
transform: translateY(-50%);
margin: 0;
color: #0f8f82;
border: 0;
}
#commonModal .fb-modal .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
margin: 0 !important;
min-height: 28px;
padding: 0 4px;
}
#commonModal .fb-modal .select2-container--default.select2-container--focus .select2-selection--multiple,
#commonModal .fb-modal .select2-container--default.select2-container--open .select2-selection--multiple {
border-color: #0f8f82;
box-shadow: 0 0 0 4px rgba(15, 143, 130, 0.12);
}
#commonModal .fb-modal .select2-container--default.select2-container--focus .select2-selection--single,
#commonModal .fb-modal .select2-container--default.select2-container--open .select2-selection--single {
border-color: #0f8f82;
box-shadow: 0 0 0 4px rgba(15, 143, 130, 0.12);
}
#commonModal .select2-dropdown {
border: 1px solid #dce7e3;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 22px 46px rgba(15, 23, 42, 0.14);
}
#commonModal .select2-search--dropdown {
padding: 10px;
}
#commonModal .select2-search--dropdown .select2-search__field {
min-height: 40px;
border: 1px solid #dce7e3;
border-radius: 12px;
padding: 0 12px;
}
#commonModal .select2-results__option {
padding: 8px 12px;
}
#commonModal .select2-results__group {
padding: 10px 12px 6px;
color: #6f7f98;
font-size: 0.74rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
#commonModal .select2-container--default .select2-results__option[aria-selected=true] {
background: #f4faf8;
color: #16253d !important;
}
#commonModal .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
background: #eef8f5;
color: #16253d !important;
}
#commonModal .fb-modal .fb-benefit-option {
display: flex;
flex-direction: column;
gap: 2px;
}
#commonModal .fb-modal .fb-benefit-option__label {
color: #16253d;
font-weight: 700;
line-height: 1.25;
}
#commonModal .fb-modal .fb-benefit-option__meta {
color: #5f708c;
font-size: 0.78rem;
font-weight: 600;
line-height: 1.3;
}
#commonModal .select2-container--default .select2-results__option[aria-selected=true] .fb-benefit-option__label,
#commonModal .select2-container--default .select2-results__option[aria-selected=true] .fb-benefit-option__meta,
#commonModal .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable .fb-benefit-option__label,
#commonModal .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable .fb-benefit-option__meta {
color: #16253d !important;
}
#commonModal .select2-container--default .select2-results__option[aria-selected=true] .fb-icon-option,
#commonModal .select2-container--default .select2-results__option[aria-selected=true] .fb-icon-option__label,
#commonModal .select2-container--default .select2-results__option--highlighted[aria-selected] .fb-icon-option,
#commonModal .select2-container--default .select2-results__option--highlighted[aria-selected] .fb-icon-option__label {
color: #16253d !important;
}
#commonModal .select2-container--default .select2-results__option[aria-selected=true] .fb-icon-option__swatch,
#commonModal .select2-container--default .select2-results__option--highlighted[aria-selected] .fb-icon-option__swatch {
background: rgba(15, 143, 130, 0.12);
color: #0f8f82 !important;
}
#commonModal .fb-modal .fb-modal-stack {
display: flex;
flex-direction: column;
gap: 18px;
}
#commonModal .fb-modal .fb-modal-section {
padding: 18px;
border: 1px solid #e8f0ed;
border-radius: 22px;
background: linear-gradient(180deg, #ffffff 0%, #fbfefd 100%);
}
#commonModal .fb-modal .fb-modal-section__header {
margin-bottom: 16px;
}
#commonModal .fb-modal .fb-modal-section__title {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
color: #16253d;
font-size: 1rem;
font-weight: 800;
line-height: 1.3;
}
#commonModal .fb-modal .fb-modal-section__title i {
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: rgba(15, 143, 130, 0.10);
color: #0f8f82;
font-size: 0.95rem;
}
#commonModal .fb-modal .fb-modal-section__description {
margin: 6px 0 0 44px;
color: #7c8aa5;
font-size: 0.84rem;
line-height: 1.5;
}
#commonModal .fb-modal .fb-radio-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
#commonModal .fb-modal .fb-radio-card {
position: relative;
display: flex;
align-items: center;
gap: 10px;
min-height: 52px;
padding: 12px 14px;
border: 1px solid #dce7e3;
border-radius: 16px;
background: #fff;
color: #24324b;
font-weight: 700;
}
#commonModal .fb-modal .fb-radio-card .form-check-input {
margin: 0;
flex: 0 0 auto;
}
#commonModal .fb-modal .fb-radio-card .form-check-label {
margin: 0;
font-size: 0.92rem;
font-weight: 700;
color: inherit;
}
#commonModal .fb-modal .fb-switch-row {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border: 1px solid #dce7e3;
border-radius: 16px;
background: #fff;
}
#commonModal .fb-modal .fb-switch-row .form-check-input {
width: 2.5em;
height: 1.4em;
margin: 0;
box-shadow: none;
}
#commonModal .fb-modal .fb-switch-row__label {
color: #24324b;
font-size: 0.92rem;
font-weight: 700;
}
#commonModal .fb-modal .fb-attachment-trigger,
#commonModal .fb-modal .fb-inline-btn {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 40px;
padding: 0 14px;
border-radius: 12px;
border: 1px solid #cde3dd;
background: #f6fbfa;
color: #0f6f65;
font-size: 0.86rem;
font-weight: 700;
text-decoration: none;
}
#commonModal .fb-modal .fb-attachment-trigger:hover,
#commonModal .fb-modal .fb-inline-btn:hover {
color: #0c5d54;
background: #eef8f5;
}
#commonModal .fb-modal .fb-attachment-list .list-group-item {
border: 1px solid #e5eeeb;
border-radius: 14px;
margin-bottom: 10px;
background: #fff;
}
#commonModal .fb-modal .fb-table-head {
display: grid;
grid-template-columns: 1fr 1fr 72px;
gap: 10px;
margin-bottom: 12px;
color: #6f7f98;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
#commonModal .fb-modal .coverage-detail-row {
align-items: center;
}
#commonModal .fb-modal .fb-detail-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
#commonModal .fb-modal .fb-detail-card {
padding: 14px 16px;
border: 1px solid #e6efeb;
border-radius: 16px;
background: #fbfefd;
}
#commonModal .fb-modal .fb-detail-card--full {
grid-column: 1 / -1;
}
#commonModal .fb-modal .fb-detail-label {
display: block;
margin-bottom: 6px;
color: #6f7f98;
font-size: 0.74rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
#commonModal .fb-modal .fb-detail-value {
color: #16253d;
font-size: 0.94rem;
font-weight: 700;
line-height: 1.55;
word-break: break-word;
}
#commonModal .fb-modal .pb-cancel-btn,
#commonModal .fb-modal .pb-save-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-width: 138px;
min-height: 48px;
padding: 0 18px;
border-radius: 999px;
font-size: 0.92rem;
font-weight: 800;
}
#commonModal .fb-modal .pb-cancel-btn {
border: 1px solid #dbe6e2;
background: #fff;
color: #4b5b74;
}
#commonModal .fb-modal .pb-save-btn {
border: 0;
background: linear-gradient(135deg, #139886 0%, #0e7b34 100%);
color: #fff;
box-shadow: 0 14px 28px rgba(15, 143, 130, 0.18);
}
#commonModal .fb-modal .pb-save-btn:disabled {
opacity: .6;
box-shadow: none;
}
#commonModal .fb-modal .fb-empty-callout {
padding: 18px;
border: 1px dashed #cfe1dc;
border-radius: 18px;
background: #f8fcfb;
color: #74839a;
text-align: center;
}
#commonModal .fb-modal .fb-icon-option {
display: flex;
align-items: center;
gap: 10px;
color: #16253d !important;
}
#commonModal .fb-modal .fb-icon-option__swatch {
width: 32px;
height: 32px;
flex: 0 0 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 11px;
background: rgba(15, 143, 130, 0.10);
color: #0f8f82 !important;
font-size: 1rem;
}
#commonModal .fb-modal .fb-icon-option__label {
color: #16253d !important;
font-size: 0.92rem;
font-weight: 700;
line-height: 1.35;
}
#commonModal .fb-modal .fb-icon-option--placeholder .fb-icon-option__label {
color: #7c8aa5 !important;
font-weight: 600;
}
@media (max-width: 767.98px) {
#commonModal.fb-modal-active .modal-header,
#commonModal.fb-modal-active .modal-body,
#commonModal.fb-modal-active .modal-footer {
padding-left: 18px;
padding-right: 18px;
}
#commonModal .fb-modal .fb-radio-grid,
#commonModal .fb-modal .fb-detail-grid,
#commonModal .fb-modal .fb-table-head {
grid-template-columns: 1fr;
}
#commonModal .fb-modal .pb-cancel-btn,
#commonModal .fb-modal .pb-save-btn {
width: 100%;
}
}
}
@scope ([data-demo-module="flexi-claims"], [data-demo-module="benefit-calculator"]) {
#pw-flexi .fb-employee-shell,
.fb-employee-shell {
--fb-employee-accent: #0f8f82;
--fb-employee-accent-strong: #0c6f67;
--fb-employee-ink: #16253d;
--fb-employee-muted: #6f7f98;
--fb-employee-border: #dbe8e3;
--fb-employee-border-strong: #c6ddd6;
--fb-employee-surface: #ffffff;
--fb-employee-surface-soft: #f6fbf9;
--fb-employee-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
color: var(--fb-employee-ink);
}
.fb-employee-shell {
position: relative;
}
.fb-employee-shell__stack {
display: flex;
flex-direction: column;
gap: 1rem;
}
.fb-employee-hero,
.fb-employee-panel,
.fb-employee-stat-card,
.fb-employee-empty-state,
.fb-employee-table-card {
border: 1px solid var(--fb-employee-border);
border-radius: 28px;
background: var(--fb-employee-surface);
box-shadow: var(--fb-employee-shadow);
}
.fb-employee-hero {
position: relative;
overflow: hidden;
background:
radial-gradient(circle at top right, rgba(15, 143, 130, 0.13), transparent 30%),
radial-gradient(circle at bottom left, rgba(59, 130, 246, 0.10), transparent 26%),
linear-gradient(145deg, #f8fffd 0%, #ffffff 54%, #f5fbff 100%);
}
.fb-employee-hero__body,
.fb-employee-panel__body {
padding: 1.5rem;
}
.fb-employee-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 0.45rem;
margin-bottom: 0.8rem;
padding: 0.48rem 0.8rem;
border-radius: 999px;
background: rgba(15, 143, 130, 0.10);
color: var(--fb-employee-accent);
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.fb-employee-hero__eyebrow i {
font-size: 0.95rem;
line-height: 1;
}
.fb-employee-hero__title {
margin: 0;
color: var(--fb-employee-ink);
font-size: clamp(1.55rem, 2vw, 2.2rem);
font-weight: 800;
letter-spacing: -0.03em;
}
.fb-employee-hero__description,
.fb-employee-panel__description,
.fb-employee-empty-state__description {
margin: 0.6rem 0 0;
max-width: 760px;
color: var(--fb-employee-muted);
font-size: 1rem;
line-height: 1.65;
}
.fb-employee-hero__actions,
.fb-employee-inline-actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.fb-employee-btn {
min-height: 48px;
padding: 0 1.15rem;
border: 1px solid transparent;
border-radius: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
/* Solid teal background-color as a safety net UNDER the gradient: if
any theme rule strips/overrides the gradient background-image, the
button still paints teal instead of going transparent → white text
on white (the vanished-on-hover bug). Both pinned with !important. */
background-color: #0f8f82 !important;
background-image: linear-gradient(135deg, #13b7a4 0%, #0f8f82 100%) !important;
color: #fff !important;
font-size: 0.95rem;
font-weight: 700;
text-decoration: none;
box-shadow: 0 16px 34px rgba(15, 143, 130, 0.22);
transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.fb-employee-btn i {
font-size: 1rem;
line-height: 1;
flex: 0 0 auto;
}
.fb-employee-btn:hover,
.fb-employee-btn:focus {
/* NOTE (Safari): do NOT apply `filter` here. Safari drops the
gradient `background-image` layer when a filter is introduced on
:hover, repainting the button transparent → white-on-white (the
"turns white on mouseover" bug). Chrome is unaffected. We convey
hover via translate + shadow only, and darken the gradient stops
instead of using filter. Keep the solid background-color as the
paint-of-record so the button is never white even if Safari drops
the gradient. */
transform: translateY(-1px);
background-color: #0c7d72 !important;
background-image: linear-gradient(135deg, #0f8f82 0%, #0c7d72 100%) !important;
color: #fff !important;
text-decoration: none !important;
box-shadow: 0 18px 36px rgba(15, 143, 130, 0.26);
}
.fb-employee-btn--ghost,
.fb-employee-btn--light {
background: rgba(255, 255, 255, 0.92);
color: var(--fb-employee-ink) !important;
border-color: var(--fb-employee-border);
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}
.fb-employee-btn--ghost:hover,
.fb-employee-btn--ghost:focus,
.fb-employee-btn--light:hover,
.fb-employee-btn--light:focus {
color: var(--fb-employee-ink) !important;
border-color: var(--fb-employee-border-strong);
box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}
.fb-employee-btn--compact {
min-height: 42px;
padding: 0 0.95rem;
border-radius: 14px;
font-size: 0.9rem;
}
.fb-employee-panel {
overflow: hidden;
}
.fb-employee-panel__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.fb-employee-panel__title {
margin: 0;
color: var(--fb-employee-ink);
font-size: 1.18rem;
font-weight: 800;
letter-spacing: -0.02em;
}
.fb-employee-panel__subtitle {
margin: 0;
color: var(--fb-employee-muted);
font-size: 0.88rem;
font-weight: 600;
}
.fb-employee-badge,
.fb-employee-pill {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.5rem 0.82rem;
border-radius: 999px;
border: 1px solid var(--fb-employee-border);
background: rgba(255, 255, 255, 0.92);
color: var(--fb-employee-ink);
font-size: 0.82rem;
font-weight: 700;
}
.fb-employee-badge i,
.fb-employee-pill i {
color: var(--fb-employee-accent);
font-size: 0.95rem;
}
.fb-employee-stats-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1rem;
}
.fb-employee-stat-card {
padding: 1.15rem 1.15rem 1.05rem;
background: linear-gradient(180deg, #ffffff 0%, #fbfefd 100%);
}
.fb-employee-stat-card__label {
color: var(--fb-employee-muted);
font-size: 0.74rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.07em;
}
.fb-employee-stat-card__value {
margin: 0.65rem 0 0.35rem;
color: var(--fb-employee-ink);
font-size: 1.9rem;
font-weight: 800;
line-height: 1.05;
}
.fb-employee-stat-card__hint {
color: var(--fb-employee-muted);
font-size: 0.87rem;
line-height: 1.55;
}
.fb-employee-list-card {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: 1rem 0;
border-bottom: 1px solid #edf2f7;
}
.fb-employee-list-card:first-of-type {
padding-top: 0;
}
.fb-employee-list-card:last-child {
padding-bottom: 0;
border-bottom: 0;
}
.fb-employee-list-card__title {
color: var(--fb-employee-ink);
font-size: 1rem;
font-weight: 700;
}
.fb-employee-list-card__meta,
.fb-employee-list-card__subtext {
color: var(--fb-employee-muted);
font-size: 0.88rem;
line-height: 1.55;
}
.fb-employee-list-card__aside {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
justify-content: flex-end;
text-align: right;
}
.fb-employee-action-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.95rem;
}
.fb-employee-action-tile {
min-height: 128px;
padding: 1rem;
border: 1px solid var(--fb-employee-border);
border-radius: 22px;
display: flex;
gap: 0.9rem;
align-items: flex-start;
background: linear-gradient(180deg, #ffffff 0%, #f9fdfb 100%);
color: var(--fb-employee-ink);
text-decoration: none;
transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.fb-employee-action-tile:hover,
.fb-employee-action-tile:focus {
transform: translateY(-2px);
border-color: var(--fb-employee-border-strong);
color: var(--fb-employee-ink);
box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
}
.fb-employee-action-tile__icon {
width: 48px;
height: 48px;
border-radius: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(15, 143, 130, 0.10);
color: var(--fb-employee-accent);
font-size: 1.2rem;
flex: 0 0 auto;
}
.fb-employee-action-tile__title {
display: block;
margin-bottom: 0.3rem;
color: var(--fb-employee-ink);
font-size: 1rem;
font-weight: 700;
}
.fb-employee-action-tile__text {
display: block;
color: var(--fb-employee-muted);
font-size: 0.88rem;
line-height: 1.5;
}
.fb-employee-filter-grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 1rem;
}
.fb-employee-filter-grid > * {
grid-column: span 3;
}
.fb-employee-filter-grid .fb-filter-span-4 {
grid-column: span 4;
}
.fb-employee-filter-grid .fb-filter-span-6 {
grid-column: span 6;
}
.fb-employee-filter-grid .fb-filter-span-12 {
grid-column: 1 / -1;
}
.fb-employee-shell .form-label {
color: var(--fb-employee-muted);
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.07em;
text-transform: uppercase;
}
.fb-employee-shell .form-control,
.fb-employee-shell .form-select {
min-height: 50px;
border: 1px solid var(--fb-employee-border);
border-radius: 16px;
background: #fff;
color: var(--fb-employee-ink);
box-shadow: none;
}
.fb-employee-shell .form-control:focus,
.fb-employee-shell .form-select:focus {
border-color: var(--fb-employee-accent);
box-shadow: 0 0 0 4px rgba(15, 143, 130, 0.12);
}
.fb-employee-chip-list {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
.fb-employee-chip {
min-height: 40px;
padding: 0.62rem 0.9rem;
border: 1px solid var(--fb-employee-border);
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #fff;
color: var(--fb-employee-ink);
font-size: 0.85rem;
font-weight: 700;
text-decoration: none;
}
.fb-employee-chip:hover,
.fb-employee-chip:focus,
.fb-employee-chip.active {
border-color: rgba(15, 143, 130, 0.38);
background: rgba(15, 143, 130, 0.08);
color: var(--fb-employee-accent-strong);
}
.fb-employee-empty-state {
padding: 2.2rem 1.5rem;
text-align: center;
background: linear-gradient(180deg, #ffffff 0%, #f7fbfa 100%);
}
.fb-employee-empty-state__icon {
width: 68px;
height: 68px;
margin: 0 auto 1rem;
border-radius: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(15, 143, 130, 0.08);
color: var(--fb-employee-accent);
font-size: 1.45rem;
}
.fb-employee-empty-state__title {
margin: 0;
color: var(--fb-employee-ink);
font-size: 1.18rem;
font-weight: 800;
}
.fb-employee-empty-state__description {
margin-inline: auto;
text-align: center;
}
.fb-employee-empty-state__actions {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1.2rem;
}
.fb-employee-table-card .table {
margin-bottom: 0;
}
.fb-employee-table-card .card-header,
.fb-employee-table-card .card-body {
padding: 1.25rem 1.35rem;
border: 0;
background: transparent;
}
.fb-employee-table-card thead th {
border-bottom-color: #e7f0ec;
color: var(--fb-employee-muted);
font-size: 0.74rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.fb-employee-table-card tbody td {
border-bottom-color: #eef3f1;
vertical-align: middle;
}
.fb-employee-surface-note {
border: 1px solid #dcefea;
border-radius: 18px;
background: linear-gradient(135deg, #f7fffd 0%, #ffffff 100%);
color: var(--fb-employee-muted);
padding: 0.95rem 1rem;
line-height: 1.55;
}
.fb-employee-modal-intro {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
padding: 1rem 1.05rem;
border: 1px solid #d9ece6;
border-radius: 20px;
background: linear-gradient(135deg, #f5fffc 0%, #ffffff 100%);
}
.fb-employee-modal-intro__eyebrow {
display: inline-flex;
align-items: center;
gap: 0.45rem;
margin-bottom: 0.55rem;
color: var(--fb-employee-accent);
font-size: 0.74rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.fb-employee-modal-intro__title {
margin: 0;
color: var(--fb-employee-ink);
font-size: 1.28rem;
font-weight: 800;
letter-spacing: -0.02em;
}
.fb-employee-modal-intro__text {
margin: 0.45rem 0 0;
max-width: 680px;
color: var(--fb-employee-muted);
line-height: 1.6;
}
.fb-employee-modal-highlight {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.85rem;
}
.fb-employee-modal-highlight__card {
padding: 0.95rem 1rem;
border-radius: 18px;
background: linear-gradient(180deg, #ffffff 0%, #f7fbfa 100%);
border: 1px solid #dcefea;
}
.fb-employee-modal-highlight__label {
color: var(--fb-employee-muted);
font-size: 0.74rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.07em;
}
.fb-employee-modal-highlight__value {
display: block;
margin-top: 0.35rem;
color: var(--fb-employee-ink);
font-size: 1.12rem;
font-weight: 800;
}
.fb-employee-modal-highlight__hint {
display: block;
margin-top: 0.3rem;
color: var(--fb-employee-muted);
font-size: 0.84rem;
line-height: 1.45;
}
.fb-employee-guidance-panel {
border-radius: 18px;
border: 1px solid #dbe8ff;
background: linear-gradient(135deg, #f1f7ff 0%, #ffffff 100%);
padding: 1rem 1.05rem;
}
.fb-employee-guidance-panel__title {
display: inline-flex;
align-items: center;
gap: 0.45rem;
color: #1d4ed8;
font-size: 0.76rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.fb-employee-guidance-panel__body {
margin-top: 0.45rem;
color: var(--fb-employee-muted);
font-size: 0.92rem;
line-height: 1.6;
}
.fb-employee-upload-zone {
position: relative;
min-height: 132px;
padding: 1.1rem;
border: 1px dashed rgba(15, 143, 130, 0.34);
border-radius: 20px;
background: linear-gradient(135deg, rgba(15, 143, 130, 0.06) 0%, #ffffff 100%);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.fb-employee-upload-zone__copy {
flex: 1 1 280px;
}
.fb-employee-upload-zone__eyebrow {
display: inline-flex;
align-items: center;
gap: 0.45rem;
margin-bottom: 0.5rem;
color: var(--fb-employee-accent);
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.fb-employee-upload-zone__title {
margin: 0;
color: var(--fb-employee-ink);
font-size: 1rem;
font-weight: 700;
}
.fb-employee-upload-zone__text {
margin: 0.45rem 0 0;
color: var(--fb-employee-muted);
font-size: 0.9rem;
line-height: 1.55;
}
.fb-employee-upload-zone__action {
min-height: 46px;
padding: 0 1rem;
border-radius: 15px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
border: 1px solid #bee4dc;
background: #fff;
color: var(--fb-employee-ink);
font-size: 0.9rem;
font-weight: 700;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
cursor: pointer;
}
.fb-employee-upload-zone__meta {
flex: 1 1 180px;
color: var(--fb-employee-muted);
font-size: 0.84rem;
line-height: 1.5;
text-align: right;
}
#commonModal .fb-modal .fb-employee-upload-zone .fb-attachment-list .list-group-item,
#commonModal .fb-modal .fb-attachment-list .list-group-item {
border-radius: 16px;
border-color: #e3ede9;
}
@media (max-width: 1199.98px) {
.fb-employee-stats-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 991.98px) {
.fb-employee-filter-grid > *,
.fb-employee-filter-grid .fb-filter-span-4,
.fb-employee-filter-grid .fb-filter-span-6 {
grid-column: span 6;
}
}
@media (max-width: 767.98px) {
.fb-employee-hero__body,
.fb-employee-panel__body,
.fb-employee-table-card .card-header,
.fb-employee-table-card .card-body {
padding: 1.15rem;
}
.fb-employee-stats-grid,
.fb-employee-action-grid,
.fb-employee-modal-highlight {
grid-template-columns: minmax(0, 1fr);
}
.fb-employee-filter-grid > *,
.fb-employee-filter-grid .fb-filter-span-4,
.fb-employee-filter-grid .fb-filter-span-6,
.fb-employee-filter-grid .fb-filter-span-12 {
grid-column: 1 / -1;
}
.fb-employee-list-card,
.fb-employee-list-card__aside {
align-items: flex-start;
text-align: left;
}
.fb-employee-list-card {
flex-direction: column;
}
.fb-employee-hero__actions,
.fb-employee-inline-actions,
.fb-employee-empty-state__actions {
width: 100%;
}
.fb-employee-btn,
.fb-employee-btn--ghost,
.fb-employee-btn--light {
width: 100%;
}
.fb-employee-upload-zone__meta {
text-align: left;
}
}
}
@scope ([data-demo-module="flexi-claims"]) {
.claim-header-card {
background: transparent;
border: 0;
}
/* The shared .fb-employee-btn rules live in the surface-styles partial,
but that partial is included OUTSIDE a section in this view, so its
markup is discarded by the layout and the Submit Claim button rendered
as an unstyled (white) anchor. Re-pin the teal here, in this view's own
css-page push block (which does reach the head), with a selector
specific enough to beat the theme's generic anchor/button rules. */
.fb-employee-shell a.fb-employee-btn,
.fb-employee-shell a.fb-employee-btn:hover,
.fb-employee-shell a.fb-employee-btn:focus,
.fb-employee-shell a.fb-employee-btn:active {
background-color: #0f8f82 !important;
background-image: linear-gradient(135deg, #13b7a4 0%, #0f8f82 100%) !important;
color: #fff !important;
text-decoration: none !important;
}
/* Hero ------------------------------------------------------------- */
.claim-hero-meta {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 1rem;
}
.claim-hero-meta__item {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.42rem 0.8rem;
border-radius: 999px;
border: 1px solid #dbe8e3;
background: rgba(255, 255, 255, 0.86);
color: #6f7f98;
font-size: 0.82rem;
font-weight: 600;
}
.claim-hero-meta__item i {
color: #0f8f82;
font-size: 0.95rem;
}
.claim-hero-meta__item strong {
color: #16253d;
font-weight: 800;
}
/* Stat cards ------------------------------------------------------- */
.claim-stat-card {
position: relative;
overflow: hidden;
padding: 1.05rem 1.15rem 1.1rem;
}
.claim-stat-card::before {
content: '';
position: absolute;
inset: 0 auto 0 0;
width: 4px;
background: var(--claim-tone, #94a3b8);
}
.claim-stat-card--warning { --claim-tone: #f59e0b; --claim-tone-soft: rgba(245, 158, 11, 0.12); }
.claim-stat-card--info { --claim-tone: #0ea5e9; --claim-tone-soft: rgba(14, 165, 233, 0.12); }
.claim-stat-card--success { --claim-tone: #16a34a; --claim-tone-soft: rgba(22, 163, 74, 0.12); }
.claim-stat-card--danger { --claim-tone: #dc2626; --claim-tone-soft: rgba(220, 38, 38, 0.12); }
.claim-stat-card__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.claim-stat-card__icon {
width: 34px;
height: 34px;
border-radius: 11px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--claim-tone-soft, rgba(148, 163, 184, 0.12));
color: var(--claim-tone, #94a3b8);
font-size: 1rem;
flex: 0 0 auto;
}
.claim-stat-card .claim-stat-value {
margin: 0.55rem 0 0.7rem;
color: var(--claim-tone, #16253d);
font-size: 1.85rem;
font-weight: 800;
line-height: 1;
}
.claim-stat-card__meter {
height: 5px;
border-radius: 999px;
background: #eef2f6;
overflow: hidden;
}
.claim-stat-card__meter span {
display: block;
height: 100%;
border-radius: 999px;
background: var(--claim-tone, #94a3b8);
transition: width 0.25s ease;
}
.claim-stat-card__hint {
margin-top: 0.5rem;
color: #6f7f98;
font-size: 0.78rem;
font-weight: 600;
}
/* Table card ------------------------------------------------------- */
.claim-table-card__head {
padding: 1.35rem 1.35rem 0.9rem;
border-bottom: 1px solid #eef3f1;
}
.claim-table-card__head .fb-employee-panel__subtitle {
max-width: 780px;
font-weight: 500;
line-height: 1.55;
}
.claim-table-card__body {
padding: 1.1rem 1.35rem 1.35rem;
}
.claim-table thead th {
white-space: nowrap;
}
.claim-table tbody td {
padding-top: 0.95rem;
padding-bottom: 0.95rem;
vertical-align: top;
}
.claim-table tbody tr:hover td {
background: #f8fdfc;
}
.claim-identity {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 170px;
}
.claim-identity__number {
color: #16253d;
font-size: 0.86rem;
font-weight: 800;
letter-spacing: -0.01em;
}
.claim-identity__person {
display: inline-flex;
align-items: center;
gap: 0.3rem;
color: #16253d;
font-size: 0.85rem;
font-weight: 600;
}
.claim-identity__person i {
color: #9aa8bd;
font-size: 0.9rem;
}
.claim-identity__email {
color: #8b99ae;
font-size: 0.76rem;
word-break: break-word;
}
.claim-benefit {
display: flex;
flex-direction: column;
gap: 0.25rem;
min-width: 150px;
}
.claim-benefit__name {
color: #16253d;
font-size: 0.9rem;
font-weight: 700;
line-height: 1.35;
}
.claim-benefit__category {
align-self: flex-start;
padding: 0.16rem 0.5rem;
border-radius: 999px;
background: #f1f5f9;
color: #64748b;
font-size: 0.72rem;
font-weight: 700;
}
.claim-amount {
color: #16253d;
font-size: 0.98rem;
font-weight: 800;
white-space: nowrap;
}
.claim-dates {
display: flex;
flex-direction: column;
gap: 0.28rem;
margin: 0;
min-width: 150px;
}
.claim-dates > div {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.6rem;
}
.claim-dates dt {
color: #8b99ae;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.claim-dates dd {
margin: 0;
color: #16253d;
font-size: 0.82rem;
font-weight: 600;
white-space: nowrap;
}
.claim-status {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.3rem 0.65rem;
border-radius: 999px;
border: 1px solid transparent;
font-size: 0.76rem;
font-weight: 800;
white-space: nowrap;
}
.claim-status i {
font-size: 0.9rem;
}
.claim-status--pending { border-color: #fde68a; background: #fffbeb; color: #b45309; }
.claim-status--processing { border-color: #bae6fd; background: #f0f9ff; color: #0369a1; }
.claim-status--approved { border-color: #bbf7d0; background: #f0fdf4; color: #15803d; }
.claim-status--rejected { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
.claim-status--neutral { border-color: #e2e8f0; background: #f8fafc; color: #475569; }
.claim-track {
display: flex;
gap: 4px;
margin-top: 0.55rem;
min-width: 108px;
}
.claim-track__step {
flex: 1;
height: 4px;
border-radius: 999px;
background: #e2e8f0;
}
.claim-track__step--done { background: #60a5fa; }
.claim-track__step--approved { background: #16a34a; }
.claim-track__step--rejected { background: #dc2626; }
.claim-track__legend {
margin-top: 0.35rem;
color: #8b99ae;
font-size: 0.72rem;
font-weight: 600;
white-space: nowrap;
}
.claim-notes {
min-width: 200px;
max-width: 320px;
}
.claim-notes__text {
margin: 0;
color: #52627a;
font-size: 0.83rem;
line-height: 1.5;
word-break: break-word;
}
.claim-notes__reason {
display: flex;
align-items: flex-start;
gap: 0.35rem;
margin: 0.4rem 0 0;
padding: 0.45rem 0.6rem;
border-radius: 12px;
border: 1px solid #fecaca;
background: #fef2f2;
color: #b91c1c;
font-size: 0.79rem;
line-height: 1.45;
word-break: break-word;
}
.claim-notes__reason i {
margin-top: 0.1rem;
font-size: 0.9rem;
flex: 0 0 auto;
}
.claim-notes__empty {
color: #a8b4c6;
font-size: 0.8rem;
}
.claim-actions {
display: inline-flex;
gap: 0.35rem;
justify-content: flex-end;
}
.claim-action-btn {
width: 34px;
height: 34px;
border-radius: 11px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #dbe8e3;
background: #fff;
color: #0f8f82;
font-size: 0.95rem;
line-height: 1;
text-decoration: none;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.claim-action-btn:hover,
.claim-action-btn:focus {
border-color: rgba(15, 143, 130, 0.4);
background: rgba(15, 143, 130, 0.08);
color: #0c6f67;
}
.claim-action-btn--danger {
color: #dc2626;
}
.claim-action-btn--danger:hover,
.claim-action-btn--danger:focus {
border-color: #fecaca;
background: #fef2f2;
color: #b91c1c;
}
.claim-action-note {
color: #a8b4c6;
font-size: 0.78rem;
font-weight: 600;
white-space: nowrap;
}
/* DataTables controls --------------------------------------------- */
.claim-table-card .dataTables_wrapper .dataTables_length,
.claim-table-card .dataTables_wrapper .dataTables_filter {
margin-bottom: 0.9rem;
}
.claim-table-card .dataTables_wrapper .dataTables_filter input {
min-height: 42px;
min-width: 240px;
padding: 0 0.85rem;
border: 1px solid #dbe8e3;
border-radius: 14px;
background: #fff;
}
.claim-table-card .dataTables_wrapper .dataTables_filter input:focus {
outline: none;
border-color: #0f8f82;
box-shadow: 0 0 0 4px rgba(15, 143, 130, 0.12);
}
.claim-table-card .dataTables_wrapper .dataTables_length select {
min-height: 42px;
border: 1px solid #dbe8e3;
border-radius: 14px;
}
@media (max-width: 767.98px) {
.claim-table-card__head,
.claim-table-card__body {
padding-inline: 1.15rem;
}
.claim-notes {
max-width: none;
}
}
}
@scope ([data-demo-module="flexi-claims"]) {
.fb-claim-guidance {
border-radius: 14px;
border: 1px solid #dbeafe;
background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
padding: 0.9rem 1rem;
}
.fb-claim-guidance__title {
color: #1d4ed8;
font-size: 0.78rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.35rem;
}
.fb-claim-guidance__body {
font-size: 0.9rem;
line-height: 1.55;
}
}
@scope ([data-demo-module="benefit-plans"]) {
#pw-flexi {
font-family: 'Proxima Soft', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
#pw-flexi .fb-shell {
overflow: hidden;
}
#pw-flexi .fb-shell__header {
padding-bottom: 4px;
}
#pw-flexi .fb-shell__aside {
flex: 0 1 360px;
max-width: 360px;
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 14px;
border-radius: 18px;
border: 1px solid rgba(var(--pw-accent-rgb), 0.12);
background: linear-gradient(135deg, rgba(var(--pw-accent-rgb), 0.05) 0%, rgba(255,255,255,0.96) 100%);
}
#pw-flexi .fb-shell__aside-icon {
width: 34px;
height: 34px;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: rgba(var(--pw-accent-rgb), 0.10);
color: var(--pw-accent);
font-size: 0.95rem;
}
#pw-flexi .fb-shell__aside strong {
display: block;
margin-bottom: 4px;
color: var(--pw-ink);
font-size: 0.88rem;
font-weight: 800;
line-height: 1.3;
}
#pw-flexi .fb-shell__aside span:last-child {
display: block;
color: var(--pw-mute);
font-size: 0.8rem;
line-height: 1.45;
}
#pw-flexi .fb-nav-wrap {
padding: 0 28px 26px;
}
#pw-flexi .fb-nav {
gap: 8px;
border-bottom: 0;
flex-wrap: nowrap;
}
#pw-flexi .fb-nav .nav-item {
margin-bottom: 0;
min-width: 0;
flex: 0 1 auto;
}
#pw-flexi .fb-nav__link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
border-radius: 16px;
border: 1px solid transparent;
background: #f7fbfa;
color: var(--pw-mute);
font-size: 0.92rem;
font-weight: 700;
white-space: nowrap;
max-width: 100%;
transition: all 0.18s ease;
}
#pw-flexi .fb-nav__link span {
overflow: hidden;
text-overflow: ellipsis;
}
#pw-flexi .fb-nav__link i {
font-size: 1rem;
flex-shrink: 0;
}
#pw-flexi .fb-nav__link:hover {
color: var(--pw-ink);
border-color: rgba(var(--pw-accent-rgb), 0.18);
background: rgba(var(--pw-accent-rgb), 0.08);
}
#pw-flexi .fb-nav__link.active {
color: var(--pw-accent);
background: #fff;
border-color: rgba(var(--pw-accent-rgb), 0.28);
box-shadow: 0 12px 28px rgba(var(--pw-accent-rgb), 0.14);
}
#pw-flexi .fb-tab-content > .tab-pane {
margin-top: 22px;
}
#pw-flexi .tab-pane > .card,
#pw-flexi .tab-pane > .row > .col-xl-12 > .card {
border: 1px solid var(--pw-border);
border-radius: 24px;
background: #fff;
box-shadow: var(--pw-shadow);
overflow: hidden;
}
#pw-flexi .tab-pane .card-body,
#pw-flexi .tab-pane .card-header.card-body {
padding: 24px 28px;
border: 0;
background: transparent;
}
#pw-flexi .tab-pane .card-body.pb-0 {
padding-bottom: 8px !important;
}
#pw-flexi .table-responsive {
padding: 0 24px 24px;
}
#pw-flexi .table {
margin-bottom: 0;
}
#pw-flexi .table thead th {
padding: 14px 16px;
border-bottom: 1px solid var(--pw-border);
background: #f7fbfa;
color: var(--pw-mute);
font-size: 0.73rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
}
#pw-flexi .table tbody td {
padding: 16px;
border-color: #edf3f0;
vertical-align: middle;
}
#pw-flexi .table tbody tr:hover td {
background: #f9fcfb;
}
#pw-flexi .form-label {
color: var(--pw-mute);
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 8px;
}
#pw-flexi .form-select,
#pw-flexi .form-control {
min-height: 46px;
border: 1px solid var(--pw-border);
border-radius: 14px;
background-color: #fff;
color: var(--pw-ink);
box-shadow: none;
}
#pw-flexi .form-select:focus,
#pw-flexi .form-control:focus {
border-color: var(--pw-accent);
box-shadow: 0 0 0 4px rgba(var(--pw-accent-rgb), 0.12);
}
#pw-flexi .btn-primary {
border: 0;
border-radius: 14px;
padding: 10px 16px;
background: linear-gradient(135deg, #13b7a4 0%, #0f8f82 100%);
box-shadow: 0 14px 28px rgba(var(--pw-accent-rgb), 0.24);
}
#pw-flexi .btn-primary:hover,
#pw-flexi .btn-primary:focus {
filter: brightness(1.04);
background: linear-gradient(135deg, #13b7a4 0%, #0f8f82 100%);
}
#pw-flexi .btn-secondary {
border-radius: 12px;
border: 1px solid var(--pw-border);
background: #fff;
color: var(--pw-ink);
}
#pw-flexi .btn-danger {
border-radius: 12px;
}
#pw-flexi .badge.bg-light.text-dark,
#pw-flexi .badge.bg-primary {
border-radius: 999px;
padding: 6px 10px;
font-weight: 700;
}
#pw-flexi .badge.bg-light.text-dark {
background: #eef8f5 !important;
color: #136d63 !important;
}
#pw-flexi .badge.bg-primary {
background: rgba(var(--pw-accent-rgb), 0.12) !important;
color: var(--pw-accent) !important;
}
#pw-flexi .dataTables_wrapper {
padding: 0;
}
#pw-flexi .dataTables_wrapper .dataTable-top,
#pw-flexi .dataTables_wrapper .dataTable-bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
}
#pw-flexi .dataTables_wrapper .dataTables_length,
#pw-flexi .dataTables_wrapper .dataTables_filter {
margin: 10px 0 14px;
}
#pw-flexi .dataTables_wrapper .dataTables_length label,
#pw-flexi .dataTables_wrapper .dataTables_filter label,
#pw-flexi .dataTables_wrapper .dataTables_info {
color: var(--pw-mute);
font-size: 0.84rem;
font-weight: 700;
}
#pw-flexi .dataTables_wrapper .dataTables_filter input,
#pw-flexi .dataTables_wrapper .dataTables_length select {
height: 40px;
border: 1px solid var(--pw-border);
border-radius: 12px;
padding: 0 12px;
background: #fff;
color: var(--pw-ink);
}
#pw-flexi .dataTables_wrapper .dataTables_filter input:focus,
#pw-flexi .dataTables_wrapper .dataTables_length select:focus {
outline: none;
border-color: var(--pw-accent);
box-shadow: 0 0 0 4px rgba(var(--pw-accent-rgb), 0.12);
}
#pw-flexi .dataTables_wrapper .dataTables_paginate .paginate_button {
min-width: 34px;
height: 34px;
margin: 0 2px;
border: 1px solid var(--pw-border) !important;
border-radius: 10px !important;
background: #fff !important;
color: var(--pw-ink) !important;
font-weight: 700;
}
#pw-flexi .dataTables_wrapper .dataTables_paginate .paginate_button.current,
#pw-flexi .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
color: #fff !important;
border-color: var(--pw-accent) !important;
background: var(--pw-accent) !important;
}
#pw-flexi .dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current) {
border-color: rgba(var(--pw-accent-rgb), 0.28) !important;
background: #f6fbfa !important;
color: var(--pw-accent) !important;
}
@media (max-width: 991.98px) {
#pw-flexi .fb-shell__aside {
max-width: none;
}
#pw-flexi .fb-nav-wrap,
#pw-flexi .tab-pane .card-body,
#pw-flexi .tab-pane .card-header.card-body,
#pw-flexi .table-responsive {
padding-left: 20px;
padding-right: 20px;
}
}
@media (max-width: 767.98px) {
#pw-flexi .pw-page-header__meta {
flex-direction: column;
align-items: flex-start;
}
#pw-flexi .fb-nav {
flex-wrap: wrap;
overflow-x: visible;
}
#pw-flexi .fb-nav__link {
width: 100%;
justify-content: center;
}
#pw-flexi .table-responsive {
padding-bottom: 20px;
}
}
}
@scope ([data-demo-module="benefit-management"]) {
#pw-flexi .fb-benefits-filters {
display: grid;
grid-template-columns: minmax(220px, 1.3fr) repeat(3, minmax(0, 1fr));
gap: 14px;
margin-top: 18px;
}
#pw-flexi .fb-benefits-filter {
min-width: 0;
}
#pw-flexi .fb-benefits-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
#pw-flexi .benefit-card-shell {
min-width: 0;
}
#pw-flexi .fb-benefit-card {
height: 100%;
display: flex;
flex-direction: column;
gap: 16px;
padding: 20px;
border: 1px solid #e7f0ed;
border-radius: 22px;
background: linear-gradient(180deg, #ffffff 0%, #fbfefd 100%);
box-shadow: 0 16px 34px rgba(15, 23, 42, 0.04);
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
#pw-flexi .fb-benefit-card:hover {
transform: translateY(-2px);
border-color: rgba(var(--pw-accent-rgb), 0.22);
box-shadow: 0 20px 36px rgba(var(--pw-accent-rgb), 0.10);
}
#pw-flexi .fb-benefit-card__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
}
#pw-flexi .fb-benefit-card__eyebrow {
color: var(--pw-mute);
font-size: 0.74rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 8px;
}
#pw-flexi .fb-benefit-card__title {
margin: 0;
color: var(--pw-ink);
font-size: 1.02rem;
font-weight: 800;
line-height: 1.3;
}
#pw-flexi .fb-benefit-card__description {
margin: 0;
color: var(--pw-mute);
font-size: 0.88rem;
line-height: 1.6;
min-height: 56px;
}
#pw-flexi .fb-benefit-card__tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
#pw-flexi .fb-benefit-card__stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
#pw-flexi .fb-benefit-card__stat {
padding: 12px 14px;
border-radius: 16px;
background: #f6fbfa;
border: 1px solid #e7f1ee;
}
#pw-flexi .fb-benefit-card__stat span {
display: block;
color: var(--pw-mute);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 6px;
}
#pw-flexi .fb-benefit-card__stat strong {
display: block;
color: var(--pw-ink);
font-size: 0.92rem;
line-height: 1.3;
}
#pw-flexi .fb-benefit-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: auto;
flex-wrap: wrap;
}
#pw-flexi .fb-benefit-card__actions {
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
}
#pw-flexi .fb-benefit-card__switch {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 7px 10px;
border: 1px solid var(--pw-border);
border-radius: 999px;
background: #fff;
color: var(--pw-mute);
font-size: 0.8rem;
font-weight: 700;
cursor: pointer;
}
#pw-flexi .fb-benefit-card__switch input {
width: 2.2em;
height: 1.25em;
margin: 0;
box-shadow: none;
}
@media (max-width: 1199.98px) {
#pw-flexi .fb-benefits-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 991.98px) {
#pw-flexi .fb-benefits-filters {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767.98px) {
#pw-flexi .fb-benefits-filters,
#pw-flexi .fb-benefits-grid,
#pw-flexi .fb-benefit-card__stats {
grid-template-columns: 1fr;
}
#pw-flexi .fb-benefit-card__top,
#pw-flexi .fb-benefit-card__footer {
flex-direction: column;
align-items: flex-start;
}
#pw-flexi .fb-benefit-card__actions {
width: 100%;
justify-content: flex-start;
}
}
}
@scope ([data-demo-module="providers"]) {
.fb-provider-import {
border-radius: 999px;
}
}
@scope ([data-demo-module="providers"]) {
#pw-flexi .fb-provider-filters {
display: grid;
grid-template-columns: minmax(220px, 1.3fr) repeat(4, minmax(0, 1fr));
gap: 14px;
margin-top: 18px;
}
#pw-flexi .fb-provider-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
#pw-flexi .fb-provider-admin-card {
height: 100%;
display: flex;
flex-direction: column;
gap: 16px;
padding: 20px;
border: 1px solid #e8f0ed;
border-radius: 22px;
background: linear-gradient(180deg, #ffffff 0%, #fbfefd 100%);
box-shadow: 0 16px 34px rgba(15, 23, 42, 0.04);
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
#pw-flexi .fb-provider-admin-card:hover {
transform: translateY(-2px);
border-color: rgba(var(--pw-accent-rgb), 0.22);
box-shadow: 0 20px 36px rgba(var(--pw-accent-rgb), 0.10);
}
#pw-flexi .fb-provider-admin-card__top,
#pw-flexi .fb-provider-admin-card__actions,
#pw-flexi .fb-provider-admin-card__meta,
#pw-flexi .fb-provider-admin-card__tags {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
#pw-flexi .fb-provider-admin-card__top {
justify-content: space-between;
align-items: flex-start;
}
#pw-flexi .fb-provider-admin-card__identity {
display: flex;
align-items: flex-start;
gap: 12px;
min-width: 0;
flex: 1 1 auto;
}
#pw-flexi .fb-provider-admin-card__content {
min-width: 0;
flex: 1 1 auto;
}
#pw-flexi .fb-provider-admin-card__icon {
width: 44px;
height: 44px;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 14px;
background: rgba(var(--pw-accent-rgb), 0.10);
color: var(--pw-accent);
font-size: 1rem;
}
#pw-flexi .fb-provider-admin-card__icon i {
font-size: 1rem;
line-height: 1;
}
#pw-flexi .fb-provider-admin-card__title {
margin: 0 0 8px;
color: var(--pw-ink);
font-size: 1rem;
font-weight: 800;
line-height: 1.3;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
#pw-flexi .fb-provider-admin-card__count {
width: 112px;
min-width: 112px;
min-height: 92px;
padding: 12px 14px;
border-radius: 18px;
background: #f6fbfa;
border: 1px solid #e7f1ee;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
#pw-flexi .fb-provider-admin-card__count span {
display: block;
color: var(--pw-mute);
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 6px;
white-space: nowrap;
}
#pw-flexi .fb-provider-admin-card__count strong {
color: var(--pw-ink);
font-size: 1.7rem;
font-weight: 800;
line-height: 1.1;
}
#pw-flexi .fb-provider-admin-card__description {
margin: 0;
color: var(--pw-mute);
font-size: 0.88rem;
line-height: 1.6;
min-height: 56px;
}
#pw-flexi .fb-provider-admin-card__body {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
#pw-flexi .fb-provider-admin-card__line {
padding: 12px 14px;
border-radius: 16px;
background: #f6fbfa;
border: 1px solid #e7f1ee;
}
#pw-flexi .fb-provider-admin-card__line span,
#pw-flexi .fb-provider-admin-card__label {
display: block;
color: var(--pw-mute);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 6px;
}
#pw-flexi .fb-provider-admin-card__line strong {
color: var(--pw-ink);
font-size: 0.88rem;
line-height: 1.45;
}
#pw-flexi .fb-provider-admin-card__notes {
margin: 0;
color: var(--pw-mute);
font-size: 0.86rem;
line-height: 1.6;
}
#pw-flexi .fb-provider-admin-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: auto;
flex-wrap: wrap;
}
#pw-flexi .fb-provider-admin-card__hint {
color: var(--pw-mute);
font-size: 0.8rem;
line-height: 1.45;
max-width: 260px;
}
/* Grouped sections (Company / Global) */
#pw-flexi .fb-provider-section + .fb-provider-section { margin-top: 26px; }
#pw-flexi .fb-provider-section__head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid #eef3f1;
}
#pw-flexi .fb-provider-section__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 22px;
padding: 0 7px;
border-radius: 999px;
background: #f1f5f9;
color: var(--pw-mute);
font-size: 0.74rem;
font-weight: 800;
}
#pw-flexi .fb-provider-section__hint {
color: var(--pw-mute);
font-size: 0.82rem;
margin-left: 2px;
}
#pw-flexi .pw-empty-state--inline {
padding: 28px 16px;
border: 1px dashed #d9e4e0;
border-radius: 16px;
background: #fbfdfc;
}
#pw-flexi .fb-provider-admin-card__copy {
border-radius: 999px;
}
@media (max-width: 1199.98px) {
#pw-flexi .fb-provider-filters,
#pw-flexi .fb-provider-grid,
#pw-flexi .fb-provider-admin-card__body {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767.98px) {
#pw-flexi .fb-provider-filters,
#pw-flexi .fb-provider-grid,
#pw-flexi .fb-provider-admin-card__body {
grid-template-columns: 1fr;
}
#pw-flexi .fb-provider-admin-card__top,
#pw-flexi .fb-provider-admin-card__footer {
flex-direction: column;
align-items: flex-start;
}
#pw-flexi .fb-provider-admin-card__count {
width: 100%;
min-width: 0;
min-height: auto;
align-items: flex-start;
}
#pw-flexi .fb-provider-admin-card__count span {
white-space: normal;
}
}
}
@scope ([data-demo-module="benefit-operations"]) {
#pw-flexi .fb-enrollment-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 12px;
}
#pw-flexi .fb-enrollment-action {
min-height: 52px;
padding: 0 18px;
border-radius: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
font-size: 0.98rem;
font-weight: 700;
line-height: 1;
white-space: nowrap;
}
#pw-flexi .fb-enrollment-action i {
font-size: 1.1rem;
line-height: 1;
}
#pw-flexi .fb-enrollment-selcount {
align-self: center;
font-size: 0.86rem;
font-weight: 600;
color: var(--pw-mute);
white-space: nowrap;
}
#pw-flexi .fb-enrollment-action--delete {
min-width: 0;
color: #be123c;
border-color: #fecdd3;
}
#pw-flexi .fb-enrollment-action--delete:hover:not(:disabled) {
background: #fff1f2;
color: #9f1239;
border-color: #fda4af;
}
#pw-flexi .fb-enrollment-action--delete:disabled {
opacity: 0.5;
cursor: not-allowed;
}
#pw-flexi .fb-enrollment-check {
width: 44px;
text-align: center;
vertical-align: middle;
}
/*
| Six columns on the shared pw-table treatment.
|
| The previous nine-column fixed-width budget fit the viewport but
| read as cramped: names truncated mid-word, the benefit wrapped to
| two lines on every row, and Notes still overflowed. Cutting the
| redundant columns -- Category folds under the benefit name, Notes
| duplicated Status -- leaves enough room that no width forcing is
| needed, so pw-table's own 14px padding does the work.
*/
#pw-flexi .fb-enrollment-panel {
overflow: hidden;
}
#pw-flexi .fb-enrollment-table {
min-width: 860px;
}
#pw-flexi .fb-enrollment-table tbody td {
padding-top: 16px;
padding-bottom: 16px;
}
#pw-flexi .fb-enrollment-benefit {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
#pw-flexi .fb-enrollment-benefit__name {
font-weight: 700;
color: var(--pw-ink);
line-height: 1.35;
}
#pw-flexi .fb-enrollment-benefit__meta {
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
color: var(--pw-mute);
font-size: 0.8rem;
}
#pw-flexi .fb-enrollment-plan {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 999px;
background: rgba(var(--pw-accent-rgb), 0.10);
border: 1px solid rgba(var(--pw-accent-rgb), 0.16);
color: var(--pw-accent);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
}
/* min-width:0 is what lets a flex child actually shrink and ellipsise. */
#pw-flexi .fb-enrollment-person {
gap: 12px;
min-width: 0;
}
#pw-flexi .fb-enrollment-person__avatar {
width: 38px;
height: 38px;
border-radius: 10px;
object-fit: cover;
flex: 0 0 auto;
}
#pw-flexi .fb-enrollment-person__meta {
min-width: 0;
display: flex;
flex-direction: column;
line-height: 1.35;
}
#pw-flexi .fb-enrollment-person__name,
#pw-flexi .fb-enrollment-person__email {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#pw-flexi .fb-enrollment-person__name {
font-weight: 700;
color: var(--pw-ink);
}
#pw-flexi .fb-enrollment-person__email {
font-size: 0.78rem;
color: var(--pw-mute);
text-transform: lowercase;
}
#pw-flexi .fb-col-dates {
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
#pw-flexi .fb-enrollment-date {
display: block;
color: var(--pw-ink);
}
#pw-flexi .fb-enrollment-date__sub {
display: block;
margin-top: 3px;
color: var(--pw-mute);
font-size: 0.78rem;
}
#pw-flexi .fb-col-dep {
text-align: center;
white-space: nowrap;
}
#pw-flexi .fb-enrollment-dep-none {
color: var(--pw-mute);
opacity: .6;
}
/* The select carries a browser-default min-width that clipped "Active". */
#pw-flexi .fb-enrollment-table .enrollment-status-select {
min-width: 116px;
font-size: 0.82rem;
border-radius: 10px;
}
#pw-flexi #enrollmentsTable tbody tr.row-selected {
background: rgba(var(--pw-accent-rgb), 0.06);
}
#pw-flexi .fb-enrollment-action--secondary {
min-width: 116px;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}
#pw-flexi .fb-enrollment-action:not(.fb-enrollment-action--secondary) {
min-width: 196px;
}
@media (max-width: 767.98px) {
#pw-flexi .fb-enrollment-actions {
width: 100%;
justify-content: stretch;
}
#pw-flexi .fb-enrollment-action,
#pw-flexi .fb-enrollment-action--secondary,
#pw-flexi .fb-enrollment-action:not(.fb-enrollment-action--secondary) {
width: 100%;
min-width: 0;
}
}
}
@scope ([data-demo-module="benefit-analytics"]) {
#pw-flexi .fb-analytics-note {
max-width: 420px;
}
#pw-flexi .fb-analytics-kpis {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
#pw-flexi .fb-analytics-kpi {
padding: 18px 20px;
border-radius: 20px;
border: 1px solid rgba(var(--pw-accent-rgb), 0.12);
background: linear-gradient(180deg, #ffffff 0%, #f8fcfb 100%);
}
#pw-flexi .fb-analytics-kpi span,
#pw-flexi .fb-analytics-kpi small {
display: block;
}
#pw-flexi .fb-analytics-kpi span {
color: var(--pw-mute);
font-size: 0.76rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
}
#pw-flexi .fb-analytics-kpi strong {
display: block;
margin: 10px 0 6px;
font-size: 2rem;
line-height: 1;
color: var(--pw-ink);
}
#pw-flexi .fb-analytics-kpi small {
color: var(--pw-mute);
font-size: 0.82rem;
line-height: 1.45;
}
#pw-flexi .fb-analytics-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 0;
border-bottom: 1px solid #edf3f0;
}
#pw-flexi .fb-analytics-row:last-child {
border-bottom: 0;
padding-bottom: 0;
}
#pw-flexi .fb-analytics-row:first-of-type {
padding-top: 0;
}
#pw-flexi .fb-analytics-row__meta {
display: flex;
align-items: center;
gap: 12px;
color: var(--pw-mute);
font-size: 0.82rem;
font-weight: 700;
text-align: right;
}
@media (max-width: 991.98px) {
#pw-flexi .fb-analytics-kpis {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 575.98px) {
#pw-flexi .fb-analytics-kpis {
grid-template-columns: minmax(0, 1fr);
}
#pw-flexi .fb-analytics-row {
flex-direction: column;
align-items: flex-start;
}
#pw-flexi .fb-analytics-row__meta {
text-align: left;
}
}
}
@scope ([data-demo-module="benefit-calculator"]) {
.fb-benefits-calculator__hero {
background: transparent;
border: 0;
}
.fb-benefits-calculator__eyebrow {
display: inline-block;
margin-bottom: 0.5rem;
color: #0f8f82;
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.fb-benefits-calculator__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.fb-benefits-calculator__tile,
.fb-benefits-calculator__note {
padding: 16px 18px;
border-radius: 18px;
border: 1px solid #dcefea;
background: #fbfefd;
}
.fb-benefits-calculator__tile span,
.fb-benefits-calculator__tile small,
.fb-benefits-calculator__note-label {
display: block;
}
.fb-benefits-calculator__tile span,
.fb-benefits-calculator__note-label {
color: #64748b;
font-size: 0.76rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.fb-benefits-calculator__tile strong,
.fb-benefits-calculator__note strong {
display: block;
margin: 8px 0 4px;
color: #0f172a;
font-size: 1.6rem;
line-height: 1.1;
}
.fb-benefits-calculator__tile small {
color: #64748b;
font-size: 0.84rem;
line-height: 1.4;
}
@media (max-width: 575.98px) {
.fb-benefits-calculator__grid {
grid-template-columns: minmax(0, 1fr);
}
}
}
@scope ([data-demo-module="requisitions"], [data-demo-module="jobs"], [data-demo-module="candidates"], [data-demo-module="interviews"], [data-demo-module="recruitment-offers"], [data-demo-module="pre-onboarding"], [data-demo-module="talent-pool"], [data-demo-module="recruitment-approvals"], [data-demo-module="recruitment-analytics"], [data-demo-module="recruitment-settings"], [data-demo-module="applications"]) {
.pw.pw-recruitment {
--pw-accent: #0ea5e9;
--pw-accent-rgb: 14, 165, 233;
--pw-accent-bg: #eff8ff;
}
/* ------------------------------------------------------------------
* Page header: action slot + title suffix + description shortcut
* ------------------------------------------------------------------ */
.pw .pw-page-header__actions {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 18px;
}
.pw .pw-page-header__actions .btn {
min-height: 40px;
padding: 8px 18px;
border-radius: 12px;
font-weight: 700;
}
.pw .pw-page-header__actions .btn-primary,
.pw .pw-page-header__actions .btn.pw-btn-create {
background: var(--pw-accent);
border-color: var(--pw-accent);
color: #fff;
box-shadow: 0 12px 24px rgba(var(--pw-accent-rgb), 0.20);
}
.pw .pw-page-header__actions .btn-primary:hover,
.pw .pw-page-header__actions .btn.pw-btn-create:hover {
filter: brightness(1.07);
color: #fff;
}
.pw .pw-page-header__actions .btn-light,
.pw .pw-page-header__actions .btn-outline-secondary {
background: #fff;
border-color: var(--pw-border);
color: var(--pw-ink);
}
.pw .pw-co-suffix {
display: inline-block;
margin-left: 6px;
color: var(--pw-mute);
font-size: 0.85em;
font-weight: 600;
}
/* Older templates used pw-page-header__subtitle. Alias it to
__description so the description style still applies. */
.pw .pw-page-header__subtitle {
margin: 14px 0 0;
max-width: 760px;
color: var(--pw-mute);
font-size: 0.92rem;
line-height: 1.55;
}
/* ------------------------------------------------------------------
* Panel variants
* ------------------------------------------------------------------ */
.pw .pw-panel--placeholder {
background: linear-gradient(135deg, var(--pw-soft) 0%, #fff 100%);
border-style: dashed;
}
.pw .pw-panel--success {
border-color: #bbf7d0;
background: linear-gradient(135deg, #ecfdf5 0%, #fff 100%);
color: #166534;
}
.pw .pw-panel--error {
border-color: #fecdd3;
background: linear-gradient(135deg, #fff1f2 0%, #fff 100%);
}
.pw .pw-panel--error .pw-panel__title { color: #be123c; }
.pw .pw-panel--accent {
position: relative;
overflow: hidden;
border: 0;
background: linear-gradient(135deg, var(--pw-accent) 0%, #6366f1 100%);
color: #fff;
}
.pw .pw-panel--accent .pw-panel__title,
.pw .pw-panel--accent .pw-panel__description,
.pw .pw-panel--accent .pw-panel__hint { color: #fff; }
.pw .pw-panel--accent .pw-panel__title { font-size: 1.05rem; }
.pw .pw-panel--accent .pw-panel__header { border-bottom-color: rgba(255, 255, 255, 0.18); }
.pw .pw-panel--accent::after {
content: "";
position: absolute;
right: -40px;
bottom: -40px;
width: 160px;
height: 160px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.10);
}
/* ------------------------------------------------------------------
* Pulse AI card — recruitment quick-start prompts
* ------------------------------------------------------------------ */
.pw .pw-ai-card { position: relative; }
.pw .pw-ai-card__body { padding: 4px 28px 22px; position: relative; z-index: 1; }
.pw .pw-ai-card__prompts {
display: flex;
flex-direction: column;
gap: 8px;
margin: 10px 0 16px;
}
.pw .pw-ai-prompt {
appearance: none;
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 11px 14px;
border: 1px solid rgba(255, 255, 255, 0.30);
border-radius: 12px;
background: rgba(255, 255, 255, 0.10);
backdrop-filter: blur(2px);
color: #fff;
font-weight: 700;
font-size: 0.88rem;
text-align: left;
line-height: 1.3;
cursor: pointer;
transition: background .18s, border-color .18s, transform .12s;
}
.pw .pw-ai-prompt:hover {
background: rgba(255, 255, 255, 0.22);
border-color: rgba(255, 255, 255, 0.55);
}
.pw .pw-ai-prompt:active { transform: translateY(1px); }
.pw .pw-ai-prompt__icon {
width: 30px;
height: 30px;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: rgba(255, 255, 255, 0.22);
font-size: 0.88rem;
}
.pw .pw-ai-prompt__label { flex: 1 1 auto; min-width: 0; }
.pw .pw-ai-prompt__cue {
opacity: 0.6;
font-size: 0.78rem;
transition: opacity .18s, transform .18s;
}
.pw .pw-ai-prompt:hover .pw-ai-prompt__cue {
opacity: 1;
transform: translateX(2px);
}
.pw .pw-ai-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-top: 14px;
border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.pw .pw-ai-card__tools strong {
display: block;
color: #fff;
font-size: 1.4rem;
font-weight: 900;
line-height: 1;
}
.pw .pw-ai-card__tools small {
display: block;
margin-top: 3px;
color: rgba(255, 255, 255, 0.85);
font-weight: 700;
font-size: 0.78rem;
}
.pw .pw-ai-card__open {
appearance: none;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 16px;
border: 0;
border-radius: 12px;
background: #fff;
color: var(--pw-accent);
font-weight: 800;
font-size: 0.88rem;
cursor: pointer;
transition: filter .18s, transform .12s;
}
.pw .pw-ai-card__open:hover { filter: brightness(1.06); }
.pw .pw-ai-card__open:active { transform: translateY(1px); }
.pw .pw-ai-card__open.is-disabled {
background: rgba(255, 255, 255, 0.6);
color: var(--pw-accent);
cursor: not-allowed;
}
.pw .pw-panel__hint {
color: var(--pw-mute);
font-size: 0.82rem;
font-weight: 700;
}
.pw .pw-panel__body { padding: 18px 28px 24px; }
.pw .pw-row-subtext {
margin-top: 4px;
color: var(--pw-mute);
font-size: 0.74rem;
font-weight: 700;
}
.pw .pw-icon-btn.is-disabled {
background: #f8fafc;
color: #94a3b8;
border-color: var(--pw-border);
cursor: not-allowed;
}
/* ------------------------------------------------------------------
* KPI helpers (alert variant for SLA breaches etc.)
* ------------------------------------------------------------------ */
.pw .pw-kpi--alert {
border-color: rgba(239, 68, 68, 0.30);
background: linear-gradient(180deg, rgba(239, 68, 68, 0.06) 0%, rgba(255, 255, 255, 0.98) 100%);
}
.pw .pw-kpi--alert::after { background: rgba(239, 68, 68, 0.08); }
.pw .pw-kpi--alert .pw-kpi__label i { color: #ef4444; }
.pw .pw-kpi--alert .pw-kpi__value { color: #b91c1c; }
/* ------------------------------------------------------------------
* List item — used by funnel snapshots, offers, day-1 starters etc.
* ------------------------------------------------------------------ */
.pw .pw-list {
list-style: none;
margin: 0;
padding: 0;
}
.pw .pw-list > li {
padding: 10px 0;
border-bottom: 1px solid var(--pw-border);
color: var(--pw-ink);
font-size: 0.88rem;
}
.pw .pw-list > li:last-child { border-bottom: 0; }
.pw .pw-stack {
display: flex;
flex-direction: column;
gap: 10px;
}
.pw .pw-mini-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
border: 1px solid var(--pw-border);
border-radius: 12px;
background: #fff;
}
.pw .pw-mini-row:hover { border-color: rgba(var(--pw-accent-rgb), 0.30); }
.pw .pw-mini-row__main {
min-width: 0;
flex: 1 1 auto;
}
.pw .pw-mini-row__title {
color: var(--pw-ink);
font-weight: 800;
font-size: 0.9rem;
}
.pw .pw-mini-row__meta {
margin-top: 3px;
color: var(--pw-mute);
font-size: 0.8rem;
}
.pw .pw-mini-row__side {
display: inline-flex;
align-items: center;
gap: 6px;
flex: 0 0 auto;
}
/* ------------------------------------------------------------------
* Funnel snapshot card (top open requisitions on the dashboard)
* ------------------------------------------------------------------ */
.pw .pw-funnel-row {
padding: 14px 16px;
border: 1px solid var(--pw-border);
border-radius: 14px;
background: #fff;
}
.pw .pw-funnel-row + .pw-funnel-row { margin-top: 10px; }
.pw .pw-funnel-row__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 8px;
}
.pw .pw-funnel-row__id { color: var(--pw-ink); font-weight: 800; }
.pw .pw-funnel-stages {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.pw .pw-stage-pill {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 26px;
padding: 3px 10px;
border-radius: 999px;
border: 1px solid rgba(var(--pw-accent-rgb), 0.18);
background: rgba(var(--pw-accent-rgb), 0.08);
color: var(--pw-accent);
font-size: 0.75rem;
font-weight: 800;
}
.pw .pw-stage-pill strong {
color: var(--pw-accent);
font-weight: 900;
}
/* ------------------------------------------------------------------
* Form helpers
* ------------------------------------------------------------------ */
.pw .pw-form .pw-panel { box-shadow: var(--pw-shadow); }
.pw .pw-form .form-label {
margin-bottom: 6px;
color: var(--pw-ink);
font-weight: 700;
font-size: 0.86rem;
}
.pw .pw-form .form-control,
.pw .pw-form .form-select,
.pw .pw-form .input-group-text {
border: 1px solid var(--pw-border);
border-radius: 12px;
font-size: 0.92rem;
color: var(--pw-ink);
background: #fff;
padding: 10px 14px;
}
.pw .pw-form .input-group .form-control { border-radius: 0 12px 12px 0; }
.pw .pw-form .input-group .input-group-text {
border-radius: 12px 0 0 12px;
border-right: 0;
background: var(--pw-soft);
color: var(--pw-mute);
font-weight: 700;
}
.pw .pw-form .form-control:focus,
.pw .pw-form .form-select:focus {
border-color: var(--pw-accent);
box-shadow: 0 0 0 4px rgba(var(--pw-accent-rgb), 0.12);
outline: none;
}
.pw .pw-form textarea.form-control { min-height: 96px; resize: vertical; }
.pw .pw-form-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
padding: 18px 0 4px;
}
.pw .pw-form-actions .btn {
min-height: 42px;
padding: 9px 20px;
border-radius: 12px;
font-weight: 700;
}
.pw .pw-form-actions .btn-primary {
background: var(--pw-accent);
border-color: var(--pw-accent);
color: #fff;
box-shadow: 0 12px 24px rgba(var(--pw-accent-rgb), 0.20);
}
.pw .pw-form-actions .btn-primary:hover { filter: brightness(1.07); color: #fff; }
.pw .pw-form-actions .btn-light {
background: #fff;
border-color: var(--pw-border);
color: var(--pw-ink);
}
/* ------------------------------------------------------------------
* Career-site (public) application form
* ------------------------------------------------------------------ */
.pw .pw-form--public {
max-width: 880px;
margin: 0 auto;
padding: 32px 28px;
background: #fff;
border: 1px solid var(--pw-border);
border-radius: 24px;
box-shadow: var(--pw-shadow);
}
.pw .pw-form__title {
margin: 0 0 22px;
color: var(--pw-ink);
font-size: 1.6rem;
font-weight: 800;
line-height: 1.2;
}
.pw .pw-fieldset {
margin: 0;
padding: 20px 22px;
border: 1px solid var(--pw-border);
border-radius: 18px;
background: var(--pw-soft);
}
.pw .pw-fieldset + .pw-fieldset { margin-top: 18px; }
/* A