/* Pulse Book layout system for HRMS
 * Layout / chrome only — does not override HRMS primary colors or button styles.
 * Everything is scoped to .pb-surface so other modules are untouched.
 */

.pb-surface {
    --pb-radius-xl: 12px;
    --pb-radius-lg: 10px;
    --pb-radius-md: 8px;
    --pb-radius-sm: 6px;
    --pb-shadow-soft: 0 5px 20px rgba(173, 181, 217, 0.08);
    --pb-shadow-hero: 0 10px 40px rgba(30, 58, 95, 0.06);
    --pb-border: #E3E6EF;
    --pb-border-light: #F1F2F6;
    --pb-muted: #8C90A4;
    --pb-text: #0A0A0A;
    --pb-tag-bg: #d4f4de;
    --pb-tag-text: #0d7a2a;
    --pb-hero-gradient: linear-gradient(135deg, #f2fbf5 0%, #e8f5ee 100%);
    --pb-success-bg: #d1fae5;
    --pb-success-text: #065f46;
    --pb-danger-bg: #fee2e2;
    --pb-danger-text: #991b1b;
    --pb-warning-bg: #fef3c7;
    --pb-warning-text: #92400e;
    --pb-info-bg: #dbeafe;
    --pb-info-text: #1e40af;
    --pb-neutral-bg: #f1f5f9;
    --pb-neutral-text: #475569;
}

/* -- Hero banner -- */
.pb-surface .pb-hero {
    background: var(--pb-hero-gradient);
    border-radius: var(--pb-radius-xl);
    padding: 2rem 2.25rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--pb-shadow-hero);
    border: 1px solid var(--pb-border-light);
}
.pb-surface .pb-hero-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.pb-surface .pb-hero-main { min-width: 0; flex: 1 1 auto; }
.pb-surface .pb-hero-title {
    font-size: 2rem;
    font-weight: 700;
    margin: 0.75rem 0 0.5rem;
    color: var(--pb-text);
    line-height: 1.2;
}
.pb-surface .pb-hero-desc {
    color: var(--pb-muted);
    font-size: 0.95rem;
    max-width: 640px;
    margin: 0;
    line-height: 1.55;
}
/* Breadcrumb styling — intentionally NOT scoped under .pb-surface, since
   several hero partials (businessSettingSubpageHero, pba/admin/billing,
   pulse-first portals) render .pb-hero outside a .pb-surface wrapper.
   Without the broader selector, the global "a" color from app.css leaks
   through and turns links into the brand accent — unreadable on the
   tinted hero backgrounds. */
.pb-hero-breadcrumb {
    font-size: 0.85rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    white-space: nowrap;
}
.pb-hero-breadcrumb a {
    color: #475569;
    text-decoration: none;
    transition: color 0.12s ease;
}
.pb-hero-breadcrumb a:hover,
.pb-hero-breadcrumb a:focus {
    color: #1e293b;
    text-decoration: underline;
}
.pb-hero-breadcrumb .sep { color: #cbd5e1; }
.pb-hero-breadcrumb .current { color: #0f172a; font-weight: 700; }
.pb-hero-breadcrumb i { font-size: 0.95rem; margin-right: 0.2rem; opacity: 0.75; }

/* ─── App-wide breadcrumb palette ────────────────────────────────────────
   Every breadcrumb container in the app — Pulse Book hero, settings-
   page-header partial, ps-page-header (Platform Settings & Attendance
   Defaults), and the legacy Bootstrap @yield('breadcrumb') in
   layouts/admin.blade.php — should render its links in the same slate
   tones so the whole app reads consistently and remains legible on the
   tinted hero backgrounds. The legacy .breadcrumb-item anchors used to
   fall back to the global <a> brand-accent (bright green / lime), which
   was unreadable against the hero gradients. The rules below override
   that for every breadcrumb shape we ship. */
.sph-page-header__crumbs a,
.ps-page-header__crumbs a,
.breadcrumb a,
.breadcrumb-item a,
ul.breadcrumb li a {
    color: #475569;
    text-decoration: none;
    transition: color 0.12s ease;
}
.sph-page-header__crumbs a:hover, .sph-page-header__crumbs a:focus,
.ps-page-header__crumbs a:hover,  .ps-page-header__crumbs a:focus,
.breadcrumb a:hover,              .breadcrumb a:focus,
.breadcrumb-item a:hover,         .breadcrumb-item a:focus,
ul.breadcrumb li a:hover,         ul.breadcrumb li a:focus {
    color: #1e293b;
    text-decoration: underline;
}
/* Span-only breadcrumb (no link) — keep the muted body tone */
.sph-page-header__crumbs,
.ps-page-header__crumbs,
.breadcrumb,
ul.breadcrumb { color: #64748b; }
.sph-page-header__crumbs .active,
.ps-page-header__crumbs .active,
.breadcrumb-item.active,
ul.breadcrumb li.active,
ul.breadcrumb li:last-child { color: #0f172a; font-weight: 700; }
.sph-page-header__crumbs .crumb-sep,
.ps-page-header__crumbs .crumb-sep { color: #cbd5e1; opacity: 1; }
/* Bootstrap renders its own / divider via ::before; recolor it to match
   the manual .crumb-sep tone so all four patterns look identical. */
.breadcrumb-item + .breadcrumb-item::before,
ul.breadcrumb li + li::before { color: #cbd5e1; }

/* -- Workspace tag pill -- */
.pb-surface .pb-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--pb-tag-bg);
    color: var(--pb-tag-text);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
}
.pb-surface .pb-tag i { font-size: 0.95rem; }

/* -- Section card -- */
.pb-surface .pb-section-card {
    background: #fff;
    border-radius: var(--pb-radius-lg);
    border: 1px solid var(--pb-border-light);
    box-shadow: var(--pb-shadow-soft);
    margin-bottom: 1.5rem;
}
.pb-surface .pb-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem 1.75rem 1rem;
    flex-wrap: wrap;
}
.pb-surface .pb-section-title {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 0.35rem;
    color: var(--pb-text);
}
.pb-surface .pb-section-desc {
    color: var(--pb-muted);
    font-size: 0.9rem;
    margin: 0;
    max-width: 720px;
    line-height: 1.5;
}
.pb-surface .pb-section-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}
.pb-surface .pb-section-body { padding: 0 1.75rem 1.5rem; }

/* -- KPI grid -- */
.pb-surface .pb-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    padding: 0 1.75rem 1.5rem;
}
.pb-surface .pb-kpi-tile {
    border: 1px solid var(--pb-border-light);
    border-radius: var(--pb-radius-md);
    padding: 1.15rem 1.25rem;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pb-surface .pb-kpi-tile:hover {
    border-color: var(--pb-border);
    box-shadow: var(--pb-shadow-soft);
}
.pb-surface .pb-kpi-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--pb-muted);
    margin-bottom: 0.55rem;
}
.pb-surface .pb-kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--pb-text);
    margin-bottom: 0.35rem;
    line-height: 1.15;
    word-break: break-word;
}
.pb-surface .pb-kpi-value.danger { color: #FF0F0F; }
.pb-surface .pb-kpi-caption {
    font-size: 0.8rem;
    color: var(--pb-muted);
    margin: 0;
    line-height: 1.45;
}

/* -- Filter band -- */
.pb-surface .pb-filter-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    align-items: end;
    padding: 0 1.75rem 1.5rem;
}
.pb-surface .pb-filter-row label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--pb-text);
    margin-bottom: 0.35rem;
    display: block;
}
.pb-surface .pb-filter-row .form-control,
.pb-surface .pb-filter-row .form-select {
    border-radius: var(--pb-radius-md);
    border-color: var(--pb-border);
    background: #fff;
}

/* -- Listing table wrapper -- */
.pb-surface .pb-listing { padding: 0 1.75rem 1.5rem; }
.pb-surface .pb-listing table { margin: 0; }

/* Listing wrappers must not clip their children — row-level dropdowns
   (e.g. the Pay Slips menu) would otherwise get hidden behind the table
   edge. Horizontal scroll is restored on narrow viewports in the media
   query block below. */
.pb-surface .pb-listing .table-responsive,
.pb-surface .pb-listing .dataTables_wrapper,
.pb-surface .pb-listing .dataTables_scroll,
.pb-surface .pb-listing .dataTables_scrollBody {
    overflow: visible;
}
.pb-surface .pb-listing .dropdown-menu { z-index: 1060; }

/* Inline row action cluster (payrun register "Pay Slips" → Simple / Detailed) */
.pb-surface .pb-payslip-actions {
    display: inline-flex;
    gap: 0.4rem;
    flex-wrap: nowrap;
}
.pb-surface .pb-payslip-actions .pb-btn-outline {
    padding: 0.45rem 0.75rem;
    font-size: 0.82rem;
    white-space: nowrap;
}
.pb-surface .pb-listing table thead th {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--pb-muted);
    border-bottom: 1px solid var(--pb-border);
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
}
.pb-surface .pb-listing table tbody td {
    border-bottom: 1px solid var(--pb-border-light);
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
    vertical-align: middle;
}
.pb-surface .pb-listing table tbody tr:last-child td { border-bottom: none; }
.pb-surface .pb-listing table tbody tr.clickable-row { cursor: pointer; transition: background 0.12s ease; }
.pb-surface .pb-listing table tbody tr.clickable-row:hover { background: #f8fafc; }
.pb-surface .pb-listing table a.fw-semibold { color: var(--pb-text); text-decoration: none; }
.pb-surface .pb-listing table a.fw-semibold:hover { color: var(--pb-text); text-decoration: underline; }

/* -- Payment Files bank-format catalogue -- */
.pb-surface .pb-bank-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    padding: 0 1.75rem 1.5rem;
}
.pb-surface .pb-bank-card {
    background: #fff;
    border: 1px solid var(--pb-border-light);
    border-radius: var(--pb-radius-lg);
    padding: 1.1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    min-height: 178px;
}
.pb-surface .pb-bank-card:hover {
    border-color: var(--pb-border);
    box-shadow: var(--pb-shadow-soft);
}
.pb-surface .pb-bank-card.is-configured { border-color: rgba(12, 119, 133, 0.35); }
.pb-surface .pb-bank-card-head {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}
.pb-surface .pb-bank-card-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--pb-radius-sm);
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0c7785;
    flex: 0 0 auto;
}
.pb-surface .pb-bank-card-icon i { font-size: 1.15rem; }
.pb-surface .pb-bank-card-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--pb-text);
    line-height: 1.25;
    margin: 0;
}
.pb-surface .pb-bank-card-id {
    font-size: 0.72rem;
    color: var(--pb-muted);
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    letter-spacing: 0.02em;
    display: block;
    margin-top: 0.15rem;
}
.pb-surface .pb-bank-card-status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-left: auto;
    white-space: nowrap;
}
.pb-surface .pb-bank-card-status.is-configured {
    background: var(--pb-success-bg);
    color: var(--pb-success-text);
}
.pb-surface .pb-bank-card-status.is-pending {
    background: var(--pb-neutral-bg);
    color: var(--pb-neutral-text);
}
.pb-surface .pb-bank-card-desc {
    font-size: 0.82rem;
    color: var(--pb-muted);
    line-height: 1.45;
    margin: 0;
}
.pb-surface .pb-bank-account-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #fafbfc;
    border: 1px solid var(--pb-border-light);
    border-radius: var(--pb-radius-sm);
    padding: 0.55rem 0.65rem;
    font-size: 0.8rem;
}
.pb-surface .pb-bank-account-row + .pb-bank-account-row { margin-top: 0.4rem; }
.pb-surface .pb-bank-account-name {
    font-weight: 600;
    color: var(--pb-text);
    line-height: 1.2;
}
.pb-surface .pb-bank-account-meta {
    font-size: 0.72rem;
    color: var(--pb-muted);
    display: block;
    margin-top: 0.1rem;
}
.pb-surface .pb-bank-account-actions {
    margin-left: auto;
    display: flex;
    gap: 0.3rem;
}
.pb-surface .pb-bank-card-foot {
    margin-top: auto;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}
.pb-surface .pb-bank-search-wrap {
    padding: 0 1.75rem 0.75rem;
}
.pb-surface .pb-bank-search {
    position: relative;
    max-width: 380px;
}
.pb-surface .pb-bank-search input {
    width: 100%;
    border: 1px solid var(--pb-border);
    border-radius: var(--pb-radius-md);
    padding: 0.55rem 0.7rem 0.55rem 2.1rem;
    font-size: 0.85rem;
    background: #fafbfc;
}
.pb-surface .pb-bank-search input:focus {
    outline: none;
    border-color: #0c7785;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(12, 119, 133, 0.12);
}
.pb-surface .pb-bank-search i {
    position: absolute;
    left: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--pb-muted);
    font-size: 1rem;
}
.pb-surface .pb-bank-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--pb-muted);
    padding: 1.5rem 0.5rem;
    font-size: 0.9rem;
}

/* -- Attendance settings workspace -- */
.pb-surface .att-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin: 1.25rem 0 0;
}
.pb-surface .att-overview-card {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(12, 119, 133, 0.10), transparent 42%),
        linear-gradient(180deg, #ffffff 0%, #f8fbfc 100%);
    border: 1px solid var(--pb-border-light);
    border-radius: var(--pb-radius-lg);
    padding: 1.15rem 1.2rem;
    box-shadow: var(--pb-shadow-soft);
}
.pb-surface .att-overview-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #0c7785;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.pb-surface .att-overview-value {
    margin: 0.6rem 0 0.2rem;
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1;
    color: var(--pb-text);
}
.pb-surface .att-overview-copy {
    margin: 0;
    color: var(--pb-muted);
    font-size: 0.84rem;
    line-height: 1.5;
}
.pb-surface .att-policy-shell,
.pb-surface .att-employee-shell {
    padding: 0 1.75rem 1.5rem;
}
.pb-surface .att-policy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}
.pb-surface .att-toggle-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: #fff;
    border: 1px solid var(--pb-border-light);
    border-radius: var(--pb-radius-lg);
    padding: 1rem 1.05rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.pb-surface .att-toggle-card:hover {
    border-color: var(--pb-border);
    box-shadow: var(--pb-shadow-soft);
    transform: translateY(-1px);
}
.pb-surface .att-toggle-card.is-active {
    border-color: rgba(12, 119, 133, 0.28);
    box-shadow: 0 12px 26px rgba(12, 119, 133, 0.08);
}
.pb-surface .att-toggle-card__input {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 18px;
    height: 18px;
    accent-color: #0c7785;
}
.pb-surface .att-toggle-card__top {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding-right: 1.6rem;
}
.pb-surface .att-toggle-icon,
.pb-surface .att-input-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #ecf8f5;
    color: #0c7785;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.pb-surface .att-toggle-icon i,
.pb-surface .att-input-card__icon i {
    font-size: 1rem;
}
.pb-surface .att-toggle-state {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: var(--pb-neutral-bg);
    color: var(--pb-neutral-text);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}
.pb-surface .att-toggle-card.is-active .att-toggle-state {
    background: var(--pb-success-bg);
    color: var(--pb-success-text);
}
.pb-surface .att-toggle-title {
    margin: 0;
    color: var(--pb-text);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
}
.pb-surface .att-toggle-help,
.pb-surface .att-form-note,
.pb-surface .att-meta,
.pb-surface .att-help {
    color: var(--pb-muted);
    line-height: 1.5;
}
.pb-surface .att-toggle-help {
    margin: 0;
    font-size: 0.88rem;
}
.pb-surface .att-meta {
    font-size: 0.9rem;
}
.pb-surface .att-help,
.pb-surface .att-form-note {
    font-size: 0.8rem;
}
.pb-surface .att-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: #e8f8f2;
    color: #0f766e;
    font-size: 0.74rem;
    font-weight: 700;
}
.pb-surface .att-section-band {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.1rem;
    margin: 1.15rem 0 0.9rem;
    border: 1px solid var(--pb-border-light);
    border-radius: var(--pb-radius-lg);
    background: linear-gradient(180deg, #ffffff 0%, #f9fbfc 100%);
}
.pb-surface .att-section-band__title {
    margin: 0 0 0.25rem;
    color: var(--pb-text);
    font-size: 1rem;
    font-weight: 700;
}
.pb-surface .att-section-band__copy {
    margin: 0;
    color: var(--pb-muted);
    font-size: 0.85rem;
    line-height: 1.5;
}
.pb-surface .att-input-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}
.pb-surface .att-input-card {
    /* Flex column so the input field always pins to the bottom of the
       card regardless of how long the description copy is. Without this,
       cards in the same row land their inputs at different heights when
       descriptions vary in line count, which reads as broken alignment. */
    display: flex;
    flex-direction: column;
    border: 1px solid var(--pb-border-light);
    border-radius: var(--pb-radius-lg);
    background: linear-gradient(180deg, #ffffff 0%, #fafcfd 100%);
    padding: 1rem;
}
.pb-surface .att-input-card__top {
    display: flex;
    /* flex-start so the icon sits next to the first line of the title
       instead of centring against a multi-line description block. */
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    /* Absorb the height variance so the form control stays bottom-aligned
       across every card in the same grid row. */
    flex: 1 1 auto;
}
.pb-surface .att-input-card > .form-control,
.pb-surface .att-input-card > .form-select {
    /* Last child input/select stays glued to the card's bottom edge. */
    margin-top: auto;
}
.pb-surface .att-input-card__title {
    margin: 0;
    color: var(--pb-text);
    font-size: 0.95rem;
    font-weight: 700;
}
.pb-surface .att-input-card .form-label,
.pb-surface .att-location-card .form-label {
    margin-bottom: 0.35rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--pb-text);
}
.pb-surface .att-location-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 1rem;
    padding: 0 1.75rem 1.5rem;
}
.pb-surface .att-location-card {
    border: 1px solid var(--pb-border-light);
    border-radius: var(--pb-radius-lg);
    background: #fff;
    padding: 1rem;
    box-shadow: var(--pb-shadow-soft);
}
.pb-surface .att-location-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}
.pb-surface .att-location-card__title {
    margin: 0;
    color: var(--pb-text);
    font-size: 1rem;
    font-weight: 700;
}
.pb-surface .att-location-card__meta {
    margin-top: 0.35rem;
    color: var(--pb-muted);
    font-size: 0.78rem;
    line-height: 1.5;
}
.pb-surface .att-location-badges {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.pb-surface .att-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.24rem 0.55rem;
    border-radius: 999px;
    background: var(--pb-neutral-bg);
    color: var(--pb-neutral-text);
    font-size: 0.72rem;
    font-weight: 700;
}
.pb-surface .att-status-chip--active {
    background: var(--pb-success-bg);
    color: var(--pb-success-text);
}
.pb-surface .att-status-chip--inactive {
    background: var(--pb-danger-bg);
    color: var(--pb-danger-text);
}
.pb-surface .att-location-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 0.75rem;
    margin-top: 1rem;
}
.pb-surface .att-location-field--full {
    grid-column: 1 / -1;
}
.pb-surface .att-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.9rem;
}
.pb-surface .att-employee-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.pb-surface .att-search {
    position: relative;
    width: 100%;
    max-width: 340px;
}
.pb-surface .att-search input {
    width: 100%;
    border: 1px solid var(--pb-border);
    border-radius: var(--pb-radius-md);
    padding: 0.55rem 0.75rem 0.55rem 2.15rem;
    background: #fafbfc;
    font-size: 0.85rem;
}
.pb-surface .att-search input:focus {
    outline: none;
    border-color: #0c7785;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(12, 119, 133, 0.12);
}
.pb-surface .att-search i {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--pb-muted);
    font-size: 1rem;
}
.pb-surface .att-employee-table {
    border: 1px solid var(--pb-border-light);
    border-radius: var(--pb-radius-lg);
    overflow: hidden;
}
.pb-surface .att-employee-table table { margin: 0; }
.pb-surface .att-employee-table tbody td {
    vertical-align: top;
}
.pb-surface .att-employee-table tbody tr:hover td {
    background: #fcfdfd;
}
.pb-surface .att-assignment-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.24rem 0.55rem;
    border-radius: 999px;
    background: var(--pb-neutral-bg);
    color: var(--pb-neutral-text);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}
.pb-surface .att-select[multiple] {
    min-height: 132px;
}
.pb-surface .att-empty-row td {
    text-align: center;
    color: var(--pb-muted);
    padding: 1rem;
}

/* -- Form input rounding inside pb surfaces (modal partials, etc.) -- */
.pb-surface .form-control,
.pb-surface .form-select { border-radius: var(--pb-radius-md); }

/* -- Divider -- */
.pb-surface .pb-divider {
    height: 1px;
    background: var(--pb-border-light);
    margin: 0 1.75rem;
}

/* -- Tab nav inside section card (used on edit page) -- */
.pb-surface .pb-section-card .nav-tabs {
    border-bottom: 1px solid var(--pb-border-light);
    padding: 0.5rem 1.75rem;
    margin: 0 -1.75rem 1.75rem;
    gap: 0.1rem;
}
.pb-surface .pb-section-card .tab-content { padding-top: 0.5rem; }
.pb-surface .pb-section-card .nav-tabs .nav-item { margin-bottom: 0; }
.pb-surface .pb-section-card .nav-tabs .nav-link {
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--pb-muted);
    font-weight: 500;
    font-size: 0.92rem;
    padding: 0.95rem 1.15rem;
    background: transparent;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    line-height: 1.2;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    position: relative;
}
.pb-surface .pb-section-card .nav-tabs .nav-link > i {
    font-size: 1.05rem;
    color: var(--pb-muted);
    transition: color 0.15s ease;
}
.pb-surface .pb-section-card .nav-tabs .nav-link:hover {
    color: var(--pb-tag-text);
    background: var(--pb-tag-bg);
    border-bottom-color: transparent;
    border-radius: var(--pb-radius-lg);
}
.pb-surface .pb-section-card .nav-tabs .nav-link:hover > i { color: var(--pb-tag-text); }
.pb-surface .pb-section-card .nav-tabs .nav-link.active {
    color: var(--pb-tag-text);
    background: var(--pb-tag-bg);
    border-bottom-color: transparent;
    border-radius: var(--pb-radius-lg);
    font-weight: 600;
}
.pb-surface .pb-section-card .nav-tabs .nav-link.active > i { color: var(--pb-text); }
.pb-surface .pb-section-card .nav-tabs .nav-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.08);
    border-radius: var(--pb-radius-sm) var(--pb-radius-sm) 0 0;
}
.pb-surface .pb-section-card .nav-tabs .nav-link .badge {
    font-size: 0.65rem;
    padding: 0.25em 0.5em;
    vertical-align: middle;
}
.pb-surface .pb-section-card .nav-tabs .nav-link .pb-badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.55rem;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
    min-width: 1.6em;
    justify-content: center;
    margin-right: 0;
    margin-left: 0.15rem;
    line-height: 1;
}
.pb-surface .pb-section-card .nav-tabs .nav-link .pb-badge .dot { display: none; }

/* -- Employees financial table (payrun detail) -- */
.pb-surface .pb-employees-table {
    margin: 0;
    font-size: 0.82rem;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    table-layout: auto;
}
.pb-surface .pb-employees-table thead th {
    background: #f8fafc;
    color: var(--pb-muted);
    font-weight: 700;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 0.9rem 0.5rem;
    border-top: 1px solid var(--pb-border-light);
    border-bottom: 1px solid var(--pb-border);
    vertical-align: bottom;
    white-space: normal;
    line-height: 1.25;
    word-break: normal;
    hyphens: none;
}
.pb-surface .pb-employees-table thead th:first-child {
    border-top-left-radius: var(--pb-radius-md);
    padding-left: 0.85rem;
    min-width: 140px;
}
.pb-surface .pb-employees-table thead th:last-child {
    border-top-right-radius: var(--pb-radius-md);
    padding-right: 0.85rem;
}
.pb-surface .pb-employees-table tbody td {
    padding: 1rem 0.5rem;
    border-bottom: 1px solid var(--pb-border-light);
    vertical-align: middle;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--pb-text);
    font-size: 0.82rem;
    background: transparent;
}
.pb-surface .pb-employees-table tbody td:first-child {
    padding-left: 0.85rem;
    white-space: nowrap;
}
.pb-surface .pb-employees-table tbody td:last-child { padding-right: 0.85rem; }
/* Mute the "RM" currency prefix so the number stays prominent and column is narrower */
.pb-surface .pb-employees-table tbody td .rm-prefix,
.pb-surface .pb-employees-table tfoot th .rm-prefix {
    color: var(--pb-muted);
    font-size: 0.75em;
    margin-right: 0.15em;
    font-weight: 500;
}

/* Right-align every numeric column (all columns except the first) */
.pb-surface .pb-employees-table thead th:not(:first-child),
.pb-surface .pb-employees-table tbody td:not(:first-child),
.pb-surface .pb-employees-table tfoot th:not(:first-child) {
    text-align: right;
}

/* Clickable employee row */
.pb-surface .pb-employees-table tbody tr[role="button"] {
    cursor: pointer;
    transition: background 0.12s ease;
}
.pb-surface .pb-employees-table tbody tr[role="button"]:hover {
    background: #f8fafc;
}
.pb-surface .pb-employees-table tbody tr[role="button"] .ti-chevron-right {
    color: var(--pb-muted);
    transition: transform 0.2s ease;
    margin-right: 0.4rem;
    font-size: 0.9rem;
    vertical-align: -1px;
}
.pb-surface .pb-employees-table tbody tr[role="button"][aria-expanded="true"] .ti-chevron-right {
    transform: rotate(90deg);
    color: var(--pb-text);
}

/* Collapse child row keeps no zebra */
.pb-surface .pb-employees-table tbody tr:has(> td.collapse) > td { padding: 0; background: #fafbfc; }
.pb-surface .pb-employees-table tbody tr:has(> td.collapse) { background: transparent; }

/* Net Earnings column emphasised */
.pb-surface .pb-employees-table tbody td:last-child { font-weight: 700; }

/* Totals row — soft, no dark navy */
.pb-surface .pb-employees-table tfoot tr {
    background: #f8fafc;
    border-top: 2px solid var(--pb-border);
}
.pb-surface .pb-employees-table tfoot th {
    background: transparent;
    color: var(--pb-text);
    font-weight: 700;
    font-size: 0.82rem;
    padding: 1.1rem 0.5rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    border-top: 2px solid var(--pb-border);
    border-bottom: none;
}
.pb-surface .pb-employees-table tfoot th:first-child {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--pb-muted);
    padding-left: 0.85rem;
    font-weight: 700;
    border-bottom-left-radius: var(--pb-radius-md);
}
.pb-surface .pb-employees-table tfoot th:last-child {
    padding-right: 0.85rem;
    border-bottom-right-radius: var(--pb-radius-md);
}

/* Horizontal scroll styling for the wrapping container */
.pb-surface .pb-employees-scroll {
    border: 1px solid var(--pb-border-light);
    border-radius: var(--pb-radius-md);
    overflow-x: auto;
    background: #fff;
}
.pb-surface .pb-employees-scroll::-webkit-scrollbar { height: 8px; }
.pb-surface .pb-employees-scroll::-webkit-scrollbar-track { background: transparent; }
.pb-surface .pb-employees-scroll::-webkit-scrollbar-thumb {
    background: var(--pb-border);
    border-radius: 4px;
}
.pb-surface .pb-employees-scroll::-webkit-scrollbar-thumb:hover { background: var(--pb-muted); }

/* -- Soft-tint status badges (layout chrome, not brand color) -- */
.pb-surface .pb-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}
.pb-surface .pb-badge.success { background: var(--pb-success-bg); color: var(--pb-success-text); }
.pb-surface .pb-badge.danger  { background: var(--pb-danger-bg);  color: var(--pb-danger-text); }
.pb-surface .pb-badge.warning { background: var(--pb-warning-bg); color: var(--pb-warning-text); }
.pb-surface .pb-badge.info    { background: var(--pb-info-bg);    color: var(--pb-info-text); }
.pb-surface .pb-badge.neutral { background: var(--pb-neutral-bg); color: var(--pb-neutral-text); }
.pb-surface .pb-badge .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* -- Register filter band -- */
.pb-surface .pb-filter-band {
    padding: 1.25rem 1.75rem;
    border-top: 1px solid var(--pb-border-light);
}
.pb-surface .pb-filter-band-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.pb-surface .pb-filter-band-head .pb-section-title { font-size: 1.1rem; }
.pb-surface .pb-filter-band-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}
.pb-surface .pb-filter-band-grid {
    display: grid;
    grid-template-columns: 1fr 1fr auto 1fr 1fr 1.5fr;
    gap: 0.75rem;
    align-items: end;
}
.pb-surface .pb-filter-band-grid label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--pb-text);
    margin-bottom: 0.35rem;
    display: block;
}
.pb-surface .pb-filter-band-grid .form-control,
.pb-surface .pb-filter-band-grid .form-select {
    border-radius: var(--pb-radius-md);
    border-color: var(--pb-border);
    background: #fff;
    height: 40px;
    font-size: 0.9rem;
}
.pb-surface .pb-filter-band-grid .pb-search {
    position: relative;
}
.pb-surface .pb-filter-band-grid .pb-search i {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--pb-muted);
    pointer-events: none;
    font-size: 1rem;
}
.pb-surface .pb-filter-band-grid .pb-search .form-control { padding-left: 2.25rem; }
.pb-surface .pb-filter-nav {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0;
    padding-bottom: 0;
}
.pb-surface .pb-filter-nav .btn {
    border-radius: var(--pb-radius-md);
    border: 1px solid var(--pb-border);
    background: #fff;
    color: var(--pb-muted);
    padding: 0.55rem 0.7rem;
    line-height: 1;
    height: 40px;
    width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pb-surface .pb-filter-nav .btn:hover {
    color: var(--pb-text);
    border-color: var(--pb-border-light);
    background: #f8fafc;
}

/* -- Outlined action button (Reset/Print/Export) -- */
.pb-surface .pb-btn-outline {
    background: #fff;
    border: 1px solid var(--pb-border);
    color: var(--pb-text);
    padding: 0.55rem 0.95rem;
    border-radius: var(--pb-radius-md);
    font-size: 0.85rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: background 0.15s ease, border-color 0.15s ease;
    line-height: 1;
}
.pb-surface .pb-btn-outline:hover {
    background: #f8fafc;
    border-color: var(--pb-border-light);
    color: var(--pb-text);
}
.pb-surface .pb-btn-outline:focus { outline: none; box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.08); }
.pb-surface .pb-btn-outline i { font-size: 0.95rem; color: var(--pb-muted); }
.pb-surface .pb-btn-outline i.pb-btn-caret {
    font-size: 0.8rem;
    margin-left: 0.15rem;
    transition: transform 0.15s ease;
}
.pb-surface .pb-btn-outline[aria-expanded="true"] i.pb-btn-caret { transform: rotate(180deg); }
/* Neutralise Bootstrap's default .dropdown-toggle::after arrow when we use our own caret icon. */
.pb-surface .pb-btn-outline.dropdown-toggle::after { display: none; }

/* -- Toolbar clusters (edit page) -- */
.pb-surface .pb-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.pb-surface .pb-toolbar-group {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

/* -- Meta chips (period / pay date on edit page) -- */
.pb-surface .pb-meta-chips {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}
.pb-surface .pb-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(30, 58, 95, 0.08);
    padding: 0.5rem 0.85rem;
    border-radius: var(--pb-radius-md);
    font-size: 0.85rem;
    color: var(--pb-text);
}
.pb-surface .pb-meta-chip i {
    color: var(--pb-muted);
    font-size: 1rem;
}
.pb-surface .pb-meta-chip .label {
    color: var(--pb-muted);
    font-weight: 500;
}
.pb-surface .pb-meta-chip .value { font-weight: 600; }

/* -- Empty state -- */
.pb-surface .pb-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--pb-muted);
}
.pb-surface .pb-empty-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--pb-neutral-bg);
    color: var(--pb-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    font-size: 2rem;
}
.pb-surface .pb-empty-title {
    color: var(--pb-text);
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 0.35rem;
}
.pb-surface .pb-empty-desc {
    font-size: 0.9rem;
    max-width: 380px;
    margin: 0 auto 1rem;
    line-height: 1.5;
}

/* -- Pagination chip (top-right of listing) -- */
.pb-surface .pb-pager {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.85rem;
    color: var(--pb-muted);
}
.pb-surface .pb-pager .btn {
    border-radius: var(--pb-radius-md);
    border: 1px solid var(--pb-border);
    background: #fff;
    color: var(--pb-muted);
    padding: 0.3rem 0.55rem;
    line-height: 1;
    height: 32px;
    width: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pb-surface .pb-pager .current { padding: 0 0.4rem; color: var(--pb-text); font-weight: 600; }

/* -- Responsive -- */
@media (max-width: 992px) {
    .pb-surface .pb-filter-band-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .pb-surface .pb-filter-band-grid .pb-filter-nav-wrap { grid-column: span 2; }
}
@media (max-width: 768px) {
    .pb-surface .pb-hero { padding: 1.5rem; }
    .pb-surface .pb-hero-title { font-size: 1.5rem; }
    .pb-surface .pb-section-head { padding: 1.25rem 1.25rem 0.75rem; }
    .pb-surface .pb-section-body,
    .pb-surface .pb-kpi-grid,
    .pb-surface .pb-filter-row,
    .pb-surface .pb-filter-band,
    .pb-surface .pb-listing,
    .pb-surface .pb-bank-grid,
    .pb-surface .pb-bank-search-wrap,
    .pb-surface .att-policy-shell,
    .pb-surface .att-location-grid,
    .pb-surface .att-employee-shell { padding-left: 1.25rem; padding-right: 1.25rem; }
    .pb-surface .pb-section-card .nav-tabs {
        padding: 0 1.25rem;
        margin: 0 -1.25rem 1rem;
    }
    .pb-surface .pb-filter-band-grid {
        grid-template-columns: 1fr;
    }
    .pb-surface .pb-filter-band-grid .pb-filter-nav-wrap { grid-column: auto; }
    .pb-surface .pb-bank-card-head {
        flex-wrap: wrap;
    }
    .pb-surface .pb-bank-card-status {
        margin-left: 0;
    }
    .pb-surface .att-section-band,
    .pb-surface .att-employee-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .pb-surface .att-location-fields {
        grid-template-columns: 1fr;
    }
    .pb-surface .att-search {
        max-width: none;
    }
    /* On narrow viewports, restore horizontal scroll on listing tables so a
       wide table doesn't force the page to stretch. Row dropdowns may clip
       here — we accept that trade-off for mobile. */
    .pb-surface .pb-listing .table-responsive { overflow-x: auto; }
}

/* ==========================================================================
 * Expanded employee detail panel (collapse row on payrun edit)
 * ========================================================================== */

/* The collapse child row — gentle backdrop so the panel reads as grouped content */
.pb-surface .pb-employees-table tbody > tr > td.collapse {
    padding: 0;
    background: #f8fafc;
}
.pb-surface .pb-employees-table tbody > tr > td.collapse.show,
.pb-surface .pb-employees-table tbody > tr > td.collapse.collapsing {
    padding: 0;
}
.pb-surface .form-individual {
    padding: 1.25rem 1.5rem;
    background: #f8fafc;
}
.pb-surface .form-individual > .card.card-body {
    background: #fff;
    border: 1px solid var(--pb-border-light);
    border-radius: var(--pb-radius-lg);
    box-shadow: 0 1px 3px rgba(30, 58, 95, 0.04);
    padding: 0.75rem 1.25rem 1.25rem;
}

/* Section banner ("Earnings", "Tax Reliefs", etc.) — replaces the blue bar */
.pb-surface .pb-section-banner > td {
    background: transparent;
    color: var(--pb-text);
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    padding: 1.1rem 0.1rem 0.5rem;
    border-top: none;
    border-bottom: 1px solid var(--pb-border-light);
}
/* First banner in the panel doesn't need a top padding push */
.pb-surface .form-individual tbody:first-of-type .pb-section-banner > td {
    padding-top: 0.5rem;
}

/* Form row tables inside the expanded panel — strip default table chrome */
.pb-surface .form-individual table.table {
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 0.5rem;
    background: transparent;
}
.pb-surface .form-individual table.table tbody > tr:not(.pb-section-banner) > td {
    padding: 0.55rem 0.35rem;
    border: none;
    vertical-align: middle;
    background: transparent;
}
.pb-surface .form-individual table.table tbody > tr:not(.pb-section-banner):not(:last-child) > td {
    border-bottom: 1px dashed var(--pb-border-light);
}

/* Small label above each field (emits from controller render) */
.pb-surface .form-individual label,
.pb-surface .form-individual .form-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--pb-muted);
    margin-bottom: 0.25rem;
    display: block;
    letter-spacing: 0.2px;
}

/* Form inputs inside the expanded panel */
.pb-surface .form-individual .form-control,
.pb-surface .form-individual .form-select {
    border-radius: var(--pb-radius-md);
    border-color: var(--pb-border);
    font-size: 0.85rem;
    padding: 0.4rem 0.65rem;
    background: #fff;
    color: var(--pb-text);
    height: auto;
    min-height: 36px;
}

/* Branch dropdown inside earnings/deduction rows — give it enough room to
   show the branch name plus the caret without clipping (e.g. "TRX HQ"). */
.pb-surface .form-individual select[name*="branchId"] {
    min-width: 150px;
    padding-right: 2rem;
    text-overflow: ellipsis;
}
.pb-surface .form-individual .form-control:focus,
.pb-surface .form-individual .form-select:focus {
    border-color: var(--pb-tag-text);
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.08);
}
.pb-surface .form-individual .input-group .input-group-text {
    background: #f1f5f9;
    border-color: var(--pb-border);
    color: var(--pb-muted);
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: var(--pb-radius-md) 0 0 var(--pb-radius-md);
    padding: 0.4rem 0.6rem;
}

/* Delete / trash buttons inside the expanded panel — subtle outline, not a blaring red circle.
   The row's rendered markup is <div class="action-btn bg-danger row-remove"><a class="btn btn-sm">
   <i class="ti ti-trash"/></a></div>, so we target the wrapper directly and neutralise the bright
   red background. */
.pb-surface .form-individual .btn-danger,
.pb-surface .form-individual button[class*="remove"],
.pb-surface .form-individual a[class*="remove"],
.pb-surface .form-individual .row-remove,
.pb-surface .form-individual .action-btn.bg-danger {
    background: #fff !important;
    border: 1px solid var(--pb-border);
    color: var(--pb-muted);
    border-radius: var(--pb-radius-md);
    padding: 0.45rem 0.55rem;
    line-height: 1;
    box-shadow: none;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.pb-surface .form-individual .btn-danger:hover,
.pb-surface .form-individual button[class*="remove"]:hover,
.pb-surface .form-individual a[class*="remove"]:hover,
.pb-surface .form-individual .row-remove:hover,
.pb-surface .form-individual .action-btn.bg-danger:hover {
    background: var(--pb-danger-bg) !important;
    border-color: var(--pb-danger-text);
    color: var(--pb-danger-text);
}
/* The inner <a> is only a click target — strip its own button chrome so the outer wrapper
   owns the visual. */
.pb-surface .form-individual .row-remove > a,
.pb-surface .form-individual .action-btn.bg-danger > a {
    background: transparent !important;
    border: none;
    padding: 0;
    margin: 0;
    color: inherit;
    box-shadow: none;
}
.pb-surface .form-individual .row-remove i,
.pb-surface .form-individual .action-btn.bg-danger i { color: inherit !important; }

/* Single-line filter row (payrun edit → Filter tab). Each field is a flex
   item; the buttons collapse onto the same line and wrap only when the
   viewport is too narrow. */
.pb-surface .pb-filter-inline {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
}
.pb-surface .pb-filter-inline .pb-filter-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1 1 200px;
    min-width: 180px;
    margin: 0;
}
.pb-surface .pb-filter-inline .pb-filter-field label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--pb-muted);
    margin: 0;
}
.pb-surface .pb-filter-inline .pb-filter-field .form-control,
.pb-surface .pb-filter-inline .pb-filter-field .form-select {
    border-radius: var(--pb-radius-md);
}
.pb-surface .pb-filter-inline .pb-filter-extra {
    flex: 2 1 260px;
    flex-direction: row;
    align-items: flex-end;
    gap: 0.5rem;
}
.pb-surface .pb-filter-inline .pb-filter-extra:empty { display: none; }
.pb-surface .pb-filter-inline .pb-filter-actions {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    flex-shrink: 0;
}

/* Per-employee quick-action icons next to the employee name on the payrun
   edit page. Muted outline by default; the "complete" button flips green
   when marked_complete is on. */
.pb-surface .pb-emp-tools {
    /* Stack the action icons below the employee name so the row stays
       narrow even when names are long. The previous inline-flex layout
       pushed the entire totals table off the right edge. */
    display: flex;
    gap: 0.35rem;
    margin-top: 0.4rem;
    vertical-align: middle;
}
.pb-surface .pb-emp-tools .pb-emp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--pb-radius-md);
    border: 1px solid var(--pb-border);
    background: #fff;
    color: var(--pb-muted);
    padding: 0;
    line-height: 1;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
    cursor: pointer;
}
.pb-surface .pb-emp-tools .pb-emp-btn i { font-size: 1rem; }
.pb-surface .pb-emp-tools .pb-emp-btn:hover {
    background: #f8fafc;
    border-color: var(--pb-border-light);
    color: var(--pb-text);
}
.pb-surface .pb-emp-tools .pb-emp-btn:disabled { opacity: 0.5; cursor: wait; }
.pb-surface .pb-emp-tools .pb-emp-complete.is-complete {
    background: var(--pb-success-bg);
    border-color: var(--pb-tag-text);
    color: var(--pb-success-text);
}
.pb-surface .pb-emp-tools .pb-emp-complete.is-complete:hover {
    background: #bbf0cb;
}
.pb-surface .pb-emp-tools .pb-emp-edit:hover {
    color: var(--pb-tag-text);
    border-color: var(--pb-tag-text);
}
.pb-surface .pb-emp-tools .pb-emp-exclude:hover {
    color: #b42318;
    border-color: #fda29b;
    background: #fef3f2;
}
.pb-surface .pb-emp-tools .pb-emp-include:hover {
    color: #027a48;
    border-color: #6ce9a6;
    background: #ecfdf3;
}
/* Highlight the whole row subtly once marked complete so it's visible even when scrolled. */
.pb-surface .pb-employees-table tbody > tr[data-employee-complete="1"] > td:first-child strong {
    color: var(--pb-success-text);
}
/* Soft-excluded rows are kept visible (so payroll staff can re-include
   them) but visually dimmed and struck-through so they're obviously not
   contributing to the totals. */
.pb-surface .pb-employees-table tbody > tr.pb-emp-row-excluded > td {
    opacity: 0.55;
    background: #fafafa;
}
.pb-surface .pb-employees-table tbody > tr.pb-emp-row-excluded > td:first-child strong {
    text-decoration: line-through;
    color: var(--pb-muted);
}

/* Align the trash button with the input fields in the same row. Each form cell
   renders `<label><small>…</small></label><br><input>`, so inputs sit below a
   label-row. The delete cell has no label, so we:
   - bottom-align every td so the form-group block hugs the cell bottom
   - zero out the form-group's default 0.8rem bottom margin
   - reserve the same label-row height above the delete button with a top margin
   so the button lands on the input's visual baseline. */
.pb-surface .form-individual table > tbody > tr > td { vertical-align: bottom !important; }
.pb-surface .form-individual table > tbody > tr > td .form-group { margin-bottom: 0 !important; }
.pb-surface .form-individual table > tbody > tr > td > .row-remove,
.pb-surface .form-individual table > tbody > tr > td > .action-btn.bg-danger,
.pb-surface .form-individual table > tbody > tr > td > .badge {
    margin-top: 1.6rem;
}
.pb-surface .form-individual .btn-danger i,
.pb-surface .form-individual button[class*="remove"] i,
.pb-surface .form-individual a[class*="remove"] i { color: inherit; }

/* Line total pill (the teal "RM18,000.00" badge) */
.pb-surface .form-individual .badge,
.pb-surface .form-individual .line-total,
.pb-surface .form-individual [class*="line-total"],
.pb-surface .form-individual [class*="total-display"],
.pb-surface .form-individual .bg-info,
.pb-surface .form-individual .bg-primary,
.pb-surface .form-individual .bg-dark {
    background: var(--pb-neutral-bg) !important;
    color: var(--pb-text) !important;
    border: 1px solid var(--pb-border-light);
    border-radius: var(--pb-radius-md);
    font-weight: 700;
    padding: 0.4rem 0.7rem;
    font-size: 0.85rem;
    display: inline-block;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Notes textarea + label */
.pb-surface .form-individual label.pb-notes-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--pb-text);
    margin: 0.75rem 0 0.5rem;
    display: block;
    text-transform: none;
    letter-spacing: 0;
}
.pb-surface .form-individual textarea.form-control { min-height: 90px; resize: vertical; }

/* LHDN breakdown panel */
.pb-surface .form-individual .bg-light[id^="lhdn-breakdown-"] {
    background: #fffbeb !important;
    border: 1px solid #fde68a !important;
    border-radius: var(--pb-radius-md) !important;
    padding: 0.85rem 1rem !important;
}
.pb-surface .form-individual .bg-light[id^="lhdn-breakdown-"] strong { color: #92400e; }

/* Bottom action row */
.pb-surface .form-individual + .d-flex,
.pb-surface .form-individual > .d-flex {
    padding: 0.25rem 0 0;
}
.pb-surface .form-individual .btn {
    border-radius: var(--pb-radius-md);
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.pb-surface .form-individual .btn.btn-light {
    background: #fff;
    border: 1px solid var(--pb-border);
    color: var(--pb-text);
}
.pb-surface .form-individual .btn.btn-light:hover {
    background: #f8fafc;
    border-color: var(--pb-border-light);
}

/* ==========================================================================
 * Pulsebook button standardisation (payrun pages)
 * Rounder + slightly bigger. Scoped to .pb-surface so other modules are
 * untouched. The .form-individual rules above keep their compact shape.
 * ========================================================================== */
.pb-surface .pb-section-card .btn,
.pb-surface .pb-hero .btn,
.pb-surface .modal-footer .btn,
.pb-surface .modal-body .btn {
    border-radius: var(--pb-radius-lg);
    padding: 0.6rem 1.15rem;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
.pb-surface .pb-section-card .btn-sm,
.pb-surface .pb-hero .btn-sm,
.pb-surface .modal-footer .btn-sm,
.pb-surface .modal-body .btn-sm {
    border-radius: var(--pb-radius-lg);
    padding: 0.55rem 1rem;
    font-size: 0.875rem;
}
.pb-surface .pb-section-card .btn-lg,
.pb-surface .modal-footer .btn-lg {
    border-radius: var(--pb-radius-lg);
    padding: 0.8rem 1.45rem;
    font-size: 1rem;
}

/* Keep compact shape on icon-only table buttons and .btn-close */
.pb-surface td .btn.btn-sm.btn-light,
.pb-surface td .btn.btn-sm.btn-light.disabled {
    padding: 0.35rem 0.55rem;
    border-radius: var(--pb-radius-md);
    gap: 0;
}
.pb-surface .btn-close { border-radius: 50%; padding: 0.5rem; }

/* Button groups keep rounded outer edges */
.pb-surface .btn-group > .btn:not(:first-child):not(:last-child) { border-radius: 0; }
.pb-surface .btn-group > .btn:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.pb-surface .btn-group > .btn:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* .pb-btn-outline nudged slightly rounder + a touch larger */
.pb-surface .pb-btn-outline {
    padding: 0.62rem 1.05rem;
    border-radius: var(--pb-radius-lg);
    font-size: 0.9rem;
}
.pb-surface .pb-filter-nav .btn {
    border-radius: var(--pb-radius-lg);
    height: 42px;
    width: 42px;
}

/* Primary-coloured buttons keep HRMS theme colours, just shape adjusted. */
.pb-surface .btn-primary:focus,
.pb-surface .btn-success:focus,
.pb-surface .btn-warning:focus,
.pb-surface .btn-danger:focus,
.pb-surface .btn-secondary:focus,
.pb-surface .btn-light:focus,
.pb-surface .btn-outline-secondary:focus,
.pb-surface .btn-outline-primary:focus {
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
}

/* ==========================================================================
 * Pulsebook modal standardisation (payrun pages)
 * Applied to any modal whose .modal-content or a direct ancestor carries
 * .pb-surface. Inline payrun modals add pb-surface directly to modal-content;
 * the shared #commonModal receives the class from a tiny open-hook script
 * registered in each payrun blade.
 * ========================================================================== */
.pb-surface.modal-content,
.pb-surface .modal-content {
    border: 1px solid var(--pb-border);
    border-radius: var(--pb-radius-xl);
    box-shadow: 0 18px 60px rgba(30, 58, 95, 0.12);
    background: #fff;
    overflow: hidden;
}

.pb-surface.modal-content .modal-header,
.pb-surface .modal-content .modal-header,
.pb-surface .modal-header {
    padding: 1.15rem 1.5rem;
    border-bottom: 1px solid var(--pb-border-light);
    background: #fff;
    align-items: center;
}
.pb-surface.modal-content .modal-title,
.pb-surface .modal-content .modal-title,
.pb-surface .modal-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--pb-text);
    letter-spacing: -0.01em;
    margin: 0;
}
.pb-surface.modal-content .modal-body,
.pb-surface .modal-content .modal-body,
.pb-surface .modal-body {
    padding: 1.5rem 1.75rem;
    color: var(--pb-text);
    background: #fff;
}
.pb-surface .modal-body p.text-muted,
.pb-surface .modal-body > p:not([class]) {
    color: var(--pb-muted);
    font-size: 0.9rem;
    line-height: 1.55;
}
.pb-surface.modal-content .modal-footer,
.pb-surface .modal-content .modal-footer,
.pb-surface .modal-footer {
    padding: 1rem 1.75rem;
    border-top: 1px solid var(--pb-border-light);
    background: #fff;
    gap: 0.5rem;
}

/* Inputs inside pulsebook modals get consistent rounding */
.pb-surface .modal-body .form-control,
.pb-surface .modal-body .form-select {
    border-radius: var(--pb-radius-md);
    border-color: var(--pb-border);
    padding: 0.55rem 0.8rem;
}
.pb-surface .modal-body .form-control:focus,
.pb-surface .modal-body .form-select:focus {
    border-color: #9aa4c7;
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.08);
}
.pb-surface .modal-body label,
.pb-surface .modal-body .form-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--pb-text);
    margin-bottom: 0.35rem;
}
.pb-surface .modal-body .form-check-label {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--pb-text);
}
.pb-surface .modal-body .alert {
    border-radius: var(--pb-radius-md);
    padding: 0.85rem 1rem;
    font-size: 0.875rem;
}

/* Modal dialog spacing — let Bootstrap set widths, just add a small breathing margin on md/lg screens */
.pb-surface.modal .modal-dialog { margin-top: 2.5rem; margin-bottom: 2.5rem; }

/* ======================================================================
 * Shared form-control + tab polish for all .pb-surface pages
 * (promoted from employee/edit.blade.php so every subpage inherits it)
 * ====================================================================== */

/* -- Form controls: unified height, radius, focus ring -- */
.pb-surface form .form-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--pb-text);
    margin-bottom: 0.4rem;
    letter-spacing: 0.01em;
}
.pb-surface form .form-control,
.pb-surface form .form-select,
.pb-surface form select.form-control {
    height: 42px;
    border-color: var(--pb-border);
    border-radius: var(--pb-radius-md);
    font-size: 0.9rem;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.pb-surface form textarea.form-control { height: auto; min-height: 96px; }
.pb-surface form .form-control:hover,
.pb-surface form .form-select:hover,
.pb-surface form select.form-control:hover { border-color: #94a3b8; }
.pb-surface form .form-control:focus,
.pb-surface form .form-select:focus,
.pb-surface form select.form-control:focus {
    border-color: #0c7785;
    box-shadow: 0 0 0 3px rgba(12, 119, 133, 0.12);
    outline: none;
}
/* Native select → custom chevron */
.pb-surface form select.form-control,
.pb-surface form .form-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    background-size: 12px 12px;
    padding-right: 2.25rem;
}
.pb-surface form .form-label + .text-danger.pl-1,
.pb-surface form label + .text-danger.pl-1 {
    color: #e11d48;
    font-weight: 700;
    margin-left: 0.15rem;
}
.pb-surface form .pb-section-body > .row { --bs-gutter-x: 1.25rem; row-gap: 1rem; }
.pb-surface form .pb-section-body .form-group { margin-bottom: 0.25rem; }
.pb-surface form .pb-section-card .pb-section-head { padding-bottom: 1rem; }
.pb-surface form .pb-section-body hr {
    margin: 0.75rem 0;
    border-color: var(--pb-border-light);
    opacity: 1;
}
/* Primary form submit row — right-aligned app-wide */
.pb-surface .pb-form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0 1.75rem;
}
/* Legacy centered submit blocks still work, but are now styled like the right-aligned ones */
.pb-surface form > .text-center { padding: 1rem 0 1.75rem; }
.pb-surface .pb-form-actions .btn,
.pb-surface form > .text-center .btn {
    border-radius: var(--pb-radius-md);
    font-weight: 600;
    letter-spacing: 0.01em;
    font-size: 0.9rem;
}
.pb-surface .pb-form-actions .btn-primary,
.pb-surface form > .text-center .btn-primary {
    min-width: 160px;
    padding: 0.65rem 1.5rem;
    box-shadow: 0 6px 16px rgba(12, 119, 133, 0.15);
}
.pb-surface .pb-form-actions .btn-primary:hover,
.pb-surface form > .text-center .btn-primary:hover {
    box-shadow: 0 8px 20px rgba(12, 119, 133, 0.22);
}
.pb-surface .pb-form-actions .btn-outline-secondary {
    border-color: var(--pb-border);
    color: var(--pb-muted);
    background: #fff;
    padding: 0.6rem 1.25rem;
}
.pb-surface .pb-form-actions .btn-outline-secondary:hover {
    border-color: #94a3b8;
    color: var(--pb-text);
    background: #f8fafc;
}
.pb-surface form .form-check-input { margin-top: 0.2rem; }

/* -- Tab bar in top section-card: wrap to multiple rows with breathing room -- */
.pb-surface .pb-section-card > ul.nav-tabs {
    display: flex;
    flex-wrap: wrap;
    padding: 0.6rem 1.5rem 0.7rem;
    margin: 0.25rem 0 0;
    border-bottom: 1px solid var(--pb-border-light);
    gap: 0.35rem 0.25rem;
}
.pb-surface .pb-section-card > ul.nav-tabs .nav-item { flex: 0 0 auto; margin-bottom: 0; }
.pb-surface .pb-section-card > ul.nav-tabs .nav-link {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.85rem;
    font-size: 0.85rem;
    line-height: 1.2;
}

/* -- Secondary tab bar (payroll-tabs) shared by Employee Details + Opening Balances -- */
.pb-surface .payroll-tabs {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    border-bottom: 1px solid var(--pb-border-light);
    gap: 0.25rem;
}
.pb-surface .payroll-tab {
    padding: 0.65rem 1rem;
    cursor: pointer;
    color: #0C7785;
    font-weight: 500;
    font-size: 0.9rem;
    border-bottom: 3px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
    user-select: none;
}
.pb-surface .payroll-tab:hover { color: #00626f; }
.pb-surface .payroll-tab.active {
    color: var(--pb-text);
    border-bottom-color: #0C7785;
    font-weight: 600;
}
.pb-surface .tab-pane { display: none; }
.pb-surface .tab-pane.show { display: block; }

/* -- Icon-only outline button (compact square) -- */
.pb-surface .pb-btn-outline.pb-btn-icon {
    padding: 0;
    width: 36px;
    height: 36px;
    justify-content: center;
    gap: 0;
}
.pb-surface .pb-btn-outline.pb-btn-icon i { font-size: 1rem; }
.pb-surface .pb-btn-outline.pb-btn-icon.is-disabled,
.pb-surface .pb-btn-outline.pb-btn-icon[aria-disabled="true"] {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
}
.pb-surface .pb-btn-outline:active,
.pb-surface .pb-btn-outline.pb-btn-icon:active {
    background: #f1f5f9;
}

/* Danger variant of icon-only outline button (for delete row actions) */
.pb-surface .pb-btn-outline.pb-btn-icon--danger i { color: #dc2626; }
.pb-surface .pb-btn-outline.pb-btn-icon--danger:hover {
    background: #fef2f2;
    border-color: #fca5a5;
}
.pb-surface .pb-btn-outline.pb-btn-icon--danger:hover i { color: #b91c1c; }

/* -- Normalise legacy `.action-btn` row buttons (edit/delete clusters) --
   Inside .pb-surface, make them render as the standardised outline icon button. */
.pb-surface .action-btn {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
}
.pb-surface .action-btn > a,
.pb-surface .action-btn > form > a,
.pb-surface .action-btn > form > button {
    background: #fff;
    border: 1px solid var(--pb-border);
    border-radius: var(--pb-radius-md);
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--pb-text);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.pb-surface .action-btn.bg-info > a,
.pb-surface .action-btn.bg-info > form > a { color: #0c7785; }
.pb-surface .action-btn.bg-info > a:hover,
.pb-surface .action-btn.bg-info > form > a:hover {
    background: #f0fafb;
    border-color: #94d2d8;
}
.pb-surface .action-btn.bg-danger > a,
.pb-surface .action-btn.bg-danger > form > a,
.pb-surface .action-btn.bg-danger > form > button { color: #dc2626; }
.pb-surface .action-btn.bg-danger > a:hover,
.pb-surface .action-btn.bg-danger > form > a:hover,
.pb-surface .action-btn.bg-danger > form > button:hover {
    background: #fef2f2;
    border-color: #fca5a5;
}
.pb-surface .action-btn i { color: inherit !important; font-size: 1rem; }
.pb-surface .action-btn .text-white { color: inherit !important; }

/* ==========================================================================
 * Wizard (Create Employee flow) — stepper header, one-step-at-a-time body,
 * sticky footer nav. Step visibility is controlled by `.is-active`; JS
 * toggles it per step.
 * ========================================================================== */
.pb-surface .pb-wizard-stepper {
    background: #fff;
    border: 1px solid var(--pb-border-light);
    border-radius: var(--pb-radius-lg);
    box-shadow: var(--pb-shadow-soft);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}
.pb-surface .pb-wizard-steps {
    display: flex;
    align-items: stretch;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}
.pb-surface .pb-wizard-step-item {
    flex: 1 1 0;
    min-width: 140px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    position: relative;
    transition: color 0.15s ease;
}
/* Connecting line between steps */
.pb-surface .pb-wizard-step-item + .pb-wizard-step-item::before {
    content: "";
    position: absolute;
    left: -0.25rem;
    top: 50%;
    width: 0.5rem;
    height: 2px;
    background: var(--pb-border);
    transform: translateY(-50%);
}
.pb-surface .pb-wizard-step-marker {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f1f5f9;
    border: 2px solid var(--pb-border);
    color: var(--pb-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 700;
    font-size: 0.9rem;
    position: relative;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.pb-surface .pb-wizard-step-marker i { font-size: 1.15rem; line-height: 1; }
.pb-surface .pb-wizard-step-marker .pb-wizard-step-num { display: none; }
.pb-surface .pb-wizard-step-text {
    display: inline-flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.pb-surface .pb-wizard-step-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--pb-muted);
    letter-spacing: 0.01em;
    line-height: 1.2;
    transition: color 0.15s ease;
}
.pb-surface .pb-wizard-step-desc {
    font-size: 0.75rem;
    color: var(--pb-muted);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Active step — mint fill, dark green text */
.pb-surface .pb-wizard-step-item.is-active .pb-wizard-step-marker {
    background: var(--pb-tag-bg);
    border-color: var(--pb-tag-text);
    color: var(--pb-tag-text);
    box-shadow: 0 0 0 4px rgba(13, 122, 42, 0.08);
}
.pb-surface .pb-wizard-step-item.is-active .pb-wizard-step-label { color: var(--pb-text); }
/* Completed step — solid mint fill with a check */
.pb-surface .pb-wizard-step-item.is-done .pb-wizard-step-marker {
    background: var(--pb-tag-text);
    border-color: var(--pb-tag-text);
    color: #fff;
}
.pb-surface .pb-wizard-step-item.is-done .pb-wizard-step-marker i::before {
    content: "\ea5e"; /* ti-check */
}
.pb-surface .pb-wizard-step-item.is-done + .pb-wizard-step-item::before,
.pb-surface .pb-wizard-step-item.is-active + .pb-wizard-step-item::before {
    background: var(--pb-tag-text);
}
.pb-surface .pb-wizard-step-item.is-done .pb-wizard-step-label { color: var(--pb-text); }

/* Step card visibility — JS toggles .is-active on exactly one at a time */
.pb-surface .pb-wizard-step { display: none; }
.pb-surface .pb-wizard-step.is-active { display: block; }

/* Footer navigation bar */
.pb-surface .pb-wizard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: #fff;
    border: 1px solid var(--pb-border-light);
    border-radius: var(--pb-radius-lg);
    box-shadow: var(--pb-shadow-soft);
    padding: 0.85rem 1.25rem;
    margin-top: 0.5rem;
}
.pb-surface .pb-wizard-footer .btn { min-width: 120px; }
.pb-surface .pb-wizard-progress {
    font-size: 0.9rem;
    color: var(--pb-muted);
    font-weight: 500;
}
.pb-surface .pb-wizard-progress span { color: var(--pb-text); font-weight: 700; }

.pb-surface .pb-wizard-step.pb-section-card { margin-bottom: 0.75rem; }

/* The Create Employee form re-uses a legacy `.row.justify-content-center > .col-md-8`
   layout that leaves the wizard constrained to ~66 % of the page. Expand it so the
   stepper, step cards, and footer nav all span the full pulsebook content width. */
#employeeForm .row.justify-content-center { justify-content: flex-start !important; margin-left: 0 !important; margin-right: 0 !important; }
#employeeForm .row.justify-content-center > .col-md-8 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Responsive — stack steps vertically at narrow widths */
@media (max-width: 768px) {
    .pb-surface .pb-wizard-steps { flex-direction: column; gap: 0.5rem; }
    .pb-surface .pb-wizard-step-item { min-width: 0; }
    .pb-surface .pb-wizard-step-item + .pb-wizard-step-item::before {
        left: 18px; top: -0.25rem; width: 2px; height: 0.5rem; transform: none;
    }
    .pb-surface .pb-wizard-step-desc { white-space: normal; }
    .pb-surface .pb-wizard-footer { flex-wrap: wrap; justify-content: center; }
    .pb-surface .pb-wizard-footer .btn { flex: 1 1 40%; }
    .pb-surface .pb-wizard-progress { flex: 1 1 100%; text-align: center; order: -1; }
}

/* ==========================================================================
   Settings workspace tab rail (wrapping pill tabs)
   Used by partial.Admin.businessSettingMenu — lives between the hero and the
   page's first pb-section-card. 19 tabs wrap naturally onto a second row;
   no horizontal scroll.
   ========================================================================== */
.pb-surface .pb-settings-tabs {
    position: relative;
    background: #fff;
    border: 1px solid var(--pb-border-light);
    border-radius: var(--pb-radius-xl);
    box-shadow: var(--pb-shadow-soft);
    padding: 0.5rem 0.75rem;
    margin-bottom: 1.5rem;
}
.pb-surface .pb-settings-tabs .nav-tabs {
    border-bottom: none;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
}
.pb-surface .pb-settings-tabs .nav-item { margin: 0; flex: 0 0 auto; }
.pb-surface .pb-settings-tabs .nav-link {
    border: none;
    border-bottom: none;
    color: var(--pb-muted);
    font-weight: 500;
    font-size: 0.88rem;
    padding: 0.6rem 0.95rem;
    background: transparent;
    border-radius: var(--pb-radius-md);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    line-height: 1.2;
    transition: color 0.15s ease, background 0.15s ease;
    white-space: nowrap;
}
.pb-surface .pb-settings-tabs .nav-link > i {
    font-size: 1rem;
    color: var(--pb-muted);
    transition: color 0.15s ease;
}
.pb-surface .pb-settings-tabs .nav-link:hover {
    color: var(--pb-tag-text);
    background: var(--pb-tag-bg);
}
.pb-surface .pb-settings-tabs .nav-link:hover > i { color: var(--pb-tag-text); }
.pb-surface .pb-settings-tabs .nav-link.active {
    color: var(--pb-tag-text);
    background: var(--pb-tag-bg);
    font-weight: 600;
}
.pb-surface .pb-settings-tabs .nav-link.active > i { color: var(--pb-tag-text); }
.pb-surface .pb-settings-tabs .nav-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.08);
}

/* --- pb-primary-btn is an alias of pb-save-btn --- */
/* Kept as a distinct class name for semantic clarity:
     pb-primary-btn  → "+ New" / "Create X" toolbar buttons on list pages
     pb-save-btn     → form commit at the end of a form or modal
   Both share the same visual spec (size, shape, color, states) so the
   workspace carries one unified primary-action treatment. The shared rules
   live in the Action button family block below. */

/* ==========================================================================
   Action button family (pb-save-btn / pb-cancel-btn / pb-danger-btn /
   pb-warning-btn / pb-info-btn)
   App-wide uniform action buttons — works on any page (pulsebook.css is
   loaded globally by layouts/admin.blade.php). One standard size, pill-
   rounded, min-width 140px. Colors vary by semantic intent:
     save    = green  (save, create, update, approve, finalise)
     cancel  = white outline (cancel, close, dismiss)
     danger  = red    (delete, reject, destroy)
     warning = amber  (unlock, override, force)
     info    = blue   (neutral informational action)
   Scoped by namespaced class name so it applies equally inside .pb-surface
   pages, legacy HexaDash pages, and Bootstrap modals.
   ========================================================================== */

/* --- Shared base: size, shape, typography, transition --- */
.pb-save-btn,
.pb-primary-btn,
.pb-cancel-btn,
.pb-danger-btn,
.pb-warning-btn,
.pb-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 140px;
    padding: 0.7rem 1.75rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.2;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease, color 0.15s ease;
    cursor: pointer;
    white-space: nowrap;
}
.pb-save-btn:active,
.pb-primary-btn:active,
.pb-cancel-btn:active,
.pb-danger-btn:active,
.pb-warning-btn:active,
.pb-info-btn:active {
    transform: translateY(1px);
}
.pb-save-btn:disabled,
.pb-primary-btn:disabled,
.pb-cancel-btn:disabled,
.pb-danger-btn:disabled,
.pb-warning-btn:disabled,
.pb-info-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}
.pb-save-btn i,
.pb-primary-btn i,
.pb-cancel-btn i,
.pb-danger-btn i,
.pb-warning-btn i,
.pb-info-btn i {
    font-size: 1rem;
}

/* --- Save / primary / success (green) --- */
.pb-save-btn,
.pb-primary-btn {
    background: #0d7a2a;
    color: #fff;
    border: 1px solid #0d7a2a;
}
.pb-save-btn:hover,
.pb-primary-btn:hover {
    background: #0a5f1f;
    border-color: #0a5f1f;
    color: #fff;
    box-shadow: 0 4px 14px rgba(13, 122, 42, 0.25);
}
.pb-save-btn:focus-visible,
.pb-primary-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(13, 122, 42, 0.22);
}

/* --- Cancel / close (neutral outline) ---
   App-wide: Cancel / Close actions are rendered bigger + wider than other
   pb-* buttons so they present a confident, easy-to-hit dismissal target. */
.pb-cancel-btn {
    background: #fff;
    color: #4b5563;
    border: 1px solid #d1d5db;
    min-width: 170px;
    padding: 0.9rem 2.1rem;
    font-size: 1rem;
}
.pb-cancel-btn:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
    color: #1f2937;
}
.pb-cancel-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.22);
}

/* Legacy Cancel / Close buttons in Bootstrap modal footers — apply the
   pb-cancel-btn look-and-feel without touching every template. */
.modal-footer .btn.btn-light[data-bs-dismiss="modal"],
.modal-footer .btn.btn-outline-secondary[data-bs-dismiss="modal"],
.modal-footer .btn.dark.btn-outline[data-bs-dismiss="modal"],
.modal-footer a.btn.btn-light[href*="cancel"],
.modal-footer a.btn.btn-light[href*="index"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 170px;
    padding: 0.9rem 2.1rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
    background: #fff;
    color: #4b5563;
    border: 1px solid #d1d5db;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.modal-footer .btn.btn-light[data-bs-dismiss="modal"]:hover,
.modal-footer .btn.btn-outline-secondary[data-bs-dismiss="modal"]:hover,
.modal-footer .btn.dark.btn-outline[data-bs-dismiss="modal"]:hover,
.modal-footer a.btn.btn-light[href*="cancel"]:hover,
.modal-footer a.btn.btn-light[href*="index"]:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
    color: #1f2937;
}
.modal-footer .btn.btn-light[data-bs-dismiss="modal"]:focus-visible,
.modal-footer .btn.btn-outline-secondary[data-bs-dismiss="modal"]:focus-visible,
.modal-footer .btn.dark.btn-outline[data-bs-dismiss="modal"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.22);
}

/* Modal header "X" close icon — scale up for easier targeting. */
.modal-header .btn-close,
button.btn-close[data-bs-dismiss="modal"] {
    padding: 0.65rem;
    background-size: 1.15em;
}

/* Other legacy cancel button classes — apply the pb-cancel-btn treatment. */
.app-btn.cancel,
.btn.btn-cancel-template {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 170px;
    padding: 0.9rem 2.1rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
    background: #fff;
    color: #4b5563;
    border: 1px solid #d1d5db;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.app-btn.cancel:hover,
.btn.btn-cancel-template:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
    color: #1f2937;
}

/* --- Danger / destructive (red) --- */
.pb-danger-btn {
    background: #dc2626;
    color: #fff;
    border: 1px solid #dc2626;
}
.pb-danger-btn:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.25);
}
.pb-danger-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.22);
}

/* --- Warning / caution (amber) --- */
.pb-warning-btn {
    background: #d97706;
    color: #fff;
    border: 1px solid #d97706;
}
.pb-warning-btn:hover {
    background: #b45309;
    border-color: #b45309;
    color: #fff;
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.25);
}
.pb-warning-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.22);
}

/* --- Info / neutral (blue) --- */
.pb-info-btn {
    background: #0284c7;
    color: #fff;
    border: 1px solid #0284c7;
}
.pb-info-btn:hover {
    background: #0369a1;
    border-color: #0369a1;
    color: #fff;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.25);
}
.pb-info-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.22);
}

/* ==========================================================================
   Row action cluster (pb-row-actions)
   Outlined icon buttons used in the last column of listing tables for
   edit / delete / other row-scoped verbs. Replaces the legacy HexaDash
   .action-btn .bg-info / .bg-danger filled-circle pattern.
   ========================================================================== */
.pb-surface .pb-row-actions {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    justify-content: flex-end;
}
.pb-surface .pb-row-actions form { margin: 0; display: inline-flex; }
.pb-surface .pb-row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--pb-radius-md);
    border: 1px solid var(--pb-border);
    background: #fff;
    color: var(--pb-muted);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    padding: 0;
}
.pb-surface .pb-row-action i { font-size: 1rem; color: inherit; }
.pb-surface .pb-row-action:hover {
    color: var(--pb-text);
    border-color: var(--pb-text);
    background: #fff;
}
.pb-surface .pb-row-action:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.08);
}
.pb-surface .pb-row-action--danger:hover {
    color: #b91c1c;
    border-color: #dc2626;
    background: #fef2f2;
}
.pb-surface .pb-row-action--danger:focus-visible {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
}

/* =====================================================================
 * Business Settings — two-pane shell (left nav + right content)
 * Activated by adding the .pb-surface--shell modifier to .pb-surface
 * (the businessSettingMenu partial does this via JS on insert).
 * ===================================================================== */
.pb-surface.pb-surface--shell {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    column-gap: 1.5rem;
    row-gap: 0;
    align-items: start;
}
.pb-surface.pb-surface--shell > * { grid-column: 2; }
.pb-surface.pb-surface--shell > .pb-hero { grid-column: 1 / -1; }
.pb-surface.pb-surface--shell > .pb-settings-nav { grid-column: 1; grid-row: 2 / span 999; }
.pb-surface.pb-surface--shell > .pb-settings-mobile-bar { grid-column: 1 / -1; }

/* Hide the legacy horizontal tab strip when present inside the shell */
.pb-surface.pb-surface--shell .pb-settings-tabs { display: none !important; }

/* Hide profile sub-tabs (Account / Features / Company / Address / Statutory)
   inner Bootstrap nav — the new left-nav drives these instead. */
.pb-surface.pb-surface--shell #profile-tabs { display: none !important; }
.pb-surface.pb-surface--shell #profile-tabs-content > .tab-pane {
    /* Bootstrap toggles .show .active — keep that, just remove top spacing */
    border: 0;
}

/* ----- Left-nav sidebar ----- */
.pb-surface .pb-settings-nav {
    position: sticky;
    top: 1rem;
    background: #fff;
    border: 1px solid var(--pb-border-light);
    border-radius: var(--pb-radius-lg);
    box-shadow: var(--pb-shadow-soft);
    padding: 0.75rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    align-self: start;
}
.pb-surface .pb-settings-nav-search {
    position: relative;
    margin-bottom: 0.6rem;
}
.pb-surface .pb-settings-nav-search input {
    width: 100%;
    border: 1px solid var(--pb-border);
    border-radius: var(--pb-radius-md);
    padding: 0.5rem 0.7rem 0.5rem 2.1rem;
    font-size: 0.85rem;
    background: #fafbfc;
    color: var(--pb-text);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.pb-surface .pb-settings-nav-search input:focus {
    outline: none;
    border-color: #0c7785;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(12, 119, 133, 0.12);
}
.pb-surface .pb-settings-nav-search i {
    position: absolute;
    left: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--pb-muted);
    font-size: 1rem;
}

.pb-surface .pb-nav-group {
    margin: 0;
    padding: 0;
    border: 0;
}
.pb-surface .pb-nav-group + .pb-nav-group { margin-top: 0.25rem; }
.pb-surface .pb-nav-group > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pb-muted);
    border-radius: var(--pb-radius-sm);
    user-select: none;
    transition: background 0.12s ease, color 0.12s ease;
}
.pb-surface .pb-nav-group > summary::-webkit-details-marker { display: none; }
.pb-surface .pb-nav-group > summary::marker { content: ''; }
.pb-surface .pb-nav-group > summary:hover { background: #f5f7fa; color: var(--pb-text); }
.pb-surface .pb-nav-group > summary i.pb-nav-group-icon { font-size: 1rem; color: #0c7785; }
.pb-surface .pb-nav-group > summary .pb-nav-group-chevron {
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--pb-muted);
    transition: transform 0.15s ease;
}
.pb-surface .pb-nav-group[open] > summary .pb-nav-group-chevron { transform: rotate(90deg); }

.pb-surface .pb-nav-items {
    list-style: none;
    padding: 0.15rem 0 0.4rem;
    margin: 0;
}
.pb-surface .pb-nav-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.65rem 0.45rem 2.05rem;
    font-size: 0.85rem;
    color: var(--pb-text);
    border-radius: var(--pb-radius-sm);
    text-decoration: none;
    line-height: 1.3;
    transition: background 0.12s ease, color 0.12s ease;
    border-left: 2px solid transparent;
}
.pb-surface .pb-nav-item:hover {
    background: #f1f5f9;
    color: var(--pb-text);
    text-decoration: none;
}
.pb-surface .pb-nav-item.is-active {
    background: rgba(12, 119, 133, 0.10);
    color: #0c7785;
    border-left-color: #0c7785;
    font-weight: 600;
}
.pb-surface .pb-nav-item i { font-size: 0.95rem; opacity: 0.85; }
.pb-surface .pb-nav-item.is-hidden { display: none; }
.pb-surface .pb-nav-empty {
    padding: 0.5rem 0.65rem;
    font-size: 0.8rem;
    color: var(--pb-muted);
    font-style: italic;
}

/* ----- Mobile dropdown selector (under 768px) ----- */
.pb-surface .pb-settings-mobile-bar { display: none; margin-bottom: 1rem; }
@media (max-width: 767px) {
    .pb-surface.pb-surface--shell {
        grid-template-columns: 1fr;
    }
    .pb-surface.pb-surface--shell > .pb-settings-nav { display: none; grid-column: 1 / -1; }
    .pb-surface.pb-surface--shell.pb-shell-mobile-open > .pb-settings-nav {
        display: block;
        position: relative;
        max-height: 60vh;
    }
    .pb-surface.pb-surface--shell > .pb-settings-mobile-bar {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        background: #fff;
        border: 1px solid var(--pb-border-light);
        border-radius: var(--pb-radius-md);
        padding: 0.6rem 0.75rem;
        box-shadow: var(--pb-shadow-soft);
    }
    .pb-surface .pb-settings-mobile-toggle {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        background: transparent;
        border: 0;
        padding: 0;
        font-size: 0.9rem;
        color: var(--pb-text);
        font-weight: 500;
        text-align: left;
    }
    .pb-surface .pb-settings-mobile-toggle i { color: #0c7785; }
    .pb-surface .pb-settings-mobile-toggle .pb-mobile-chevron {
        margin-left: auto;
        color: var(--pb-muted);
        transition: transform 0.15s ease;
    }
    .pb-surface.pb-shell-mobile-open .pb-settings-mobile-toggle .pb-mobile-chevron {
        transform: rotate(180deg);
    }
}

/* =====================================================================
 * Modal forms — bank file format configuration & similar guided forms.
 * Scoped to .pb-bank-form so other modal forms remain unchanged.
 * ===================================================================== */
.pb-bank-form .pb-form-body {
    padding: 1.25rem 1.5rem;
}
.pb-bank-form .pb-form-banner {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    background: linear-gradient(135deg, #f2fbf5 0%, #e8f5ee 100%);
    border: 1px solid rgba(12, 119, 133, 0.18);
    border-radius: 10px;
    margin-bottom: 1.25rem;
}
.pb-bank-form .pb-form-banner-icon {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0c7785;
    flex: 0 0 auto;
    box-shadow: 0 1px 3px rgba(12, 119, 133, 0.10);
}
.pb-bank-form .pb-form-banner-icon i { font-size: 1.35rem; }
.pb-bank-form .pb-form-banner-body { min-width: 0; flex: 1 1 auto; }
.pb-bank-form .pb-form-banner-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #0A0A0A;
    line-height: 1.25;
}
.pb-bank-form .pb-form-banner-meta {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}
.pb-bank-form .pb-form-banner-meta code {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(12, 119, 133, 0.18);
    border-radius: 4px;
    padding: 0.05rem 0.35rem;
    font-size: 0.7rem;
    color: #0c7785;
}
.pb-bank-form .pb-form-banner-dot { color: #cbd5e1; }

.pb-bank-form .pb-form-section {
    padding: 1rem 1rem 0.5rem;
    background: #fff;
    border: 1px solid #F1F2F6;
    border-radius: 10px;
    margin-bottom: 1rem;
}
.pb-bank-form .pb-form-section:last-child { margin-bottom: 0; }
.pb-bank-form .pb-form-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin: 0 0 0.85rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #F1F2F6;
}

.pb-bank-form .form-group { margin-bottom: 0.85rem; }
.pb-bank-form .form-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #0A0A0A;
    margin-bottom: 0.35rem;
}
.pb-bank-form .form-control,
.pb-bank-form .form-select {
    border: 1px solid #E3E6EF;
    border-radius: 8px;
    padding: 0.55rem 0.7rem;
    font-size: 0.88rem;
    color: #0A0A0A;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pb-bank-form .form-control:focus,
.pb-bank-form .form-select:focus {
    outline: none;
    border-color: #0c7785;
    box-shadow: 0 0 0 3px rgba(12, 119, 133, 0.12);
}
.pb-bank-form .form-control::placeholder { color: #9CA3AF; }
.pb-bank-form .form-control[readonly] {
    background: #F8FAFC;
    color: #475569;
    cursor: not-allowed;
}
.pb-bank-form .form-text {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.72rem;
    color: #6b7280;
    line-height: 1.45;
}

.pb-bank-form .pb-locked-field {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #F8FAFC;
    border: 1px solid #E3E6EF;
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    font-size: 0.88rem;
    color: #0A0A0A;
    width: 100%;
}
.pb-bank-form .pb-locked-field > i { color: #0c7785; font-size: 0.95rem; }
.pb-bank-form .pb-locked-field > span { font-weight: 500; }
.pb-bank-form .pb-locked-tag {
    margin-left: auto;
    background: #fff;
    border: 1px solid #E3E6EF;
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #475569;
    letter-spacing: 0.02em;
}

/* ----- Shared address-lookup dropdown (PulseAddressLookup) -----
   Rendered as a sibling of any .pb-ac-wrap input so it inherits the
   host container's stacking context. No more z-index battles with
   modals or sticky headers. */
.pac-container { z-index: 1080 !important; } /* legacy fallback only */
.pb-ac-wrap { position: relative; }
.pb-ac-list {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 1090;
    max-height: 260px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #d6d8dc;
    border-radius: 6px;
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.12);
    padding: 4px 0;
}
.pb-ac-item {
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
    line-height: 1.35;
}
.pb-ac-item small { display: block; color: #6c757d; font-size: 11px; }
.pb-ac-item:hover, .pb-ac-item.is-active { background: #f1f5f9; }
.pb-ac-empty { padding: 8px 12px; color: #6c757d; font-size: 12px; }
/* Marks a precise (house-number / building / POI) match vs a broad area. */
.pb-ac-exact {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    color: #15803d;
    background: #dcfce7;
    border-radius: 999px;
    vertical-align: middle;
}