/*
 * HelpAlong Staff Portal — Professional experience layer (v2.6.0)
 * Presentation only. Every selector is scoped to the Staff Portal page.
 */

body.hasp-staff-portal-page {
    --hasp-pink: #d60072;
    --hasp-blue: #078fbd;
    --hasp-navy: #15233f;
    --hasp-bg: #f3f6fa;
    --hasp-surface: #ffffff;
    --hasp-surface-soft: #f8fafc;
    --hasp-border: #dfe5ed;
    --hasp-border-strong: #cbd5e1;
    --hasp-text: #26344d;
    --hasp-muted: #66758b;
    --hasp-radius: 14px;
    --hasp-shadow: 0 8px 24px rgba(21, 35, 63, .065);
    --hasp-shadow-raised: 0 14px 34px rgba(21, 35, 63, .11);
    background: var(--hasp-bg);
    color: var(--hasp-text);
}

body.hasp-staff-portal-page .hasp-shell {
    color: var(--hasp-text);
    background: var(--hasp-bg);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.hasp-staff-portal-page .hasp-shell a,
body.hasp-staff-portal-page .hasp-shell button,
body.hasp-staff-portal-page .hasp-shell input,
body.hasp-staff-portal-page .hasp-shell select,
body.hasp-staff-portal-page .hasp-shell textarea {
    font-family: inherit;
}

body.hasp-staff-portal-page .hasp-shell h2,
body.hasp-staff-portal-page .hasp-shell h3,
body.hasp-staff-portal-page .hasp-shell h4 {
    color: var(--hasp-navy);
    letter-spacing: -.018em;
}

body.hasp-staff-portal-page .hasp-shell h2 {
    font-size: clamp(1.45rem, 1.8vw, 1.8rem);
    line-height: 1.2;
}

body.hasp-staff-portal-page .hasp-shell h3 {
    font-size: 1.05rem;
    line-height: 1.3;
}

body.hasp-staff-portal-page .hasp-shell p {
    line-height: 1.6;
}

/* Portal chrome */
body.hasp-staff-portal-page .hasp-sidebar {
    padding: 22px 14px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 16px;
    background: linear-gradient(180deg, #172541 0%, #111c34 100%);
    box-shadow: 8px 0 28px rgba(15, 27, 50, .09);
}

body.hasp-staff-portal-page .hasp-logo {
    padding: 0 8px 20px;
}

body.hasp-staff-portal-page .hasp-logo > span {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(214, 0, 114, .22);
}

body.hasp-staff-portal-page .hasp-logo strong {
    font-size: 16px;
    letter-spacing: -.01em;
}

body.hasp-staff-portal-page .hasp-logo small {
    margin-top: 3px;
    color: #aebbd0;
    font-size: 11px;
}

body.hasp-staff-portal-page .hasp-sidebar nav {
    gap: 4px;
    padding: 16px 0;
}

body.hasp-staff-portal-page .hasp-nav-group-label {
    margin: 16px 10px 5px;
    color: #8fa0ba;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
    line-height: 1.4;
    text-transform: uppercase;
}

body.hasp-staff-portal-page .hasp-sidebar nav a {
    min-height: 42px;
    gap: 11px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #c9d3e2;
    font-size: 12.5px;
    font-weight: 650;
    line-height: 1.3;
}

body.hasp-staff-portal-page .hasp-sidebar nav a:hover {
    border-color: rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .075);
    color: #fff;
}

body.hasp-staff-portal-page .hasp-sidebar nav a.is-active {
    border-color: rgba(255, 255, 255, .1);
    background: linear-gradient(90deg, rgba(214, 0, 114, .22), rgba(255, 255, 255, .09));
    box-shadow: inset 3px 0 #f03a9f;
    color: #fff;
}

body.hasp-staff-portal-page .hasp-sidebar nav .dashicons {
    width: 18px;
    height: 18px;
    font-size: 18px;
}

body.hasp-staff-portal-page .hasp-user {
    padding: 16px 6px 2px;
    border-top-color: rgba(255, 255, 255, .1);
}

body.hasp-staff-portal-page .hasp-user strong {
    color: #fff;
    font-size: 12px;
}

body.hasp-staff-portal-page .hasp-user small {
    margin-top: 2px;
    color: #aab7ca;
    font-size: 10px;
}

body.hasp-staff-portal-page .hasp-main {
    padding-bottom: 54px;
}

body.hasp-staff-portal-page .hasp-topbar {
    min-height: 70px;
    margin-bottom: 20px;
    padding: 9px 4px;
    border-bottom: 1px solid rgba(203, 213, 225, .8);
    background: rgba(243, 246, 250, .94);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}

body.hasp-staff-portal-page .hasp-topbar h1 {
    font-size: 23px;
    font-weight: 780;
    letter-spacing: -.025em;
}

body.hasp-staff-portal-page .hasp-topbar p {
    margin-top: 3px;
    color: var(--hasp-muted);
    font-size: 11.5px;
}

/* Universal controls */
body.hasp-staff-portal-page .hasp-btn {
    min-height: 39px;
    padding: 9px 14px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.25;
    box-shadow: none;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}

body.hasp-staff-portal-page .hasp-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 7px 16px rgba(21, 35, 63, .1);
}

body.hasp-staff-portal-page .hasp-btn--primary {
    border-color: #c9006a;
    background: linear-gradient(135deg, #df087d, #c9006a);
    color: #fff;
}

body.hasp-staff-portal-page .hasp-btn--dark {
    border-color: #15233f;
    background: #15233f;
    color: #fff;
}

body.hasp-staff-portal-page .hasp-btn--light,
body.hasp-staff-portal-page .hasp-btn:not([class*="hasp-btn--"]) {
    border-color: var(--hasp-border-strong);
    background: #fff;
    color: var(--hasp-navy);
}

body.hasp-staff-portal-page .hasp-btn--danger {
    border-color: #efb4b4 !important;
    background: #fff !important;
    color: #a61b1b !important;
}

body.hasp-staff-portal-page .hasp-btn--success {
    border-color: #087443;
    background: #087443;
    color: #fff;
}

body.hasp-staff-portal-page .hasp-btn--small {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 11px;
}

body.hasp-staff-portal-page .hasp-shell input,
body.hasp-staff-portal-page .hasp-shell select,
body.hasp-staff-portal-page .hasp-shell textarea {
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid var(--hasp-border-strong);
    border-radius: 9px;
    background: #fff;
    color: var(--hasp-text);
    font-size: 13px;
    line-height: 1.4;
    box-shadow: 0 1px 2px rgba(21, 35, 63, .025);
}

body.hasp-staff-portal-page .hasp-shell textarea {
    min-height: 110px;
    resize: vertical;
}

body.hasp-staff-portal-page .hasp-shell input:hover,
body.hasp-staff-portal-page .hasp-shell select:hover,
body.hasp-staff-portal-page .hasp-shell textarea:hover {
    border-color: #aebac9;
}

body.hasp-staff-portal-page .hasp-shell input:focus,
body.hasp-staff-portal-page .hasp-shell select:focus,
body.hasp-staff-portal-page .hasp-shell textarea:focus {
    border-color: var(--hasp-blue);
    outline: 3px solid rgba(7, 143, 189, .14);
    box-shadow: none;
}

body.hasp-staff-portal-page .hasp-shell label:not(.hasp-check):not(.hasp-cap-card):not(.hasp-setting-toggle) {
    color: var(--hasp-navy);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
}

body.hasp-staff-portal-page .hasp-shell label > small {
    display: block;
    margin-top: 5px;
    color: var(--hasp-muted);
    font-size: 11px;
    font-weight: 500;
}

body.hasp-staff-portal-page .hasp-field {
    margin-bottom: 16px;
}

body.hasp-staff-portal-page .hasp-field > label,
body.hasp-staff-portal-page .hasp-field > span,
body.hasp-staff-portal-page form > label:not(.hasp-check) {
    display: block;
    margin-bottom: 6px;
}

body.hasp-staff-portal-page .hasp-check {
    min-height: 34px;
    gap: 9px;
    color: var(--hasp-text);
    font-size: 12.5px;
    line-height: 1.45;
}

body.hasp-staff-portal-page .hasp-check input,
body.hasp-staff-portal-page input[type="checkbox"],
body.hasp-staff-portal-page input[type="radio"] {
    width: 17px !important;
    min-width: 17px;
    height: 17px;
    min-height: 17px;
    margin: 0;
    accent-color: var(--hasp-pink);
}

body.hasp-staff-portal-page .hasp-form-grid {
    gap: 16px;
}

body.hasp-staff-portal-page .hasp-workplace-form,
body.hasp-staff-portal-page .hasp-settings-form,
body.hasp-staff-portal-page .hasp-workspace > .hasp-form {
    padding: 22px;
    border: 1px solid var(--hasp-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--hasp-shadow);
}

body.hasp-staff-portal-page .hasp-form-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--hasp-border);
}

body.hasp-staff-portal-page .hasp-help,
body.hasp-staff-portal-page .hasp-editor-help {
    color: var(--hasp-muted);
    font-size: 11.5px;
    line-height: 1.55;
}

/* Panels, headings and messages */
body.hasp-staff-portal-page .hasp-panel {
    padding: 21px;
    border: 1px solid var(--hasp-border);
    border-radius: 14px;
    background: var(--hasp-surface);
    box-shadow: var(--hasp-shadow);
}

body.hasp-staff-portal-page .hasp-panel-head {
    gap: 16px;
    margin-bottom: 16px;
}

body.hasp-staff-portal-page .hasp-panel-head h2,
body.hasp-staff-portal-page .hasp-panel-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 780;
}

body.hasp-staff-portal-page .hasp-panel-head p {
    margin: 4px 0 0;
    color: var(--hasp-muted);
    font-size: 11.5px;
    line-height: 1.45;
}

body.hasp-staff-portal-page .hasp-alert,
body.hasp-staff-portal-page .hasp-notice {
    padding: 13px 15px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 12.5px;
    line-height: 1.5;
}

body.hasp-staff-portal-page .hasp-alert--success {
    border-color: #b8e2ca;
    background: #ecf9f1;
    color: #17633d;
}

body.hasp-staff-portal-page .hasp-alert--error,
body.hasp-staff-portal-page .hasp-notice--error {
    border-color: #f3c2cb;
    background: #fff3f5;
    color: #92233b;
}

body.hasp-staff-portal-page .hasp-alert--warning {
    border-color: #efd392;
    background: #fff9e8;
    color: #765210;
}

body.hasp-staff-portal-page .hasp-alert--info {
    border-color: #bed7e8;
    background: #f1f8fc;
    color: #294d66;
}

body.hasp-staff-portal-page .hasp-status,
body.hasp-staff-portal-page .hasp-app-status,
body.hasp-staff-portal-page .hasp-enq-priority,
body.hasp-staff-portal-page .hasp-audit-result {
    min-height: 25px;
    align-items: center;
    padding: 5px 9px;
    border: 1px solid rgba(82, 97, 116, .1);
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

body.hasp-staff-portal-page .hasp-eyebrow {
    color: var(--hasp-pink);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .1em;
    line-height: 1.4;
    text-transform: uppercase;
}

body.hasp-staff-portal-page .hasp-empty {
    padding: 36px 22px;
    color: var(--hasp-muted);
    font-size: 12.5px;
}

body.hasp-staff-portal-page .hasp-empty--large,
body.hasp-staff-portal-page .hasp-enq-empty {
    min-height: 300px;
    padding: 54px 24px;
}

body.hasp-staff-portal-page .hasp-empty h3 {
    font-size: 16px;
}

body.hasp-staff-portal-page .hasp-empty p {
    margin-top: 5px;
    font-size: 12px;
}

/* Tables */
body.hasp-staff-portal-page .hasp-table-wrap,
body.hasp-staff-portal-page .hasp-audit-table-wrap,
body.hasp-staff-portal-page .hasp-newsletter-engagement-table-wrap {
    border: 1px solid var(--hasp-border);
    border-radius: 11px;
    background: #fff;
    overflow-x: auto;
    box-shadow: 0 2px 8px rgba(21, 35, 63, .025);
}

body.hasp-staff-portal-page .hasp-table-wrap table,
body.hasp-staff-portal-page table.hasp-table,
body.hasp-staff-portal-page table.hasp-audit-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--hasp-text);
    font-size: 12.5px;
}

body.hasp-staff-portal-page .hasp-table-wrap th,
body.hasp-staff-portal-page .hasp-table th,
body.hasp-staff-portal-page .hasp-audit-table th {
    padding: 11px 13px;
    border-bottom: 1px solid var(--hasp-border);
    background: #f7f9fc;
    color: #5c6b80;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .055em;
    line-height: 1.35;
    text-align: left;
    text-transform: uppercase;
}

body.hasp-staff-portal-page .hasp-table-wrap td,
body.hasp-staff-portal-page .hasp-table td,
body.hasp-staff-portal-page .hasp-audit-table td {
    padding: 13px;
    border-bottom: 1px solid #e9edf3;
    background: #fff;
    line-height: 1.45;
    vertical-align: middle;
}

body.hasp-staff-portal-page .hasp-table-wrap tbody tr:last-child td,
body.hasp-staff-portal-page .hasp-table tbody tr:last-child td {
    border-bottom: 0;
}

body.hasp-staff-portal-page .hasp-table-wrap tbody tr:hover td,
body.hasp-staff-portal-page .hasp-table tbody tr:hover td {
    background: #fbfdff;
}

body.hasp-staff-portal-page .hasp-table td small,
body.hasp-staff-portal-page .hasp-audit-table td small {
    margin-top: 3px;
    color: var(--hasp-muted);
    font-size: 10.5px;
}

/* Shared page introductions */
body.hasp-staff-portal-page .hasp-dash-hero,
body.hasp-staff-portal-page .hasp-content-hero,
body.hasp-staff-portal-page .hasp-enq-hero,
body.hasp-staff-portal-page .hasp-app-hero,
body.hasp-staff-portal-page .hasp-settings-hero,
body.hasp-staff-portal-page .hasp-audit-hero,
body.hasp-staff-portal-page .hasp-builder-hero {
    min-height: 112px;
    padding: 21px 23px;
    border: 1px solid var(--hasp-border);
    border-radius: 16px;
    background: linear-gradient(135deg, #fff 0%, #f4fbfe 64%, #fff6fa 100%);
    box-shadow: var(--hasp-shadow);
}

body.hasp-staff-portal-page .hasp-dash-hero h2,
body.hasp-staff-portal-page .hasp-content-hero h2,
body.hasp-staff-portal-page .hasp-enq-hero h2,
body.hasp-staff-portal-page .hasp-app-hero h2,
body.hasp-staff-portal-page .hasp-settings-hero h2,
body.hasp-staff-portal-page .hasp-audit-hero h2,
body.hasp-staff-portal-page .hasp-builder-hero h2 {
    margin: 4px 0 7px;
    font-size: clamp(1.45rem, 1.8vw, 1.75rem);
    line-height: 1.18;
}

body.hasp-staff-portal-page .hasp-dash-hero p,
body.hasp-staff-portal-page .hasp-content-hero p,
body.hasp-staff-portal-page .hasp-enq-hero p,
body.hasp-staff-portal-page .hasp-app-hero p,
body.hasp-staff-portal-page .hasp-settings-hero p,
body.hasp-staff-portal-page .hasp-audit-hero p,
body.hasp-staff-portal-page .hasp-builder-hero p {
    margin: 0;
    color: var(--hasp-muted);
    font-size: 12.5px;
    line-height: 1.55;
}

body.hasp-staff-portal-page .hasp-workspace,
body.hasp-staff-portal-page .hasp-workplace,
body.hasp-staff-portal-page .hasp-reimbursements,
body.hasp-staff-portal-page .hasp-notifications,
body.hasp-staff-portal-page .hasp-content-workspace,
body.hasp-staff-portal-page .hasp-applications-page,
body.hasp-staff-portal-page .hasp-enq-workspace,
body.hasp-staff-portal-page .hasp-audit-workspace,
body.hasp-staff-portal-page .hasp-settings-workspace,
body.hasp-staff-portal-page .hasp-newsletters {
    gap: 18px;
}

body.hasp-staff-portal-page .hasp-workspace > .hasp-section-head,
body.hasp-staff-portal-page .hasp-workplace > .hasp-section-head,
body.hasp-staff-portal-page .hasp-reimbursements > .hasp-section-head,
body.hasp-staff-portal-page .hasp-notifications > .hasp-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 0 0 18px;
    padding: 19px 21px;
    border: 1px solid var(--hasp-border);
    border-radius: 14px;
    background: linear-gradient(135deg, #fff, #f7fbfd);
    box-shadow: var(--hasp-shadow);
}

body.hasp-staff-portal-page .hasp-section-head h2 {
    margin: 0 0 4px;
    font-size: 23px;
}

body.hasp-staff-portal-page .hasp-section-head p {
    margin: 0;
    color: var(--hasp-muted);
    font-size: 12px;
}

/* Dashboard */
body.hasp-staff-portal-page .hasp-dash-kpis {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin: 17px 0 19px;
}

body.hasp-staff-portal-page .hasp-dash-kpi {
    min-height: 116px;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--hasp-border);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 5px 16px rgba(21, 35, 63, .045);
}

body.hasp-staff-portal-page .hasp-dash-kpi > .dashicons {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    font-size: 20px;
}

body.hasp-staff-portal-page .hasp-dash-kpi small {
    font-size: 10px;
    letter-spacing: .045em;
    line-height: 1.3;
}

body.hasp-staff-portal-page .hasp-dash-kpi strong {
    margin-top: 3px;
    font-size: 27px;
}

body.hasp-staff-portal-page .hasp-dash-kpi em {
    margin-top: 5px;
    color: var(--hasp-muted);
    font-size: 10.5px;
    line-height: 1.35;
}

body.hasp-staff-portal-page .hasp-dash-layout {
    grid-template-columns: minmax(0, 1.65fr) minmax(320px, .8fr);
    gap: 18px;
}

body.hasp-staff-portal-page .hasp-dash-main,
body.hasp-staff-portal-page .hasp-dash-side {
    gap: 18px;
}

body.hasp-staff-portal-page .hasp-dash-action-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

body.hasp-staff-portal-page .hasp-dash-action-grid a {
    min-height: 72px;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 3px 11px;
    padding: 13px;
    border-radius: 10px;
}

body.hasp-staff-portal-page .hasp-dash-action-grid .dashicons {
    width: 38px;
    height: 38px;
}

body.hasp-staff-portal-page .hasp-dash-action-grid strong,
body.hasp-staff-portal-page .hasp-activity-list strong,
body.hasp-staff-portal-page .hasp-dash-feed strong,
body.hasp-staff-portal-page .hasp-site-health strong {
    font-size: 12.5px;
}

body.hasp-staff-portal-page .hasp-dash-action-grid small,
body.hasp-staff-portal-page .hasp-activity-list small,
body.hasp-staff-portal-page .hasp-dash-feed small,
body.hasp-staff-portal-page .hasp-site-health small {
    font-size: 10.5px;
    line-height: 1.4;
}

body.hasp-staff-portal-page .hasp-activity-list > a,
body.hasp-staff-portal-page .hasp-dash-feed > a {
    min-height: 58px;
    padding: 11px 2px;
}

body.hasp-staff-portal-page .hasp-site-health li {
    padding: 11px 0;
}

/* Website content lists and editors */
body.hasp-staff-portal-page .hasp-content-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px;
}

body.hasp-staff-portal-page .hasp-content-kpis > a {
    min-height: 70px;
    padding: 13px 15px;
    border-radius: 11px;
}

body.hasp-staff-portal-page .hasp-content-kpis small {
    font-size: 11px;
}

body.hasp-staff-portal-page .hasp-content-kpis strong {
    font-size: 23px;
}

body.hasp-staff-portal-page .hasp-content-list {
    padding: 0;
    overflow: hidden;
}

body.hasp-staff-portal-page .hasp-content-toolbar,
body.hasp-staff-portal-page .hasp-app-toolbar,
body.hasp-staff-portal-page .hasp-enq-toolbar,
body.hasp-staff-portal-page .hasp-audit-filters,
body.hasp-staff-portal-page .hasp-report-filters,
body.hasp-staff-portal-page .hasp-filterbar {
    gap: 11px;
    padding: 15px 16px;
    border: 1px solid var(--hasp-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(21, 35, 63, .035);
}

body.hasp-staff-portal-page .hasp-content-list .hasp-content-toolbar {
    border-width: 0 0 1px;
    border-radius: 0;
    box-shadow: none;
}

body.hasp-staff-portal-page .hasp-content-toolbar label > span,
body.hasp-staff-portal-page .hasp-app-toolbar label > span,
body.hasp-staff-portal-page .hasp-enq-toolbar label > span,
body.hasp-staff-portal-page .hasp-audit-filters label {
    font-size: 10px;
    letter-spacing: .06em;
}

body.hasp-staff-portal-page .hasp-content-list-head {
    padding: 17px 18px 9px;
}

body.hasp-staff-portal-page .hasp-content-list-head h3 {
    font-size: 15px;
}

body.hasp-staff-portal-page .hasp-content-list-head p {
    font-size: 11px;
}

body.hasp-staff-portal-page .hasp-content-cards {
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 14px;
    padding: 13px 18px 19px;
}

body.hasp-staff-portal-page .hasp-content-card {
    grid-template-rows: 145px minmax(0, 1fr);
    border-radius: 13px;
    box-shadow: 0 4px 14px rgba(21, 35, 63, .035);
}

body.hasp-staff-portal-page .hasp-content-card > img,
body.hasp-staff-portal-page .hasp-content-placeholder {
    height: 145px;
}

body.hasp-staff-portal-page .hasp-content-card-body {
    padding: 15px;
}

body.hasp-staff-portal-page .hasp-content-card-top small {
    font-size: 10.5px;
}

body.hasp-staff-portal-page .hasp-content-card h3 {
    margin: 10px 0 6px;
    font-size: 15px;
}

body.hasp-staff-portal-page .hasp-content-card p {
    margin-bottom: 13px;
    font-size: 11.5px;
    line-height: 1.55;
}

body.hasp-staff-portal-page .hasp-content-card-actions {
    gap: 7px;
    padding-top: 11px;
}

body.hasp-staff-portal-page .hasp-content-card-actions .hasp-btn {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 10.5px;
}

body.hasp-staff-portal-page .hasp-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
}

body.hasp-staff-portal-page .hasp-pagination,
body.hasp-staff-portal-page .hasp-app-pagination,
body.hasp-staff-portal-page .hasp-enq-pagination {
    gap: 6px;
    padding: 10px 16px 18px;
}

body.hasp-staff-portal-page .hasp-pagination a,
body.hasp-staff-portal-page .hasp-app-pagination a,
body.hasp-staff-portal-page .hasp-enq-pagination a {
    min-width: 34px;
    height: 34px;
    border-radius: 8px;
    font-size: 11px;
}

body.hasp-staff-portal-page .hasp-editor--modern {
    gap: 16px;
}

body.hasp-staff-portal-page .hasp-editor--modern .hasp-editor-head {
    padding: 21px 23px;
    border-radius: 15px;
    box-shadow: var(--hasp-shadow);
}

body.hasp-staff-portal-page .hasp-editor--modern .hasp-editor-head h2 {
    font-size: 26px;
}

body.hasp-staff-portal-page .hasp-editor--modern .hasp-editor-head p,
body.hasp-staff-portal-page .hasp-back-link {
    font-size: 11.5px;
}

body.hasp-staff-portal-page .hasp-editor-grid {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 350px);
    gap: 18px;
}

body.hasp-staff-portal-page .hasp-editor-fields {
    padding: 21px;
}

body.hasp-staff-portal-page .hasp-editor-fields .hasp-field {
    margin-bottom: 18px;
    padding-bottom: 18px;
}

/* Enquiries */
body.hasp-staff-portal-page .hasp-enq-kpis,
body.hasp-staff-portal-page .hasp-app-kpis,
body.hasp-staff-portal-page .hasp-notification-kpis,
body.hasp-staff-portal-page .hasp-audit-stats {
    gap: 11px;
}

body.hasp-staff-portal-page .hasp-enq-kpi,
body.hasp-staff-portal-page .hasp-app-kpi {
    min-height: 70px;
    padding: 13px 14px;
    border-radius: 11px;
    box-shadow: 0 3px 12px rgba(21, 35, 63, .035);
}

body.hasp-staff-portal-page .hasp-enq-kpi span,
body.hasp-staff-portal-page .hasp-app-kpi span {
    font-size: 10.5px;
    line-height: 1.35;
}

body.hasp-staff-portal-page .hasp-enq-kpi strong,
body.hasp-staff-portal-page .hasp-app-kpi strong {
    font-size: 23px;
}

body.hasp-staff-portal-page .hasp-enq-grid {
    grid-template-columns: minmax(360px, 410px) minmax(0, 1fr);
    gap: 18px;
}

body.hasp-staff-portal-page .hasp-enq-list-panel,
body.hasp-staff-portal-page .hasp-app-list-panel {
    padding: 0;
    overflow: hidden;
}

body.hasp-staff-portal-page .hasp-enq-list-head,
body.hasp-staff-portal-page .hasp-app-list-panel .hasp-panel-head {
    padding: 17px 18px 13px;
}

body.hasp-staff-portal-page .hasp-enq-card,
body.hasp-staff-portal-page .hasp-app-candidate {
    min-height: 78px;
    padding: 13px 15px;
}

body.hasp-staff-portal-page .hasp-enq-card strong,
body.hasp-staff-portal-page .hasp-app-candidate-top strong {
    font-size: 12.5px;
}

body.hasp-staff-portal-page .hasp-enq-card small,
body.hasp-staff-portal-page .hasp-app-candidate small,
body.hasp-staff-portal-page .hasp-app-meta {
    font-size: 10.5px;
}

body.hasp-staff-portal-page .hasp-enq-card-foot,
body.hasp-staff-portal-page .hasp-app-profile-main span {
    color: var(--hasp-muted);
    font-size: 10.5px;
    line-height: 1.4;
}

body.hasp-staff-portal-page .hasp-enq-detail-panel,
body.hasp-staff-portal-page .hasp-app-detail-panel {
    padding: 22px;
}

body.hasp-staff-portal-page .hasp-enq-profile,
body.hasp-staff-portal-page .hasp-app-profile {
    gap: 16px;
    padding-bottom: 18px;
}

body.hasp-staff-portal-page .hasp-enq-profile h2,
body.hasp-staff-portal-page .hasp-app-title-line h2 {
    font-size: 22px;
}

body.hasp-staff-portal-page .hasp-enq-summary,
body.hasp-staff-portal-page .hasp-app-snapshot {
    gap: 10px;
    margin: 17px 0;
}

body.hasp-staff-portal-page .hasp-enq-summary > div,
body.hasp-staff-portal-page .hasp-app-snapshot > div {
    min-height: 67px;
    padding: 11px;
    border-radius: 10px;
}

body.hasp-staff-portal-page .hasp-enq-summary small,
body.hasp-staff-portal-page .hasp-app-snapshot small,
body.hasp-staff-portal-page .hasp-app-info-grid span,
body.hasp-staff-portal-page .hasp-enq-management label,
body.hasp-staff-portal-page .hasp-app-management label {
    font-size: 10.5px;
}

body.hasp-staff-portal-page .hasp-enq-summary strong,
body.hasp-staff-portal-page .hasp-app-snapshot strong,
body.hasp-staff-portal-page .hasp-app-info-grid strong {
    font-size: 12px;
    line-height: 1.4;
}

body.hasp-staff-portal-page .hasp-enq-section,
body.hasp-staff-portal-page .hasp-app-section {
    margin-top: 18px;
    padding-top: 18px;
}

body.hasp-staff-portal-page .hasp-enq-section-head h3,
body.hasp-staff-portal-page .hasp-app-section-head h3 {
    font-size: 14px;
}

body.hasp-staff-portal-page .hasp-enq-section-head p,
body.hasp-staff-portal-page .hasp-app-section-head p {
    font-size: 10.5px;
}

body.hasp-staff-portal-page .hasp-enq-message {
    padding: 16px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.65;
}

body.hasp-staff-portal-page .hasp-enq-sensitive {
    padding: 13px;
    border-radius: 10px;
}

body.hasp-staff-portal-page .hasp-enq-sensitive strong {
    font-size: 12px;
}

body.hasp-staff-portal-page .hasp-enq-sensitive p {
    font-size: 10.5px;
    line-height: 1.45;
}

body.hasp-staff-portal-page .hasp-enq-profile-actions,
body.hasp-staff-portal-page .hasp-app-profile-actions {
    gap: 8px;
}

body.hasp-staff-portal-page .hasp-enq-management,
body.hasp-staff-portal-page .hasp-app-management {
    margin-top: 18px;
    padding: 18px;
    border-radius: 12px;
}

body.hasp-staff-portal-page .hasp-enq-management-grid,
body.hasp-staff-portal-page .hasp-app-management-grid {
    gap: 12px;
}

body.hasp-staff-portal-page .hasp-enq-management input,
body.hasp-staff-portal-page .hasp-enq-management select,
body.hasp-staff-portal-page .hasp-enq-management textarea,
body.hasp-staff-portal-page .hasp-app-management input,
body.hasp-staff-portal-page .hasp-app-management select,
body.hasp-staff-portal-page .hasp-app-management textarea {
    font-size: 12px;
}

body.hasp-staff-portal-page .hasp-enq-savebar,
body.hasp-staff-portal-page .hasp-app-savebar {
    margin-top: 14px;
    padding-top: 14px;
}

body.hasp-staff-portal-page .hasp-enq-savebar span,
body.hasp-staff-portal-page .hasp-app-savebar span {
    font-size: 10.5px;
}

/* Job applications */
body.hasp-staff-portal-page .hasp-app-workspace {
    grid-template-columns: minmax(360px, 400px) minmax(0, 1fr);
    gap: 18px;
}

body.hasp-staff-portal-page .hasp-app-avatar {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    font-size: 12px;
}

body.hasp-staff-portal-page .hasp-app-avatar--large {
    width: 58px;
    height: 58px;
    border-radius: 15px;
    font-size: 17px;
}

body.hasp-staff-portal-page .hasp-app-section {
    padding: 18px 0 0;
}

body.hasp-staff-portal-page .hasp-app-checks,
body.hasp-staff-portal-page .hasp-app-documents,
body.hasp-staff-portal-page .hasp-app-info-grid {
    gap: 10px;
}

body.hasp-staff-portal-page .hasp-app-checks > div,
body.hasp-staff-portal-page .hasp-app-info-grid > div,
body.hasp-staff-portal-page .hasp-app-documents > a {
    min-height: 60px;
    padding: 12px;
    border-radius: 10px;
}

/* Roles and settings */
body.hasp-staff-portal-page .hasp-role-layout {
    grid-template-columns: minmax(270px, 320px) minmax(0, 1fr);
    gap: 18px;
}

body.hasp-staff-portal-page .hasp-role-list,
body.hasp-staff-portal-page .hasp-role-editor,
body.hasp-staff-portal-page .hasp-user-role-panel {
    border-radius: 14px;
}

body.hasp-staff-portal-page .hasp-role-items > a {
    min-height: 59px;
    padding: 13px 18px;
}

body.hasp-staff-portal-page .hasp-role-items strong {
    font-size: 12.5px;
}

body.hasp-staff-portal-page .hasp-role-items small {
    font-size: 10.5px;
}

body.hasp-staff-portal-page .hasp-capability-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

body.hasp-staff-portal-page .hasp-cap-card {
    min-height: 82px;
    gap: 11px;
    padding: 14px;
    border-radius: 11px;
}

body.hasp-staff-portal-page .hasp-cap-card strong {
    font-size: 12px;
}

body.hasp-staff-portal-page .hasp-cap-card small {
    margin-top: 4px;
    font-size: 10.5px;
}

body.hasp-staff-portal-page .hasp-settings-grid {
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 15px;
}

body.hasp-staff-portal-page .hasp-settings-version {
    padding: 7px 11px;
    font-size: 10.5px;
}

body.hasp-staff-portal-page .hasp-settings-grid > .hasp-panel {
    min-height: 230px;
    gap: 14px;
}

body.hasp-staff-portal-page .hasp-settings-card-head {
    gap: 12px;
    padding-bottom: 13px;
}

body.hasp-staff-portal-page .hasp-settings-card-head > .dashicons {
    width: 40px;
    height: 40px;
}

body.hasp-staff-portal-page .hasp-settings-card-head h3 {
    font-size: 15px;
}

body.hasp-staff-portal-page .hasp-settings-card-head p,
body.hasp-staff-portal-page .hasp-setting-toggle small,
body.hasp-staff-portal-page .hasp-system-list dt,
body.hasp-staff-portal-page .hasp-system-list dd {
    font-size: 11px;
}

body.hasp-staff-portal-page .hasp-setting-toggle {
    padding: 13px;
}

body.hasp-staff-portal-page .hasp-setting-toggle strong {
    font-size: 12px;
}

body.hasp-staff-portal-page .hasp-system-list > div {
    padding: 10px 0;
}

body.hasp-staff-portal-page .hasp-settings-save {
    padding: 14px 16px;
    border-radius: 12px;
}

body.hasp-staff-portal-page .hasp-settings-save strong {
    font-size: 12px;
}

body.hasp-staff-portal-page .hasp-settings-save small {
    font-size: 10.5px;
}

/* Workplace, documents and Microsoft 365 */
body.hasp-staff-portal-page .hasp-workplace {
    display: grid;
}

body.hasp-staff-portal-page .hasp-workplace .hasp-form-grid,
body.hasp-staff-portal-page .hasp-workplace-form .hasp-form-grid,
body.hasp-staff-portal-page .hasp-check-grid {
    gap: 14px;
}

body.hasp-staff-portal-page .hasp-document-actions {
    gap: 16px;
    margin: 18px 0;
}

body.hasp-staff-portal-page .hasp-document-actions form {
    padding: 16px;
    border-radius: 11px;
    box-shadow: 0 3px 12px rgba(21, 35, 63, .035);
}

body.hasp-staff-portal-page .hasp-document-location,
body.hasp-staff-portal-page .hasp-reimbursement-storage {
    padding: 13px 15px;
    border: 1px solid var(--hasp-border);
    border-radius: 10px;
    background: var(--hasp-surface-soft);
}

/* Notifications and tabbed workspaces */
body.hasp-staff-portal-page .hasp-tabs,
body.hasp-staff-portal-page .hasp-notification-tabs {
    display: flex;
    gap: 7px;
    margin: 0 0 18px;
    padding: 5px;
    border: 1px solid var(--hasp-border);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(21, 35, 63, .03);
}

body.hasp-staff-portal-page .hasp-tabs a,
body.hasp-staff-portal-page .hasp-notification-tabs a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #4d5c72;
    font-size: 11.5px;
    font-weight: 700;
    text-decoration: none;
}

body.hasp-staff-portal-page .hasp-tabs a:hover,
body.hasp-staff-portal-page .hasp-notification-tabs a:hover {
    background: #f4f7fa;
    color: var(--hasp-navy);
}

body.hasp-staff-portal-page .hasp-tabs a.is-active,
body.hasp-staff-portal-page .hasp-notification-tabs a.is-active {
    border-color: #15233f;
    background: #15233f;
    color: #fff;
}

body.hasp-staff-portal-page .hasp-notification-kpis {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin: 18px 0;
}

body.hasp-staff-portal-page .hasp-notification-kpis .hasp-panel {
    min-height: 105px;
    display: grid;
    align-content: center;
    padding: 17px;
}

body.hasp-staff-portal-page .hasp-notification-kpis span {
    color: var(--hasp-muted);
    font-size: 11px;
    font-weight: 700;
}

body.hasp-staff-portal-page .hasp-notification-kpis strong {
    margin-top: 5px;
    font-size: 28px;
    line-height: 1.1;
}

body.hasp-staff-portal-page .hasp-notification-grid {
    grid-template-columns: minmax(340px, .9fr) minmax(420px, 1.1fr);
    gap: 18px;
}

body.hasp-staff-portal-page .hasp-notification-row {
    min-height: 66px;
    padding: 13px 0;
}

body.hasp-staff-portal-page .hasp-notification-row strong {
    font-size: 12.5px;
}

body.hasp-staff-portal-page .hasp-notification-row small {
    font-size: 10.5px;
}

/* Reimbursements */
body.hasp-staff-portal-page .hasp-reimbursements {
    display: grid;
}

body.hasp-staff-portal-page .hasp-reimbursement-health,
body.hasp-staff-portal-page .hasp-operational-health {
    margin: 0;
    border-left-width: 4px;
}

body.hasp-staff-portal-page .hasp-health-issues {
    gap: 9px;
}

body.hasp-staff-portal-page .hasp-health-issues li {
    padding: 11px 12px;
    border-radius: 9px;
    font-size: 12px;
    line-height: 1.5;
}

body.hasp-staff-portal-page .hasp-reimbursement-detail {
    padding: 24px;
    border-left: 4px solid var(--hasp-blue);
}

body.hasp-staff-portal-page .hasp-reimbursement-detail > h3 {
    margin-bottom: 16px;
    font-size: 20px;
}

body.hasp-staff-portal-page .hasp-reimbursement-detail > p {
    margin: 8px 0;
    font-size: 12.5px;
}

body.hasp-staff-portal-page .hasp-evidence-list {
    display: grid;
    gap: 8px;
    margin: 10px 0 18px;
    padding: 0;
    list-style: none;
}

body.hasp-staff-portal-page .hasp-evidence-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px;
    border: 1px solid var(--hasp-border);
    border-radius: 9px;
    background: var(--hasp-surface-soft);
}

body.hasp-staff-portal-page .hasp-reimbursement-action-form {
    margin-top: 20px;
    padding: 18px;
    border: 1px solid #cbdde8;
    border-radius: 12px;
    background: #f5fafd;
}

body.hasp-staff-portal-page .hasp-reimbursement-actions {
    gap: 9px;
    margin-top: 14px;
}

body.hasp-staff-portal-page .hasp-reimbursement-qr {
    padding: 20px;
    border-radius: 13px;
}

body.hasp-staff-portal-page .hasp-report-filters {
    margin-bottom: 18px;
}

/* Newsletters */
body.hasp-staff-portal-page .hasp-newsletter-grid {
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 15px;
}

body.hasp-staff-portal-page .hasp-newsletter-card,
body.hasp-staff-portal-page .hasp-template-card {
    padding: 20px;
    border: 1px solid var(--hasp-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 16px rgba(21, 35, 63, .045);
}

body.hasp-staff-portal-page .hasp-newsletter-card h3,
body.hasp-staff-portal-page .hasp-template-card h3 {
    margin: 13px 0 7px;
    font-size: 16px;
}

body.hasp-staff-portal-page .hasp-newsletter-card p,
body.hasp-staff-portal-page .hasp-template-card p {
    color: var(--hasp-muted);
    font-size: 11.5px;
    line-height: 1.55;
}

body.hasp-staff-portal-page .hasp-newsletter-stats {
    gap: 10px;
    margin: 15px 0;
    padding: 13px 0;
}

body.hasp-staff-portal-page .hasp-newsletter-stats span {
    font-size: 10.5px;
}

body.hasp-staff-portal-page .hasp-newsletter-stats strong {
    margin-bottom: 2px;
    font-size: 18px;
}

body.hasp-staff-portal-page .hasp-card-utility-actions,
body.hasp-staff-portal-page .hasp-newsletter-actions-row,
body.hasp-staff-portal-page .hasp-publish-actions {
    gap: 8px;
}

body.hasp-staff-portal-page .hasp-newsletters .hasp-content-card-actions + .hasp-card-utility-actions,
body.hasp-staff-portal-page .hasp-newsletters article .hasp-card-utility-actions {
    margin-top: 14px !important;
    padding-top: 12px !important;
}

body.hasp-staff-portal-page .hasp-text-btn {
    color: var(--hasp-muted);
    font-size: 11.5px;
    font-weight: 700;
}

body.hasp-staff-portal-page .hasp-text-btn--danger {
    color: #a61b1b;
}

body.hasp-staff-portal-page .hasp-delete-form {
    margin-top: 13px;
}

body.hasp-staff-portal-page .hasp-recipient-layout,
body.hasp-staff-portal-page .hasp-newsletter-distribution-grid {
    gap: 18px;
}

body.hasp-staff-portal-page .hasp-newsletter-reports-workspace {
    display: grid;
    gap: 16px;
}

body.hasp-staff-portal-page .hasp-template-grid {
    gap: 15px;
}

body.hasp-staff-portal-page .hasp-copy-row {
    gap: 9px;
}

body.hasp-staff-portal-page .hasp-test-email-panel,
body.hasp-staff-portal-page .hasp-newsletter-distribution {
    margin-top: 18px;
}

body.hasp-staff-portal-page .hasp-builder-layout {
    gap: 14px;
}

body.hasp-staff-portal-page .hasp-builder-library {
    padding: 15px;
    border-radius: 12px;
    box-shadow: var(--hasp-shadow);
}

body.hasp-staff-portal-page .hasp-builder-panel-head h3 {
    font-size: 15px;
}

body.hasp-staff-portal-page .hasp-builder-panel-head p {
    font-size: 10.5px;
}

body.hasp-staff-portal-page .hasp-block-library {
    gap: 8px;
}

body.hasp-staff-portal-page .hasp-block-add,
body.hasp-staff-portal-page .hasp-saved-section {
    min-height: 62px;
    padding: 10px;
    border-radius: 8px;
}

body.hasp-staff-portal-page .hasp-block-add strong,
body.hasp-staff-portal-page .hasp-saved-section strong {
    font-size: 12px;
}

body.hasp-staff-portal-page .hasp-block-add small,
body.hasp-staff-portal-page .hasp-saved-section small {
    font-size: 10px;
}

body.hasp-staff-portal-page .hasp-builder-stage-toolbar {
    padding: 14px;
    border-radius: 11px;
    box-shadow: 0 3px 12px rgba(21, 35, 63, .035);
}

body.hasp-staff-portal-page .hasp-newsletter-preview-frame {
    border: 1px solid #d8dee7;
    border-radius: 11px;
}

body.hasp-staff-portal-page .hasp-newsletter-canvas {
    min-height: 560px;
}

body.hasp-staff-portal-page .hasp-builder-block {
    padding: 30px;
}

body.hasp-staff-portal-page .hasp-block-extra label {
    font-size: 10.5px;
}

body.hasp-staff-portal-page .hasp-block-type {
    font-size: 9.5px;
}

body.hasp-staff-portal-page .hasp-block-heading {
    font-size: 20px;
}

body.hasp-staff-portal-page .hasp-rich-editor {
    min-height: 150px;
    font-size: 13px;
}

body.hasp-staff-portal-page .hasp-rte-toolbar {
    gap: 4px;
    padding: 7px 8px;
}

body.hasp-staff-portal-page .hasp-rte-toolbar button,
body.hasp-staff-portal-page .hasp-rte-toolbar select {
    width: auto;
    min-width: 34px;
    min-height: 34px;
    height: 34px;
    padding: 5px 8px;
    font-size: 11.5px;
}

body.hasp-staff-portal-page .hasp-rte-toolbar select {
    min-width: 108px;
}

body.hasp-staff-portal-page .hasp-builder-settings > .hasp-panel {
    padding: 17px;
    border-radius: 12px;
}

body.hasp-staff-portal-page .hasp-section-editor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--hasp-border);
}

body.hasp-staff-portal-page .hasp-section-editor-head h3 {
    margin: 0;
}

body.hasp-staff-portal-page .hasp-gallery-manage label {
    padding: 7px;
    font-size: 10.5px;
}

/* Audit Trail */
body.hasp-staff-portal-page .hasp-audit-chain {
    padding: 13px 15px;
    border-radius: 10px;
}

body.hasp-staff-portal-page .hasp-audit-stats {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

body.hasp-staff-portal-page .hasp-audit-stats > div {
    min-height: 92px;
    padding: 15px;
    border-radius: 11px;
    box-shadow: 0 3px 12px rgba(21, 35, 63, .035);
}

body.hasp-staff-portal-page .hasp-audit-stats small {
    font-size: 10.5px;
}

body.hasp-staff-portal-page .hasp-audit-stats strong {
    font-size: 23px;
}

body.hasp-staff-portal-page .hasp-audit-details dl {
    gap: 0;
    padding: 15px;
}

body.hasp-staff-portal-page .hasp-audit-details dt {
    font-size: 10.5px;
}

body.hasp-staff-portal-page .hasp-audit-details dd,
body.hasp-staff-portal-page .hasp-audit-details pre {
    font-size: 12px;
}

/* Login */
body.hasp-staff-portal-page .hasp-login-wrap {
    background: linear-gradient(135deg, #eef3f8 0%, #f8fafc 100%);
}

body.hasp-staff-portal-page .hasp-login-brand {
    background:
        radial-gradient(circle at 20% 20%, rgba(7, 143, 189, .22), transparent 33%),
        radial-gradient(circle at 80% 78%, rgba(214, 0, 114, .18), transparent 34%),
        linear-gradient(145deg, #172541, #101a31);
}

body.hasp-staff-portal-page .hasp-login-brand .hasp-mark {
    box-shadow: 0 16px 34px rgba(214, 0, 114, .25);
}

body.hasp-staff-portal-page .hasp-login-brand h1 {
    font-size: clamp(2.3rem, 4vw, 3.6rem);
    letter-spacing: -.04em;
}

body.hasp-staff-portal-page .hasp-login-brand p {
    color: #cbd6e6;
    font-size: 17px;
}

body.hasp-staff-portal-page .hasp-login-card {
    width: min(440px, calc(100% - 40px));
    padding: 36px;
    border: 1px solid rgba(203, 213, 225, .8);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(21, 35, 63, .14);
}

body.hasp-staff-portal-page .hasp-login-card label {
    font-size: 12.5px;
}

/* Interaction and accessibility */
body.hasp-staff-portal-page .hasp-shell a:focus-visible,
body.hasp-staff-portal-page .hasp-shell button:focus-visible,
body.hasp-staff-portal-page .hasp-shell summary:focus-visible {
    outline: 3px solid rgba(7, 143, 189, .28);
    outline-offset: 2px;
}

body.hasp-staff-portal-page .hasp-shell ::selection {
    background: rgba(7, 143, 189, .22);
}

/* Responsive portal refinements */
@media (max-width: 1450px) {
    body.hasp-staff-portal-page .hasp-dash-kpis {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    body.hasp-staff-portal-page .hasp-content-cards {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
}

@media (max-width: 1250px) {
    body.hasp-staff-portal-page .hasp-dash-kpis,
    body.hasp-staff-portal-page .hasp-app-kpis,
    body.hasp-staff-portal-page .hasp-enq-kpis,
    body.hasp-staff-portal-page .hasp-audit-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.hasp-staff-portal-page .hasp-dash-layout,
    body.hasp-staff-portal-page .hasp-notification-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1050px) {
    body.hasp-staff-portal-page .hasp-sidebar {
        border-radius: 13px;
    }

    body.hasp-staff-portal-page .hasp-sidebar nav a {
        justify-content: center;
        padding: 10px;
        font-size: 0;
    }

    body.hasp-staff-portal-page .hasp-logo {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    body.hasp-staff-portal-page .hasp-logo strong,
    body.hasp-staff-portal-page .hasp-logo small {
        display: none;
    }

    body.hasp-staff-portal-page .hasp-nav-group-label {
        height: 1px;
        margin: 12px 8px 5px;
        overflow: hidden;
        background: rgba(255, 255, 255, .1);
        color: transparent;
    }

    body.hasp-staff-portal-page .hasp-app-workspace,
    body.hasp-staff-portal-page .hasp-enq-grid {
        grid-template-columns: minmax(320px, 360px) minmax(0, 1fr);
    }

    body.hasp-staff-portal-page .hasp-editor-grid {
        grid-template-columns: minmax(0, 1fr) 300px;
    }
}

@media (max-width: 920px) {
    body.hasp-staff-portal-page .hasp-app-workspace,
    body.hasp-staff-portal-page .hasp-enq-grid,
    body.hasp-staff-portal-page .hasp-role-layout,
    body.hasp-staff-portal-page .hasp-editor-grid {
        grid-template-columns: 1fr;
    }

    body.hasp-staff-portal-page .hasp-app-list,
    body.hasp-staff-portal-page .hasp-enq-list {
        max-height: 440px;
    }

    body.hasp-staff-portal-page .hasp-content-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 780px) {
    body.hasp-staff-portal-page .hasp-sidebar {
        top: 0;
        bottom: 0;
        height: 100vh;
        min-height: 100vh;
        border-radius: 0 16px 16px 0;
        overflow-y: auto;
        box-shadow: 18px 0 45px rgba(15, 27, 50, .2);
    }

    body.hasp-staff-portal-page .hasp-nav-group-label {
        height: auto;
        margin: 15px 10px 5px;
        overflow: visible;
        background: transparent;
        color: #8fa0ba;
    }

    body.hasp-staff-portal-page .hasp-logo {
        grid-template-columns: 44px 1fr;
        justify-items: stretch;
    }

    body.hasp-staff-portal-page .hasp-logo strong,
    body.hasp-staff-portal-page .hasp-logo small {
        display: block;
    }

    body.hasp-staff-portal-page .hasp-sidebar nav a {
        justify-content: flex-start;
        font-size: 12.5px;
    }

    body.hasp-staff-portal-page .hasp-topbar {
        min-height: 62px;
        margin-bottom: 16px;
        padding: 7px 0;
    }

    body.hasp-staff-portal-page .hasp-topbar h1 {
        font-size: 20px;
    }

    body.hasp-staff-portal-page .hasp-top-actions .hasp-btn {
        width: 40px;
        min-width: 40px;
        height: 40px;
        padding: 0;
        font-size: 0;
    }

    body.hasp-staff-portal-page .hasp-top-actions .dashicons {
        width: 18px;
        height: 18px;
        font-size: 18px;
    }

    body.hasp-staff-portal-page .hasp-panel {
        padding: 17px;
    }

    body.hasp-staff-portal-page .hasp-workplace-form,
    body.hasp-staff-portal-page .hasp-settings-form,
    body.hasp-staff-portal-page .hasp-workspace > .hasp-form {
        padding: 17px;
    }

    body.hasp-staff-portal-page .hasp-dash-hero,
    body.hasp-staff-portal-page .hasp-content-hero,
    body.hasp-staff-portal-page .hasp-enq-hero,
    body.hasp-staff-portal-page .hasp-app-hero,
    body.hasp-staff-portal-page .hasp-settings-hero,
    body.hasp-staff-portal-page .hasp-audit-hero,
    body.hasp-staff-portal-page .hasp-builder-hero,
    body.hasp-staff-portal-page .hasp-workspace > .hasp-section-head,
    body.hasp-staff-portal-page .hasp-workplace > .hasp-section-head,
    body.hasp-staff-portal-page .hasp-reimbursements > .hasp-section-head,
    body.hasp-staff-portal-page .hasp-notifications > .hasp-section-head {
        min-height: 0;
        align-items: flex-start;
        flex-direction: column;
        padding: 18px;
    }

    body.hasp-staff-portal-page .hasp-dash-kpis,
    body.hasp-staff-portal-page .hasp-app-kpis,
    body.hasp-staff-portal-page .hasp-enq-kpis,
    body.hasp-staff-portal-page .hasp-content-kpis,
    body.hasp-staff-portal-page .hasp-notification-kpis,
    body.hasp-staff-portal-page .hasp-audit-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.hasp-staff-portal-page .hasp-dash-action-grid,
    body.hasp-staff-portal-page .hasp-settings-grid,
    body.hasp-staff-portal-page .hasp-capability-grid,
    body.hasp-staff-portal-page .hasp-content-cards {
        grid-template-columns: 1fr;
    }

    body.hasp-staff-portal-page .hasp-tabs,
    body.hasp-staff-portal-page .hasp-notification-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    body.hasp-staff-portal-page .hasp-tabs a,
    body.hasp-staff-portal-page .hasp-notification-tabs a {
        flex: 0 0 auto;
    }

    body.hasp-staff-portal-page .hasp-panel-head,
    body.hasp-staff-portal-page .hasp-enq-savebar,
    body.hasp-staff-portal-page .hasp-app-savebar,
    body.hasp-staff-portal-page .hasp-settings-save,
    body.hasp-staff-portal-page .hasp-form-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    body.hasp-staff-portal-page .hasp-form-actions .hasp-btn {
        width: 100%;
    }

    body.hasp-staff-portal-page .hasp-reimbursement-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    body.hasp-staff-portal-page .hasp-dash-kpis,
    body.hasp-staff-portal-page .hasp-app-kpis,
    body.hasp-staff-portal-page .hasp-enq-kpis,
    body.hasp-staff-portal-page .hasp-content-kpis,
    body.hasp-staff-portal-page .hasp-notification-kpis,
    body.hasp-staff-portal-page .hasp-audit-stats {
        grid-template-columns: 1fr !important;
    }

    body.hasp-staff-portal-page .hasp-dash-kpi {
        min-height: 96px;
    }

    body.hasp-staff-portal-page .hasp-login-card {
        width: min(100% - 24px, 440px);
        padding: 25px 20px;
    }

    body.hasp-staff-portal-page .hasp-content-toolbar .hasp-btn,
    body.hasp-staff-portal-page .hasp-app-toolbar .hasp-btn,
    body.hasp-staff-portal-page .hasp-enq-toolbar .hasp-btn,
    body.hasp-staff-portal-page .hasp-editor-actions .hasp-btn,
    body.hasp-staff-portal-page .hasp-settings-save .hasp-btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.hasp-staff-portal-page .hasp-shell *,
    body.hasp-staff-portal-page .hasp-shell *::before,
    body.hasp-staff-portal-page .hasp-shell *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media print {
    body.hasp-staff-portal-page .hasp-sidebar,
    body.hasp-staff-portal-page .hasp-topbar,
    body.hasp-staff-portal-page .hasp-tabs,
    body.hasp-staff-portal-page .hasp-notification-tabs,
    body.hasp-staff-portal-page .hasp-top-actions,
    body.hasp-staff-portal-page .hasp-btn {
        display: none !important;
    }

    body.hasp-staff-portal-page .hasp-shell {
        display: block;
        background: #fff;
    }

    body.hasp-staff-portal-page .hasp-main {
        padding: 0 !important;
    }

    body.hasp-staff-portal-page .hasp-panel,
    body.hasp-staff-portal-page .hasp-table-wrap {
        box-shadow: none;
        break-inside: avoid;
    }
}