html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* ============================================================
   HCP HR Portal — shared UI styles
   ============================================================ */

:root {
    --hcp-primary: #1f6fe5;
    --hcp-ink: #0f1b2d;
    --hcp-muted: #6b7a90;
    --hcp-border: #e6eaf0;
    --hcp-bg: #f4f6fa;
    --hcp-card-shadow: 0 1px 3px rgba(16, 27, 45, 0.06), 0 8px 24px rgba(16, 27, 45, 0.05);
}

body {
    background-color: var(--hcp-bg);
    color: var(--hcp-ink);
}

.content {
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
}

/* ---- Page header ---- */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.page-header-text {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.page-header-icon {
    font-size: 1.6rem;
    color: var(--hcp-primary);
    background: rgba(31, 111, 229, 0.1);
    width: 3rem;
    height: 3rem;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-header h1 {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
}

.page-subtitle {
    color: var(--hcp-muted);
    margin: 0.15rem 0 0;
    font-size: 0.92rem;
}

.page-header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* ---- Generic card ---- */
.card-surface {
    background: #fff;
    border: 1px solid var(--hcp-border);
    border-radius: 16px;
    box-shadow: var(--hcp-card-shadow);
    padding: 1.25rem 1.4rem;
}

.section-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 1rem;
}

/* ---- Dashboard stat cards ---- */
.dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.dash-card {
    background: #fff;
    border: 1px solid var(--hcp-border);
    border-radius: 16px;
    box-shadow: var(--hcp-card-shadow);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.dash-card-icon {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.dash-card-value {
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.1;
}

.dash-card-title {
    color: var(--hcp-muted);
    font-size: 0.88rem;
}

.dash-card-trend {
    font-size: 0.78rem;
    color: var(--hcp-muted);
    margin-top: 0.25rem;
}

/* Clickable KPI cards — anchor variant. */
a.dash-card-clickable {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
    position: relative;
}

a.dash-card-clickable:hover {
    transform: translateY(-2px);
    border-color: #93c5fd;
    box-shadow: 0 6px 18px rgba(31, 111, 229, 0.14);
}

a.dash-card-clickable:hover .dash-card-chevron {
    opacity: 1;
    transform: translateX(0);
}

.dash-card-chevron {
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
    color: var(--hcp-muted);
    font-size: 0.95rem;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
}

.tone-primary { background: rgba(31, 111, 229, 0.12); color: #1f6fe5; }
.tone-success { background: rgba(22, 163, 74, 0.12); color: #16a34a; }
.tone-warning { background: rgba(217, 142, 4, 0.14); color: #d98e04; }
.tone-danger  { background: rgba(220, 53, 69, 0.12); color: #dc3545; }
.tone-info    { background: rgba(13, 148, 184, 0.12); color: #0d94b8; }
.tone-purple  { background: rgba(124, 58, 237, 0.12); color: #7c3aed; }

/* ---- Quick actions ---- */
.quick-action {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    background: #fff;
    border: 1px solid var(--hcp-border);
    border-radius: 14px;
    text-decoration: none;
    color: var(--hcp-ink);
    transition: all 0.16s ease;
}

.quick-action:hover {
    border-color: var(--hcp-primary);
    box-shadow: 0 8px 20px rgba(31, 111, 229, 0.12);
    transform: translateY(-1px);
}

.quick-action-icon {
    font-size: 1.15rem;
    color: var(--hcp-primary);
}

.quick-action-label {
    font-weight: 600;
    flex: 1;
}

.quick-action-arrow {
    color: var(--hcp-muted);
    font-size: 0.9rem;
}

/* ---- Status badge ---- */
.status-badge {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.sb-success   { background: rgba(22, 163, 74, 0.14); color: #15803d; }
.sb-warning   { background: rgba(217, 142, 4, 0.16); color: #b45309; }
.sb-danger    { background: rgba(220, 53, 69, 0.14); color: #b91c1c; }
.sb-info      { background: rgba(13, 148, 184, 0.14); color: #0e7490; }
.sb-secondary { background: rgba(107, 122, 144, 0.14); color: #475569; }
.sb-purple    { background: rgba(124, 58, 237, 0.14); color: #6d28d9; }
.sb-primary   { background: rgba(31, 111, 229, 0.14); color: #1d4ed8; }

/* ---- Data table ---- */
.data-table-wrap {
    background: #fff;
    border: 1px solid var(--hcp-border);
    border-radius: 16px;
    box-shadow: var(--hcp-card-shadow);

    /* Was `overflow: hidden`, which clipped the rounded corners but gave a too-wide table
       nowhere to go — the columns simply pushed the card, the grid track and finally the page
       wider. `auto` on the X axis lets a genuinely wide table scroll INSIDE its own card, which
       is what keeps the page itself from ever scrolling sideways. Y stays hidden so the corner
       clipping is unchanged and no stray vertical scrollbar appears. */
    overflow-x: auto;
    overflow-y: hidden;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.data-table thead th {
    text-align: left;
    padding: 0.85rem 1.1rem;
    background: #fafbfd;
    border-bottom: 1px solid var(--hcp-border);
    color: var(--hcp-muted);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.data-table tbody td {
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid #f0f2f6;
    vertical-align: middle;
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.data-table tbody tr:hover {
    background: #fafbfd;
}

.data-table-empty {
    text-align: center;
    color: var(--hcp-muted);
    padding: 2.5rem !important;
}

/* ---- Layout grids ---- */
/* minmax(0, …) on every flexible track, throughout this file.
   A bare `1fr` is shorthand for `minmax(auto, 1fr)`, and that `auto` minimum is the grid
   equivalent of a flex item's min-width:auto: the track refuses to become narrower than its
   content's min-content width. A wide table therefore widened its column, which widened the
   grid, which overflowed the page. minmax(0, 1fr) removes that floor so the track honours the
   space available and the content inside scrolls or wraps instead. */
.two-col {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: stretch;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

@media (max-width: 820px) {
    .two-col { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Avatar ---- */
.avatar {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #1f6fe5, #7c3aed);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.82rem;
    flex-shrink: 0;
}

.avatar-lg {
    width: 4.5rem;
    height: 4.5rem;
    font-size: 1.4rem;
}

img.avatar { object-fit: cover; }

.cell-person {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.cell-sub {
    color: var(--hcp-muted);
    font-size: 0.8rem;
}

/* ---- Progress bar ---- */
.progress-track {
    background: #eef1f6;
    border-radius: 999px;
    height: 8px;
    width: 120px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--hcp-primary);
    border-radius: 999px;
}

/* ---- Forms ---- */
.form-card {
    background: #fff;
    border: 1px solid var(--hcp-border);
    border-radius: 16px;
    box-shadow: var(--hcp-card-shadow);
    padding: 1.4rem;
}

.form-row {
    margin-bottom: 1rem;
}

.form-row label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
}

.form-row .form-control,
.form-row .form-select,
.form-row textarea {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--hcp-border);
    border-radius: 10px;
    font-size: 0.9rem;
}

/* ---- Timeline / list rows ---- */
.event-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid #f0f2f6;
}

.event-row:last-child { border-bottom: none; }

.event-date {
    text-align: center;
    width: 3rem;
    flex-shrink: 0;
}

.event-date .day { font-size: 1.2rem; font-weight: 700; line-height: 1; }
.event-date .mon { font-size: 0.7rem; color: var(--hcp-muted); text-transform: uppercase; }

.event-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ---- Not found ---- */
.not-found {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--hcp-muted);
}

.not-found .bi {
    font-size: 3rem;
    color: var(--hcp-primary);
}

.not-found h1 { margin-top: 1rem; color: var(--hcp-ink); }

/* ---- Misc helpers ---- */
.text-muted-sm { color: var(--hcp-muted); font-size: 0.85rem; }
.mb-grid { margin-bottom: 1.5rem; }
.amount { font-variant-numeric: tabular-nums; font-weight: 600; }
.placeholder-note {
    background: #fff;
    border: 1px dashed var(--hcp-border);
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    color: var(--hcp-muted);
    font-size: 0.9rem;
}

/* ---- Tabbed views (Calendar, Documents) ---- */
.cal-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.cal-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    padding: 0.5rem 0.9rem;
    font-size: 0.85rem;
    color: #374151;
    cursor: pointer;
}

.cal-tab:hover { border-color: #bfdbfe; background: #f8fafc; }

.cal-tab.active {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
    font-weight: 600;
}

.cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.cal-month {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin: 1rem 0 0.4rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid #f1f5f9;
}

.cal-month:first-of-type { margin-top: 0; }

/* ---- Settings layout (left sub-nav + panel) ---- */
.settings-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (max-width: 820px) { .settings-layout { grid-template-columns: minmax(0, 1fr); } }
.set-nav { display: flex; flex-direction: column; gap: 0.25rem; }
.set-nav-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.85rem; border-radius: 10px; cursor: pointer; color: var(--hcp-ink); font-size: 0.9rem; background: none; border: none; text-align: left; width: 100%; }
.set-nav-item:hover { background: #f3f4f6; }
.set-nav-item.active { background: #eff6ff; color: #1d4ed8; font-weight: 600; }
.set-nav-item .bi { width: 1.2rem; text-align: center; }
.set-check { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.7rem; font-size: 0.9rem; }

/* Calendar right column: fill to the calendar's height (last card grows) */
.cal-side { display: flex; flex-direction: column; gap: 1.25rem; height: 100%; }
.cal-fill { flex: 1; }

/* ============================================================
   Polish components (donut, avatars, month grid, approvals,
   detail panel, filters, pagination, announcements)
   ============================================================ */

/* ---- Avatar sizes ---- */
.avatar-sm { width: 1.9rem; height: 1.9rem; font-size: 0.7rem; }

/* ---- Donut / ring chart ---- */
.donut-wrap { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.donut { width: 150px; height: 150px; border-radius: 50%; position: relative; flex-shrink: 0; }
.donut-hole {
    position: absolute; inset: 22px; background: #fff; border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.donut-value { font-size: 1.5rem; font-weight: 700; line-height: 1; }
.donut-label { font-size: 0.72rem; color: var(--hcp-muted); margin-top: 0.15rem; }
.donut-legend { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 0.5rem; }
.donut-legend-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
.donut-dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; flex-shrink: 0; }
.donut-legend-label { flex: 1; }
.donut-legend-value { font-weight: 600; font-variant-numeric: tabular-nums; }
.donut-legend-pct { color: var(--hcp-muted); width: 3rem; text-align: right; }

/* ---- Approvals cards ---- */
.approval-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0; border-bottom: 1px solid #f0f2f6; }
.approval-row:last-child { border-bottom: none; }
.approval-meta { flex: 1; line-height: 1.25; }
.approval-name { font-weight: 600; font-size: 0.9rem; }
.approval-sub { color: var(--hcp-muted); font-size: 0.8rem; }
.approval-actions { display: flex; gap: 0.4rem; }
.approve-btn, .reject-btn {
    width: 2rem; height: 2rem; border-radius: 8px; border: 1px solid var(--hcp-border);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: #fff; font-size: 0.9rem;
}
.approve-btn { color: #16a34a; }
.approve-btn:hover { background: #ecfdf5; border-color: #a7f3d0; }
.reject-btn { color: #dc2626; }
.reject-btn:hover { background: #fef2f2; border-color: #fecaca; }

/* ---- Recent activity / glance rows ---- */
.list-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid #f0f2f6; }
.list-row:last-child { border-bottom: none; }
.list-row-main { flex: 1; line-height: 1.25; }
.list-row-strong { font-weight: 600; font-size: 0.9rem; }
.list-row-time { color: var(--hcp-muted); font-size: 0.78rem; }
.glance-row { display: flex; align-items: center; justify-content: space-between; padding: 0.55rem 0; border-bottom: 1px solid #f0f2f6; font-size: 0.9rem; }
.glance-row:last-child { border-bottom: none; }
.glance-row .bi { color: var(--hcp-muted); margin-right: 0.5rem; }
.glance-val { font-weight: 700; }

/* ---- Announcement card with image ---- */
.announce { display: flex; gap: 1rem; }
.announce { align-items: flex-start; }
.announce-img {
    /* Drop a photo at wwwroot/images/announcement.png to show it here; otherwise a clean navy/blue thumbnail. */
    flex: 0 0 40%; max-width: 280px; height: 150px; border-radius: 12px;
    background-color: #0d2c54;
    background-image: url('/images/announcement.png');
    background-size: cover; background-position: center;
}
@media (max-width: 640px) { .announce { flex-direction: column; } .announce-img { flex-basis: auto; max-width: none; width: 100%; height: 150px; } }
.announce-body { flex: 1; }
.announce-title { font-weight: 700; margin-bottom: 0.25rem; }

/* ---- Section header with action link ---- */
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; }
.section-head .section-title { margin: 0; }
.section-link { font-size: 0.82rem; color: var(--hcp-primary); text-decoration: none; }

/* ---- Three column dashboard grid ---- */
.three-col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; }
@media (max-width: 1024px) { .three-col { grid-template-columns: minmax(0, 1fr); } }

/* ---- Filters bar ---- */
.filters-bar { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-bottom: 1rem; }
.filters-bar .filter-input, .filters-bar .filter-select {
    padding: 0.5rem 0.75rem; border: 1px solid var(--hcp-border); border-radius: 9px; font-size: 0.85rem; background: #fff;
}
.filters-bar .filter-input { flex: 1; min-width: 200px; }
.filter-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.filter-chip {
    padding: 0.4rem 0.85rem; border-radius: 999px; border: 1px solid var(--hcp-border);
    background: #fff; font-size: 0.82rem; cursor: pointer; color: var(--hcp-ink);
}
.filter-chip.active { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; font-weight: 600; }

/* ---- Records layout with side panel ---- */
.records-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.25rem; align-items: start; }
@media (max-width: 1100px) { .records-layout { grid-template-columns: minmax(0, 1fr); } }
.detail-panel {
    background: #fff; border: 1px solid var(--hcp-border); border-radius: 16px;
    box-shadow: var(--hcp-card-shadow); padding: 1.25rem; position: sticky; top: 1rem;
}
.detail-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; }
.detail-name { font-weight: 700; font-size: 1.05rem; }
.detail-kv { display: flex; justify-content: space-between; padding: 0.4rem 0; border-bottom: 1px solid #f0f2f6; font-size: 0.85rem; }
.detail-kv:last-child { border-bottom: none; }
.detail-kv .k { color: var(--hcp-muted); }
.row-selectable { cursor: pointer; }
.row-selectable.selected td { background: #eff6ff; }

/* ---- Pagination ---- */
.pager { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; font-size: 0.85rem; color: var(--hcp-muted); }
.pager-btns { display: flex; gap: 0.3rem; }
.pager-btn { min-width: 2rem; height: 2rem; padding: 0 0.5rem; border-radius: 8px; border: 1px solid var(--hcp-border); background: #fff; cursor: pointer; font-size: 0.82rem; }
.pager-btn.active { background: #1d4ed8; color: #fff; border-color: #1d4ed8; }
.pager-btn:disabled { opacity: 0.5; cursor: default; }

/* ---- Month grid calendar ---- */
.cal-grid { width: 100%; border: 1px solid var(--hcp-border); border-radius: 12px; overflow: hidden; }
/* minmax(0, 1fr) forces all 7 columns to be exactly equal width regardless of
   the content inside any cell — otherwise long, nowrap event titles can stretch
   one column wider than the others and the whole calendar drifts out of alignment. */
.cal-grid-head, .cal-grid-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-grid-head > div {
    padding: 0.6rem; text-align: center; font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; color: var(--hcp-muted); background: #fafbfd; border-bottom: 1px solid var(--hcp-border);
}
.cal-cell { min-height: 96px; border-right: 1px solid #f0f2f6; border-bottom: 1px solid #f0f2f6; padding: 0.35rem 0.4rem; font-size: 0.78rem; background: #fff; }
.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell.muted { background: #fafbfd; color: #c2c9d6; }
.cal-cell.today .cal-daynum { background: #1d4ed8; color: #fff; }
.cal-daynum { display: inline-flex; width: 1.5rem; height: 1.5rem; border-radius: 50%; align-items: center; justify-content: center; font-weight: 600; }
.cal-ev { display: flex; align-items: flex-start; gap: 0.3rem; margin-top: 0.2rem; padding: 0.1rem 0.3rem; border-radius: 5px; font-size: 0.7rem; min-width: 0; white-space: normal; overflow-wrap: anywhere; word-break: break-word; line-height: 1.2; }
.cal-ev .cal-ev-dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; flex-shrink: 0; }
.cal-more { font-size: 0.68rem; color: var(--hcp-muted); margin-top: 0.15rem; }
.cal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 1rem; flex-wrap: wrap; }
.cal-nav { display: flex; align-items: center; gap: 0.4rem; }
.cal-nav-btn { width: 2rem; height: 2rem; border-radius: 8px; border: 1px solid var(--hcp-border); background: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
/* Text-label variant of the nav button (Today / This Week / the period label).
   The base .cal-nav-btn is a fixed 2rem SQUARE, sized for a single chevron glyph — put a word
   in it and the word is clipped, which is exactly what happened to Calendar's "Today" button
   (it rendered as "Toda"). Two other screens had already worked around this with inline
   style="width:auto;padding:0 0.7rem", so the same fix existed in three places minus the one
   that needed it most. This variant replaces those inline overrides. */
.cal-nav-btn.is-text { width: auto; padding: 0 0.75rem; white-space: nowrap; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 0.9rem; font-size: 0.78rem; color: var(--hcp-muted); }
.cal-legend .dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; margin-right: 0.3rem; }

/* ---- Detailed stat card (mockup-style dashboard cards) ---- */
.stat-card {
    background: #fff; border: 1px solid var(--hcp-border); border-radius: 16px;
    box-shadow: var(--hcp-card-shadow); padding: 1.25rem 1.35rem 0.5rem;
    display: flex; flex-direction: column; min-height: 220px;
}
.stat-card-head { display: flex; align-items: center; gap: 0.55rem; color: var(--hcp-ink); font-size: 0.95rem; font-weight: 600; }
.stat-card-head .bi { font-size: 1.2rem; color: var(--hcp-primary); }
.stat-card-sub { color: var(--hcp-muted); font-size: 0.74rem; margin: 0.15rem 0 0 1.75rem; }
.stat-card-value { font-size: 2.1rem; font-weight: 800; line-height: 1.1; color: var(--hcp-primary); margin: 0.7rem 0 0.1rem; }
.stat-card-value small { font-size: 0.95rem; font-weight: 600; color: var(--hcp-ink); }
.stat-card-unit { color: var(--hcp-muted); font-size: 0.85rem; margin-bottom: 0.1rem; }
.stat-card-break { margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.85rem; }
.stat-card-break > div { display: flex; justify-content: space-between; gap: 0.5rem; }
.stat-card-break .k { color: var(--hcp-muted); }
/* three mini metrics in a row (e.g. Pending Approvals breakdown) */
.stat-mini-row { display: flex; gap: 1.4rem; margin-top: 0.7rem; }
.stat-mini strong { display: block; font-size: 1.15rem; font-weight: 700; color: var(--hcp-ink); line-height: 1.1; }
.stat-mini span { font-size: 0.72rem; color: var(--hcp-muted); }
.stat-card-foot { margin-top: auto; border-top: 1px solid var(--hcp-border); padding: 0.7rem 0; text-align: center; }
.stat-card-foot a { font-size: 0.85rem; color: var(--hcp-primary); text-decoration: none; font-weight: 600; }
.stat-badge { display: inline-block; background: rgba(220,38,38,0.12); color: #b91c1c; font-size: 0.74rem; font-weight: 700; padding: 0.12rem 0.55rem; border-radius: 999px; }

/* ---- Training progress breakdown + side image ---- */
.tp-row { display: flex; align-items: center; justify-content: space-between; padding: 0.4rem 0; font-size: 0.9rem; border-bottom: 1px solid #f0f2f6; }
.tp-row:last-child { border-bottom: none; }
.tp-dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; display: inline-block; margin-right: 0.5rem; }
.tp-layout { display: flex; align-items: stretch; gap: 1.25rem; }
.tp-layout .donut-wrap { flex: 0 0 auto; }
.tp-breakdown { flex: 1; min-width: 170px; display: flex; flex-direction: column; justify-content: center; }
.tp-image {
    flex: 0 0 30%; min-width: 140px; min-height: 180px; border-radius: 12px;
    background: #0d2c54 url('/images/training.png') center/cover no-repeat;
}
@media (max-width: 1100px) { .tp-image { display: none; } }

/* ---- Reminder list (calendar sidebar) ---- */
.reminder-row { display: flex; gap: 0.7rem; align-items: center; padding: 0.6rem 0; border-bottom: 1px solid #f0f2f6; }
.reminder-row:last-child { border-bottom: none; }
.reminder-ic { width: 2.1rem; height: 2.1rem; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.reminder-row .chev { margin-left: auto; color: #cbd5e1; font-size: 0.8rem; }
.reminder-foot { text-align: center; padding-top: 0.8rem; margin-top: 0.2rem; }

/* ---- Upcoming events (blue date box) ---- */
.ev-item { display: flex; align-items: center; gap: 0.85rem; padding: 0.7rem 0; border-bottom: 1px solid #f0f2f6; }
.ev-item:last-child { border-bottom: none; }
.ev-date { background: #1d4ed8; color: #fff; border-radius: 9px; min-width: 2.9rem; text-align: center; padding: 0.32rem 0.2rem; line-height: 1.15; }
.ev-date .m { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; }
.ev-date .d { font-size: 1.1rem; font-weight: 700; }
.ev-body { flex: 1; }
.ev-title { font-weight: 600; }
.ev-ic { color: var(--hcp-muted); font-size: 1rem; }

/* ---- Quick actions list ---- */
.qa-row { display: flex; align-items: center; gap: 0.8rem; padding: 0.8rem 0.1rem; border-bottom: 1px solid #f0f2f6; text-decoration: none; color: var(--hcp-ink); }
.qa-row:last-child { border-bottom: none; }
.qa-row:hover { color: var(--hcp-primary); }
.qa-ic { color: var(--hcp-primary); font-size: 1.05rem; width: 1.4rem; text-align: center; }
.qa-label { flex: 1; font-weight: 600; font-size: 0.9rem; }
.qa-arr { color: #cbd5e1; font-size: 0.8rem; }

/* ============================================================================
   Print / "Export PDF" — Timesheet Dashboard's Export PDF button (window.hcpPrint).
   App chrome (sidebar / top bar) is hidden in MainLayout.razor.css, whose scoped
   selectors are the only thing specific enough to override the layout styling.
   The rules here handle the CONTENT: white background, colour fidelity, tidy
   page breaks and a print-friendly re-layout of the dashboard bands.
   ============================================================================ */

/* Shown only when printing; hidden on screen. */
.print-only { display: none; }
.tsd-print-head { font-size: 1.1rem; margin-bottom: 0.75rem; color: #111827; }

@media print {
    /* A4-ish margin so content isn't jammed to the paper edge. */
    @page { margin: 12mm; }

    /* Print backgrounds and colours as designed (browsers strip them by default).
       Applied broadly so the donut, KPI icons, status dots and bar fills all show. */
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

    body, .page, main, .content, article { background: #fff !important; }

    .print-only { display: block !important; }
    .no-print { display: none !important; }

    /* Full width, no sticky offsets, no giant page paddings. */
    .content, .content.px-4, article { padding: 0 !important; margin: 0 !important; }

    /* Cards: keep each one whole across page breaks and calm the shadows for print. */
    .card-surface, .dash-card {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #e5e7eb !important;
    }

    /* KPI grid → a tidy row that wraps, instead of the screen's fixed grid. */
    .dash-grid { display: flex !important; flex-wrap: wrap !important; gap: 0.6rem !important; }
    .dash-grid > * { flex: 1 1 30% !important; }

    /* The two-column band (donut | table) stacks as full-width blocks on paper. */
    .dash-two-col { display: block !important; }
    .dash-two-col > * { margin-bottom: 1rem; break-inside: avoid; }

    /* Keep the donut + legend side by side (screen lets them wrap when narrow). */
    .donut-wrap { flex-wrap: nowrap !important; }
    .donut { width: 130px !important; height: 130px !important; }

    /* Tables shouldn't split a row across pages. */
    tr, .data-table tr { break-inside: avoid; }
}

/* Super Admin marker shown next to the role badge in the Employee Records list. */
.er-admin-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.4rem;
    padding: 0.1rem 0.45rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #7c3aed;
    background: #f3e8ff;
    border: 1px solid #ddd6fe;
    border-radius: 999px;
    white-space: nowrap;
}