/* BITS HRISP - Filament panel overrides
   Brand colours (new blue stacked logo):
     primary navy  #17428C  (BITS letters, primary buttons, links)
     deep navy     #0F2A5C  (net-pay band, sidebar active text, headings)
     light blue    #7BA3D1  (hover, chart: Net, subtle accents)
     tint          #EAF1FA  (subtle backgrounds, panel header tints, badges)
   Success/warning/danger keep conventional green/amber/red. */

:root {
    --bits-blue-50:  #EAF1FA;
    --bits-blue-100: #D3E2F4;
    --bits-blue-200: #A9C4E9;
    --bits-blue-300: #7BA3D1;
    --bits-blue-400: #4A7BBE;
    --bits-blue-500: #2A5BA6;
    --bits-blue-600: #17428C;
    --bits-blue-700: #123573;
    --bits-blue-800: #0F2A5C;
    --bits-blue-900: #0B1F45;
    --bits-blue-950: #071430;
    --bits-navy:    #17428C;
    --bits-navy-deep: #0F2A5C;
}

.fi-body {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

/* Primary button + interactive states - navy blue.
   Filament v4 renders actions as <button class="fi-color-primary fi-bg-color-600 fi-text-color-50 ...">,
   so target both the v3 class and the v4 utility combo. */
.fi-btn-color-primary,
.fi-btn.fi-btn-color-primary,
.fi-color-primary.fi-bg-color-600,
.fi-color-primary.fi-bg-color-500 {
    background-color: var(--bits-blue-600) !important;
    color: #fff !important;
    border-color: var(--bits-blue-700) !important;
}
.fi-btn-color-primary:hover,
.fi-btn.fi-btn-color-primary:hover,
.fi-color-primary.fi-bg-color-600:hover,
.fi-color-primary.fi-bg-color-500:hover,
.fi-color-primary.fi-bg-color-600:focus,
.fi-color-primary.fi-bg-color-500:focus {
    background-color: var(--bits-blue-700) !important;
    color: #fff !important;
}
.fi-link.fi-color-primary,
.fi-color-primary { color: var(--bits-blue-700) !important; }
.fi-color-primary.fi-text-color { color: var(--bits-blue-700) !important; }

/* Focus ring: blue-based */
.fi-input-wrp:focus-within,
.fi-select-input:focus,
.fi-input:focus,
*:focus-visible {
    --tw-ring-color: var(--bits-blue-300) !important;
}

/* Sidebar / topbar - use the blue for active nav item */
.fi-sidebar-item-active .fi-sidebar-item-button {
    background-color: var(--bits-blue-50) !important;
    color: var(--bits-blue-800) !important;
}
.fi-sidebar-item-active .fi-sidebar-item-icon {
    color: var(--bits-blue-600) !important;
}
.fi-sidebar-item-button:hover {
    background-color: var(--bits-blue-50) !important;
}
.dark .fi-sidebar-item-active .fi-sidebar-item-button {
    background-color: rgba(23, 66, 140, 0.18) !important;
    color: var(--bits-blue-300) !important;
}
.dark .fi-sidebar-item-active .fi-sidebar-item-icon {
    color: var(--bits-blue-300) !important;
}

/* Brand area */
.bits-brand {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    line-height: 1.1;
}
.bits-brand img.bits-brand-mark {
    display: block;
    height: 2.25rem;
    width: auto;
    max-width: 11rem;
    object-fit: contain;
}
.bits-brand-name {
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #0f172a;
    font-size: 1rem;
}
/* The wordmark carries the product name, so the text under it is the
   company's own name: quiet, not a second headline. */
.bits-brand-name small {
    display: block;
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0;
    color: #64748b;
}
.dark .bits-brand-name { color: #f8fafc; }
.dark .bits-brand-name small { color: #94a3b8; }

/* Login page card — stacked logo + subtitle block injected via render hook. */
.bits-login {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: 0.75rem;
}
.bits-login img.bits-login-logo {
    width: 200px;
    height: auto;
    max-width: 100%;
    display: block;
    margin: 0 auto 14px;
    background: #fff;
    border-radius: 10px;
    padding: 6px 12px;
}
.bits-login h1.bits-login-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
    letter-spacing: -0.01em;
}
.bits-login p.bits-login-subtitle {
    margin: 6px 0 0;
    color: #4b5563;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0.01em;
    display: block;
    visibility: visible;
}
.dark .bits-login p.bits-login-subtitle { color: #cbd5e1; }
.dark .bits-login h1.bits-login-title { color: #f8fafc; }

/* On the login simple layout, hide the header bits-brand (the small mark + name)
   so the full stacked logo above the form is the only brand mark. */
.fi-simple-layout .fi-simple-header .fi-logo { display: none !important; }
/* Hide Filament's default "Sign in" heading on the simple login page - the
   AUTH_LOGIN_FORM_BEFORE partial (bits-login) already renders its own h1. */
.fi-simple-layout .fi-simple-header-heading,
.fi-simple-layout .fi-simple-header-subheading { display: none !important; }

/* Sign-in button: white text on navy for WCAG AA contrast.
   Filament v4 login uses .fi-color-primary + .fi-bg-color-600 utility classes,
   so target both the v3 .fi-btn-color-primary and the v4 combo. */
.fi-btn-color-primary,
.fi-btn.fi-btn-color-primary,
.fi-color-primary.fi-bg-color-600 {
    background-color: #17428C !important; /* brand navy */
    color: #ffffff !important;
    border-color: #17428C !important;
    font-weight: 700;
}
.fi-btn-color-primary:hover,
.fi-btn.fi-btn-color-primary:hover,
.fi-btn-color-primary:focus,
.fi-btn.fi-btn-color-primary:focus,
.fi-color-primary.fi-bg-color-600:hover,
.fi-color-primary.fi-bg-color-600:focus {
    background-color: #123573 !important;
    color: #ffffff !important;
    border-color: #123573 !important;
}

/* Status badges keep their semantic colours but harmonise with blue */
.fi-badge.fi-color-primary {
    background-color: var(--bits-blue-50) !important;
    color: var(--bits-blue-800) !important;
}
.fi-badge.fi-color-success { background-color: #dcfce7 !important; color: #166534 !important; }
.fi-badge.fi-color-warning { background-color: #fef3c7 !important; color: #92400e !important; }
.fi-badge.fi-color-danger  { background-color: #fee2e2 !important; color: #991b1b !important; }
.fi-badge.fi-color-info    { background-color: #e0f2fe !important; color: #075985 !important; }

/* Stats overview numbers stay neutral, but stat icons/accents pick up blue */
.fi-wi-stats-overview-stat-value { color: #111827; }
.fi-wi-stats-overview-stat-label { color: #6b7280; }
.fi-section-header-heading { color: #111827; }

/* Stat card sizing: keep large amounts (e.g. PHP 304,228.13) on one line.
   Slightly smaller value font + responsive horizontal padding. */
.fi-wi-stats-overview-stat {
    padding: 1rem 1.1rem;
}
.fi-wi-stats-overview-stat-value {
    font-size: 1.35rem;
    line-height: 1.25;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.fi-wi-stats-overview-stat-label {
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}
@media (min-width: 1280px) {
    .fi-wi-stats-overview-stat-value { font-size: 1.45rem; }
}

/* Tighter card radius for modern feel */
.fi-section,
.fi-wi-stats-overview,
.fi-ta-ctn,
.fi-fo-tabs,
.fi-fo-tabs-tab,
.fi-card {
    border-radius: 10px !important;
}

/* Make the body class hint available so login styles work everywhere.
   Light blue-tinted gradient on the auth pages, deep navy gradient in dark. */
.bits-admin .fi-simple-layout { background: linear-gradient(180deg, #EAF1FA 0%, #ffffff 70%); }
.bits-admin.dark .fi-simple-layout { background: linear-gradient(180deg, #071430 0%, #0B1F45 100%); }

/* Tables: subtle hairline + tabular numbers */
.fi-ta-ctn table { font-variant-numeric: tabular-nums; }
.fi-ta-ctn th { letter-spacing: 0.02em; text-transform: none; }
.fi-ta-cell-numeric, .fi-ta-text-numeric { text-align: right; font-variant-numeric: tabular-nums; }

/* Table row hover/selected: blue tint */
.fi-ta-row:hover,
.fi-ta-ctn tbody tr:hover { background-color: var(--bits-blue-50) !important; }
.fi-ta-ctn .fi-selected,
.fi-ta-ctn tr.fi-selected { background-color: var(--bits-blue-50) !important; }
.dark .fi-ta-ctn tbody tr:hover { background-color: rgba(23, 66, 140, 0.18) !important; }

/* Tabs: blue accent for the active tab */
.fi-fo-tabs-tab.fi-active,
.fi-tabs-tab.fi-active { color: var(--bits-blue-700) !important; border-color: var(--bits-blue-600) !important; }

/* Toggles / switches: blue when on */
.fi-toggle.fi-on,
.fi-fo-toggle.fi-on { background-color: var(--bits-blue-600) !important; }
.fi-fo-toggle.fi-on input:checked + .fi-fo-toggle-track,
.fi-fo-toggle.fi-on .fi-fo-toggle-track { background-color: var(--bits-blue-600) !important; }

/* Payroll run summary strip: 6 compact tiles, full width. */
.bits-run-summary .fi-in-section-ctn { padding: 0.9rem 1rem; }
.bits-run-summary .fi-in-entry {
    padding: 0.65rem 0.9rem;
    border-right: 1px solid #f1f5f9;
}
.bits-run-summary .fi-in-entry:last-child { border-right: 0; }
.bits-run-summary .fi-in-entry-label {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 2px;
}
.bits-run-summary .fi-in-entry-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

/* Payroll run meta line: small text under the strip. */
.bits-run-meta .fi-in-section-ctn { padding: 0.4rem 1rem 0.8rem; }
.bits-run-meta .fi-in-entry { padding: 0.15rem 0.6rem; }
.bits-run-meta .fi-in-entry-label { font-size: 0.7rem; color: #94a3b8; }
.bits-run-meta .fi-in-entry-value { font-size: 0.8rem; color: #475569; font-weight: 500; }

/* Lazy-loaded tables: show a skeleton so the page never flashes a blank white box. */
.fi-ta-ctn.is-loading,
.fi-ta-ctn.fi-loading {
    min-height: 220px;
    position: relative;
}
.fi-ta-ctn.is-loading::before,
.fi-ta-ctn.fi-loading::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, #f8fafc 0%, #f1f5f9 50%, #f8fafc 100%);
    background-size: 200% 100%;
    animation: bits-shimmer 1.4s ease-in-out infinite;
    border-radius: 8px;
    opacity: 0.65;
    z-index: 0;
}
@keyframes bits-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.bits-skeleton-line {
    position: relative;
    height: 12px; margin: 10px 14px;
    border-radius: 4px;
    background: linear-gradient(90deg, #e2e8f0 0%, #f1f5f9 50%, #e2e8f0 100%);
    background-size: 200% 100%;
    animation: bits-shimmer 1.4s ease-in-out infinite;
    z-index: 1;
}

/* Login panel: white card on a blue-tinted background */
.bits-admin .fi-simple-main,
.bits-admin .fi-simple-content { background: transparent; }
.bits-admin .fi-simple-card {
    border-radius: 14px !important;
    box-shadow: 0 12px 32px rgba(15, 42, 92, 0.12) !important;
    border: 1px solid var(--bits-blue-50) !important;
}

/* ===== Employee portal redesign ===== */
.bits-muted { color: #64748b; font-size: 0.9rem; margin: 0; }
.bits-foot { color: #94a3b8; font-size: 0.75rem; margin: 0.75rem 0 0; }

.bits-portal-profile {
    display: flex; align-items: center; gap: 1rem;
    padding-bottom: 1rem; margin-bottom: 1rem;
    border-bottom: 1px solid #e2e8f0;
}
.bits-portal-avatar {
    flex: 0 0 auto;
    width: 64px; height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #17428C 0%, #0F2A5C 100%);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem; font-weight: 700; letter-spacing: 0.01em;
    box-shadow: 0 4px 12px rgba(23, 66, 140, 0.18);
}
.bits-portal-id { min-width: 0; }
.bits-portal-name { font-size: 1.35rem; font-weight: 700; color: #0f172a; line-height: 1.2; letter-spacing: -0.01em; }
.bits-portal-position { color: #475569; font-size: 0.9rem; margin-top: 2px; }
.bits-portal-divider { margin: 0 0.35rem; color: #cbd5e1; }

.bits-portal-fields {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem 1.5rem;
    margin: 0;
}
.bits-portal-fields > div { min-width: 0; }
.bits-portal-fields dt { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: #64748b; margin-bottom: 2px; font-weight: 600; }
.bits-portal-fields dd { margin: 0; color: #0f172a; font-size: 0.95rem; font-weight: 500; }

/* Status pill (used in profile) */
.bits-status {
    display: inline-block; padding: 2px 8px; border-radius: 999px;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em;
    background: #EAF1FA; color: #0F2A5C;
}
.bits-status-regular { background: #dcfce7; color: #166534; }
.bits-status-probationary { background: #fef3c7; color: #92400e; }
.bits-status-separated { background: #fee2e2; color: #991b1b; }

/* Tables (portal) */
.bits-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bits-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 0.9rem; }
.bits-table thead th {
    text-align: left; font-weight: 600; font-size: 0.72rem; letter-spacing: 0.06em;
    text-transform: uppercase; color: #64748b;
    padding: 0.55rem 0.75rem; border-bottom: 1px solid #e2e8f0; background: #f8fafc;
    white-space: nowrap;
}
.bits-table tbody td { padding: 0.7rem 0.75rem; border-bottom: 1px solid #f1f5f9; color: #0f172a; vertical-align: middle; }
.bits-table tbody tr:last-child td { border-bottom: 0; }
.bits-table tbody tr:hover { background-color: #f8fafc; }
.bits-num { text-align: right; font-variant-numeric: tabular-nums; }
.bits-actions { white-space: nowrap; }

.bits-net-positive { color: #0f172a; font-weight: 600; }
.bits-net-negative { color: #b91c1c; font-weight: 700; }
.bits-net-warning { color: #b91c1c; font-size: 0.7rem; font-weight: 500; margin-top: 2px; }

/* Buttons */
.bits-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.45rem 0.9rem; border-radius: 8px;
    font-size: 0.85rem; font-weight: 600; line-height: 1; cursor: pointer;
    border: 1px solid transparent; transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
    text-decoration: none; white-space: nowrap;
}
.bits-btn-primary {
    background-color: #17428C; color: #fff; border-color: #17428C;
}
.bits-btn-primary:hover { background-color: #123573; border-color: #123573; color: #fff; }
.bits-btn-primary:focus-visible { outline: 2px solid #7BA3D1; outline-offset: 2px; }
.bits-btn-ghost { background-color: transparent; color: #475569; }
.bits-btn-ghost:hover { background-color: #f1f5f9; color: #0f172a; }
.bits-btn-icon { width: 1rem; height: 1rem; flex: 0 0 auto; }
.bits-link { color: #17428C; font-weight: 600; text-decoration: none; }
.bits-link:hover { color: #123573; text-decoration: underline; }

/* Password-protected note */
.bits-payslip-note {
    display: flex; align-items: flex-start; gap: 0.5rem;
    margin: 0.85rem 0 0; padding: 0.6rem 0.8rem;
    background: #EAF1FA; color: #0F2A5C; border-radius: 8px;
    font-size: 0.8rem; line-height: 1.4;
}
.bits-note-icon { width: 1rem; height: 1rem; flex: 0 0 auto; margin-top: 2px; }

/* Documents */
.bits-doc-title { font-weight: 600; color: #0f172a; }
.bits-doc-sub { color: #64748b; font-size: 0.78rem; margin-top: 2px; }
.bits-tag {
    display: inline-block; padding: 2px 8px; border-radius: 6px;
    background: #EAF1FA; color: #0F2A5C; font-size: 0.75rem; font-weight: 600;
}

/* Leave: balance tiles */
.bits-leave-tiles {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem; margin: 0.5rem 0 1rem;
}
.bits-leave-tile {
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;
    padding: 0.85rem 0.95rem; text-align: left;
}
.bits-leave-tile-label { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: #64748b; font-weight: 600; }
.bits-leave-tile-value { font-size: 1.7rem; font-weight: 700; color: #0F2A5C; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.bits-leave-tile-sub { font-size: 0.72rem; color: #64748b; }

.bits-subheading {
    font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: #475569; font-weight: 700; margin: 1rem 0 0.6rem;
}
.bits-leave-actions { margin: 0.5rem 0 0.25rem; }

.bits-leave-form {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem;
    padding: 0.85rem; background: #f8fafc; border-radius: 10px;
    border: 1px solid #e2e8f0; margin: 0.75rem 0 1rem;
}
.bits-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bits-field label { font-size: 0.72rem; letter-spacing: 0.04em; color: #475569; font-weight: 600; }
.bits-field-wide { grid-column: 1 / -1; }
.bits-form-actions { grid-column: 1 / -1; display: flex; gap: 0.5rem; }

/* Status badges */
.bits-badge {
    display: inline-block; padding: 2px 8px; border-radius: 999px;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em;
    background: #f1f5f9; color: #334155;
}
.bits-badge-pending  { background: #fef3c7; color: #92400e; }
.bits-badge-approved { background: #dcfce7; color: #166534; }
.bits-badge-rejected { background: #fee2e2; color: #991b1b; }
.bits-badge-cancelled{ background: #e2e8f0; color: #475569; }

/* Mobile (375px) - stack the profile grid and ensure tables can scroll. */
@media (max-width: 640px) {
    .bits-portal-profile { gap: 0.75rem; }
    .bits-portal-avatar { width: 54px; height: 54px; font-size: 1.15rem; }
    .bits-portal-name { font-size: 1.15rem; }
    .bits-portal-fields { grid-template-columns: 1fr; gap: 0.6rem; }
    .bits-leave-form { grid-template-columns: 1fr; }
    .bits-table { font-size: 0.85rem; }
    .bits-table thead th, .bits-table tbody td { padding: 0.55rem 0.5rem; }
    .bits-leave-tile-value { font-size: 1.4rem; }
}
@media (max-width: 380px) {
    .bits-payslip-note { font-size: 0.75rem; }
    .bits-btn { padding: 0.4rem 0.7rem; font-size: 0.8rem; }
}

/* ===== ESS home: greeting card ===== */
.bits-greeting {
    background: linear-gradient(135deg, #17428C 0%, #0F2A5C 100%);
    color: #fff;
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
    box-shadow: 0 8px 24px rgba(15, 42, 92, 0.18);
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.bits-greeting-id { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.bits-greeting-id .bits-portal-avatar {
    width: 64px; height: 64px; font-size: 1.35rem;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    box-shadow: none;
    backdrop-filter: blur(2px);
}
.bits-greeting-id .bits-portal-id { min-width: 0; }
.bits-greeting-text { color: rgba(255, 255, 255, 0.78); font-size: 0.85rem; font-weight: 500; }
.bits-greeting-name { color: #fff; font-size: 1.5rem; font-weight: 700; margin-top: 2px; letter-spacing: -0.01em; }
.bits-greeting-position { color: rgba(255, 255, 255, 0.78); font-size: 0.85rem; margin-top: 2px; }
.bits-greeting-position .bits-portal-divider { color: rgba(255, 255, 255, 0.5); }

.bits-greeting-meta {
    display: flex; gap: 1.25rem; align-items: stretch; flex-shrink: 0;
}
.bits-greeting-meta-item {
    display: flex; flex-direction: column; gap: 2px;
    padding-left: 1.25rem;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}
.bits-greeting-meta-label {
    color: rgba(255, 255, 255, 0.6); font-size: 0.65rem;
    letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
}
.bits-greeting-meta-value { color: #fff; font-size: 0.95rem; font-weight: 600; }
.bits-greeting-meta-value .bits-status { background: rgba(255, 255, 255, 0.18); color: #fff; }

@media (max-width: 640px) {
    .bits-greeting { padding: 1rem 1.1rem; gap: 1rem; }
    .bits-greeting-name { font-size: 1.2rem; }
    .bits-greeting-meta { width: 100%; }
    .bits-greeting-meta-item { padding-left: 0.85rem; }
    .bits-greeting-meta-item:first-child { padding-left: 0; border-left: 0; }
}
@media (max-width: 380px) {
    .bits-greeting-id { gap: 0.75rem; }
    .bits-greeting-id .bits-portal-avatar { width: 50px; height: 50px; font-size: 1.1rem; }
    .bits-greeting-name { font-size: 1.05rem; }
    .bits-greeting-meta { gap: 0.75rem; }
}

/* ===== ESS home: latest payslip highlight card ===== */
.bits-latest-payslip-section .fi-section-content { padding: 0 !important; }
.bits-latest-payslip {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) auto;
    align-items: center;
    gap: 1.25rem;
    padding: 1.1rem 1.25rem;
    background: linear-gradient(180deg, #EAF1FA 0%, #ffffff 100%);
    border: 1px solid #D3E2F4;
    border-radius: 10px;
}
.bits-latest-payslip-label {
    color: var(--bits-blue-800); font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 4px;
}
.bits-latest-payslip-period { font-size: 1.25rem; font-weight: 700; color: #0F2A5C; letter-spacing: -0.01em; }
.bits-latest-payslip-date { color: #64748b; font-size: 0.8rem; margin-top: 2px; }
.bits-latest-payslip-net { padding: 0 0.5rem; border-left: 1px solid #D3E2F4; padding-left: 1.25rem; min-width: 0; }
.bits-latest-payslip-net-label {
    color: var(--bits-blue-800); font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
}
.bits-latest-payslip-net-value {
    display: flex; align-items: baseline; gap: 0.4rem; margin-top: 2px;
    color: #0F2A5C; font-variant-numeric: tabular-nums;
}
.bits-latest-payslip-net-value .bits-peso { font-size: 0.95rem; font-weight: 600; opacity: 0.7; }
.bits-latest-payslip-net-value .bits-amount { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.01em; }
.bits-latest-payslip-net-value.is-negative { color: #b91c1c; }
.bits-latest-payslip-sub { color: #64748b; font-size: 0.75rem; margin-top: 2px; font-variant-numeric: tabular-nums; }
.bits-latest-payslip-warning { color: #b91c1c; font-size: 0.7rem; font-weight: 600; margin-top: 4px; }
.bits-latest-payslip-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 768px) {
    .bits-latest-payslip {
        grid-template-columns: 1fr; gap: 0.85rem; padding: 1rem;
    }
    .bits-latest-payslip-net {
        border-left: 0; border-top: 1px solid #D3E2F4; padding: 0.75rem 0 0; margin: 0;
    }
    .bits-latest-payslip-actions { justify-content: flex-start; }
    .bits-latest-payslip-actions .bits-btn { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 380px) {
    .bits-latest-payslip-net-value .bits-amount { font-size: 1.45rem; }
}

/* ===== Secondary button (paired with primary) ===== */
.bits-btn-secondary {
    background-color: #fff; color: var(--bits-blue-700); border-color: #D3E2F4;
}
.bits-btn-secondary:hover { background-color: var(--bits-blue-50); color: var(--bits-blue-800); border-color: var(--bits-blue-200); }
.bits-btn-secondary:focus-visible { outline: 2px solid var(--bits-blue-300); outline-offset: 2px; }
.bits-btn-sm { padding: 0.4rem 0.7rem; font-size: 0.8rem; gap: 0.3rem; }
.bits-btn-sm .bits-btn-icon { width: 0.85rem; height: 0.85rem; }

/* ===== Action cell with two buttons (View + Download) ===== */
.bits-payslip-actions { display: inline-flex; gap: 0.4rem; justify-content: flex-end; align-items: center; }

/* ===== In-page payslip modal ===== */
.bits-modal-backdrop {
    position: fixed; inset: 0; background: rgba(15, 42, 92, 0.55);
    backdrop-filter: blur(2px); z-index: 60;
    animation: bits-fade 140ms ease;
}
.bits-modal-shell {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(720px, 100vw);
    background: #fff;
    z-index: 61;
    display: flex; flex-direction: column;
    box-shadow: -12px 0 32px rgba(15, 42, 92, 0.18);
    animation: bits-slide-in 220ms cubic-bezier(.2,.7,.3,1);
}
.bits-modal-header {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 0.85rem 1.1rem; border-bottom: 1px solid #e2e8f0;
    background: #f8fafc; flex-shrink: 0;
}
.bits-modal-title {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-weight: 700; color: #0F2A5C; font-size: 0.95rem;
    letter-spacing: 0.01em;
}
.bits-modal-header-actions { display: inline-flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.bits-modal-close { padding: 0.4rem 0.5rem; }
.bits-modal-body-scroll {
    flex: 1; overflow-y: auto; padding: 1rem 1.25rem 1.5rem;
    background: #f1f5f9;
}

@keyframes bits-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bits-slide-in { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

@media (max-width: 640px) {
    .bits-modal-shell { width: 100vw; }
    .bits-modal-body-scroll { padding: 0.75rem 0.75rem 1.25rem; }
    .bits-modal-header { padding: 0.75rem 0.85rem; flex-wrap: wrap; }
    .bits-modal-header-actions .bits-btn { flex: 1 1 auto; justify-content: center; }
}

/* ===== In-page modal: the payslip paper itself, scaled to fit the modal nicely ===== */
.payslip-modal-body { display: flex; justify-content: center; }
.payslip-modal-paper {
    background: #fff; width: 100%; max-width: 660px;
    padding: 14px 16px;
    box-shadow: 0 4px 18px rgba(15, 42, 92, 0.08);
    border-radius: 8px;
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    color: #0f172a; font-size: 13px; line-height: 1.45;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.payslip-modal-paper table { border-collapse: collapse; width: 100%; }
.payslip-modal-paper .payslip-head {
    background: #17428c; color: #fff;
    padding: 14px 16px; border-radius: 8px; margin-bottom: 12px; border: 0;
}
.payslip-modal-paper .payslip-head td { vertical-align: middle; border: 0; padding: 0; }
.payslip-modal-paper .payslip-head .left { width: 60%; }
.payslip-modal-paper .payslip-head .right { width: 40%; text-align: right; }
.payslip-modal-paper .payslip-head img.logo {
    background: #fff; border-radius: 6px; padding: 6px 10px;
    height: 38px; width: auto; max-width: 130px; display: block;
}
.payslip-modal-paper .payslip-head img.logo.mark { padding: 4px; height: 38px; }
.payslip-modal-paper .payslip-head .co-block { padding: 6px 0 0; }
.payslip-modal-paper .payslip-head .co { font-size: 13px; font-weight: 700; line-height: 1.25; margin: 0; color: #fff; }
.payslip-modal-paper .payslip-head .legal { display: none; }
.payslip-modal-paper .payslip-head .addr { font-size: 11px; opacity: .95; margin-top: 4px; line-height: 1.4; color: #fff; }
.payslip-modal-paper .payslip-head .head-gov { background: transparent; border: 0; padding: 0; margin: 3px 0 0; font-size: 10px; color: #fff; }
.payslip-modal-paper .payslip-head .paylabel { font-size: 12px; letter-spacing: 0.18em; font-weight: 600; opacity: .9; color: #fff; }
.payslip-modal-paper .payslip-head .period { font-size: 18px; font-weight: 700; margin-top: 4px; line-height: 1.2; color: #fff; }
.payslip-modal-paper .payslip-head .paydate { font-size: 11px; opacity: .9; margin-top: 6px; color: #fff; }
.payslip-modal-paper .payslip-head .paydate b { font-size: 12px; }

.payslip-modal-paper .payslip-emp {
    background: #f1f5f9; border: 1px solid #e2e8f0;
    border-radius: 8px; padding: 12px 14px; margin-bottom: 12px;
}
.payslip-modal-paper .payslip-emp table { border: 0; }
.payslip-modal-paper .payslip-emp td { vertical-align: top; border: 0; padding: 4px 8px 4px 0; }
.payslip-modal-paper .payslip-emp .col { width: 50%; }
.payslip-modal-paper .payslip-emp .lbl { display: block; font-size: 9px; letter-spacing: 0.1em; color: #64748b; text-transform: uppercase; margin-bottom: 2px; font-weight: 600; }
.payslip-modal-paper .payslip-emp .val { display: block; font-size: 12px; font-weight: 700; color: #0f172a; }

.payslip-modal-paper .payslip-split { width: 100%; border: 0; }
.payslip-modal-paper .payslip-split > tbody > tr > td { vertical-align: top; width: 50%; border: 0; padding: 0; }
.payslip-modal-paper .payslip-split .gap { width: 10px; }
.payslip-modal-paper .payslip-panel { border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; }
.payslip-modal-paper .payslip-panel .h { background: #f8fafc; padding: 8px 12px; border-bottom: 1px solid #e2e8f0; }
.payslip-modal-paper .payslip-panel .h .t { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; color: #475569; text-transform: uppercase; }
.payslip-modal-paper .payslip-panel .h .a { float: right; font-size: 9px; font-weight: 600; letter-spacing: 0.12em; color: #94a3b8; text-transform: uppercase; }
.payslip-modal-paper .payslip-panel table.l { border: 0; }
.payslip-modal-paper .payslip-panel table.l td { padding: 6px 12px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; font-size: 11.5px; }
.payslip-modal-paper .payslip-panel table.l tr:last-child td { border-bottom: 0; }
.payslip-modal-paper .payslip-panel table.l td.r { text-align: right; font-variant-numeric: tabular-nums; }
.payslip-modal-paper .payslip-panel table.l td.lbl { color: #0f172a; }
.payslip-modal-paper .payslip-panel table.l td.zero { color: #94a3b8; }
.payslip-modal-paper .payslip-panel table.l tr.sub td { background: #eaf1fa; font-weight: 700; }
.payslip-modal-paper .payslip-panel table.l tr.sub td.lbl { color: #1e293b; }
.payslip-modal-paper .payslip-panel table.l tr.sub td.r { color: #1e293b; }
.payslip-modal-paper .payslip-panel table.l tr.pad td { padding-top: 6px; padding-bottom: 6px; line-height: 1.4; min-height: 1.4em; }
.payslip-modal-paper .payslip-panel table.l tr.pad td span { display: inline-block; }
.payslip-modal-paper .payslip-panel table.l tr.pad-last td { border-bottom: 0; }

.payslip-modal-paper .payslip-net {
    margin-top: 12px; background: #0f2a5c; color: #fff;
    border-radius: 8px; padding: 18px 22px;
    display: table; width: 100%;
}
.payslip-modal-paper .payslip-net .left, .payslip-modal-paper .payslip-net .right { display: table-cell; vertical-align: middle; }
.payslip-modal-paper .payslip-net .left { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; opacity: .85; }
.payslip-modal-paper .payslip-net .right { text-align: right; font-variant-numeric: tabular-nums; }
.payslip-modal-paper .payslip-net .amt { font-size: 26px; font-weight: 700; letter-spacing: 0.01em; line-height: 1.1; }
.payslip-modal-paper .payslip-net .lbl2 { font-size: 9px; opacity: .65; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 3px; }
.payslip-modal-paper .payslip-net.neg { background: #b91c1c; }
.payslip-modal-paper .payslip-net.neg .warn { display: block; font-size: 10px; margin-top: 4px; letter-spacing: 0.12em; text-transform: uppercase; opacity: .95; }
.payslip-modal-paper .payslip-net .warn { display: none; }

.payslip-modal-paper .payslip-gov {
    margin-top: 10px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
    padding: 10px 0;
}
.payslip-modal-paper .payslip-gov table { border: 0; }
.payslip-modal-paper .payslip-gov td {
    vertical-align: middle; padding: 0 12px; border: 0;
    border-right: 1px solid #f1f5f9; width: 25%;
}
.payslip-modal-paper .payslip-gov td:last-child { border-right: 0; }
.payslip-modal-paper .payslip-gov .lbl { display: block; font-size: 9px; letter-spacing: 0.1em; color: #64748b; text-transform: uppercase; font-weight: 600; }
.payslip-modal-paper .payslip-gov .val { display: block; font-size: 12px; font-weight: 700; color: #0f172a; font-variant-numeric: tabular-nums; }
.payslip-modal-paper .payslip-gov .val.empty { color: #94a3b8; font-weight: 400; }
.payslip-modal-paper .payslip-gov .val.masked { color: #475569; }

.payslip-modal-paper .payslip-sig { margin-top: 28px; }
.payslip-modal-paper .payslip-sig table { border: 0; }
.payslip-modal-paper .payslip-sig td { width: 50%; padding: 22px 10px 4px; border: 0; vertical-align: top; }
.payslip-modal-paper .payslip-sig .line { border-top: 1px solid #94a3b8; padding-top: 5px; font-size: 10px; color: #475569; }
.payslip-modal-paper .payslip-sig .line b { color: #0f172a; display: block; font-size: 11px; letter-spacing: 0.04em; margin-bottom: 1px; }

.payslip-modal-paper .payslip-footer {
    margin-top: 14px; border-top: 1px solid #e2e8f0; padding: 6px 4px 0;
    font-size: 9px; color: #94a3b8; line-height: 1.5;
}
.payslip-modal-paper .payslip-footer table { border: 0; }
.payslip-modal-paper .payslip-footer td { border: 0; padding: 0 8px; vertical-align: top; }
.payslip-modal-paper .payslip-footer .l { width: 80%; }
.payslip-modal-paper .payslip-footer .r { width: 20%; text-align: right; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: #17428c; }

/* On phones the Earnings and Deductions tables stack (one above the other) */
@media (max-width: 640px) {
    .payslip-modal-paper .payslip-split > tbody > tr > td { display: block; width: 100%; padding: 0 0 8px; }
    .payslip-modal-paper .payslip-split .gap { display: none; }
    .payslip-modal-paper .payslip-emp td.col { display: block; width: 100%; padding: 4px 0; }
    .payslip-modal-paper .payslip-gov td { display: block; width: 100%; border-right: 0; border-bottom: 1px solid #f1f5f9; padding: 8px 12px; }
    .payslip-modal-paper .payslip-gov td:last-child { border-bottom: 0; }
    .payslip-modal-paper .payslip-head .left, .payslip-modal-paper .payslip-head .right { display: block; width: 100%; text-align: left; }
    .payslip-modal-paper .payslip-head .right { margin-top: 10px; }
    .payslip-modal-paper .payslip-net { padding: 14px 16px; }
    .payslip-modal-paper .payslip-net .amt { font-size: 22px; }
    .payslip-modal-paper .payslip-sig td { display: block; width: 100%; padding: 22px 0 4px; }
}

/* ===== Print stylesheet for the in-page modal: only print the payslip paper ===== */
@media print {
    body { background: #fff !important; }
    body * { visibility: hidden; }
    .payslip-modal-body, .payslip-modal-body * { visibility: visible; }
    .bits-modal-backdrop, .bits-modal-shell > .bits-modal-header { display: none !important; }
    .bits-modal-shell {
        position: static !important; box-shadow: none !important;
        width: 100% !important; height: auto !important; background: #fff !important;
    }
    .bits-modal-body-scroll { overflow: visible !important; padding: 0 !important; background: #fff !important; }
    .payslip-modal-paper { box-shadow: none !important; max-width: 100% !important; padding: 0 !important; }
}

/* ===== Mobile (375px) - stacked-card layout for portal tables ===== */
@media (max-width: 640px) {
    .bits-table thead { display: none; }
    .bits-table, .bits-table tbody, .bits-table tr, .bits-table td { display: block; width: 100%; }
    .bits-table tbody tr {
        background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
        padding: 0.6rem 0.75rem; margin-bottom: 0.6rem; box-shadow: 0 1px 2px rgba(15, 42, 92, 0.04);
    }
    .bits-table tbody td {
        display: flex; justify-content: space-between; align-items: center;
        gap: 0.5rem; padding: 0.3rem 0; border-bottom: 1px solid #f1f5f9; text-align: right;
    }
    .bits-table tbody td:last-child { border-bottom: 0; }
    .bits-table tbody td::before {
        content: attr(data-label); flex: 0 0 auto; text-align: left;
        color: #64748b; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
    }
    .bits-table tbody td.bits-actions { justify-content: flex-end; flex-wrap: wrap; }
    .bits-table tbody td.bits-payslip-actions { justify-content: flex-end; }
}

/* ===== HR Dashboard (/me) and admin HR snapshot ===== */
.bits-hr-grid {
    display: grid; grid-template-columns: 1fr; gap: 1rem;
}
@media (min-width: 900px) {
    .bits-hr-grid { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
    .bits-hr-card-wide { grid-column: 1 / -1; }
}
.bits-hr-card .fi-section-content { padding: 0.5rem 0 0; }
.bits-hr-list { list-style: none; padding: 0; margin: 0; }
.bits-hr-list > li {
    padding: 0.55rem 0; border-bottom: 1px solid #f1f5f9;
    display: flex; flex-wrap: wrap; gap: 0.4rem 0.75rem; align-items: baseline;
}
.bits-hr-list > li:last-child { border-bottom: 0; }
.bits-hr-list-tight > li { padding: 0.4rem 0; }
.bits-hr-name { font-weight: 600; color: #0f2a5c; }
.bits-hr-date { margin-left: auto; color: #64748b; font-size: 0.85rem; }
.bits-hr-ann-head { display: flex; gap: 0.5rem; align-items: center; }
.bits-hr-ann-title { font-weight: 600; color: #0f2a5c; }
.bits-hr-ann-date { color: #94a3b8; font-size: 0.75rem; }
.bits-hr-ann-body { color: #475569; }
.bits-hr-ann-body summary { cursor: pointer; color: var(--bits-blue-700, #123573); font-size: 0.85rem; }
.bits-hr-ann-body p { margin: 0.4rem 0 0; }
.bits-hr-job {
    flex-direction: column; align-items: stretch; gap: 0.25rem;
    padding: 0.7rem 0; border-bottom: 1px solid #f1f5f9;
}
.bits-hr-job:last-child { border-bottom: 0; }
.bits-hr-job-head { display: flex; gap: 0.5rem; align-items: center; }
.bits-hr-job-title { font-weight: 600; color: #0f2a5c; font-size: 1rem; }
.bits-hr-job-meta { color: #64748b; font-size: 0.85rem; }
.bits-hr-job-desc { color: #334155; margin: 0.3rem 0 0; }
.bits-hr-foot { color: #64748b; font-size: 0.85rem; margin-top: 0.5rem; }
.bits-hr-month { margin-top: 0.4rem; }
.bits-hr-month-label {
    color: var(--bits-blue-700, #123573); font-weight: 600; font-size: 0.85rem;
    text-transform: uppercase; letter-spacing: 0.05em; padding-top: 0.4rem;
}
.bits-tag-sm { font-size: 0.7rem; padding: 0.05rem 0.4rem; }
.bits-tag-pin { background: #fff7ed; color: #9a3412; }

/* Admin HR snapshot row: stat tiles + the two large cards */
.bits-hr-snapshot-tiles {
    display: grid; gap: 0.75rem; grid-template-columns: 1fr;
}
@media (min-width: 700px) { .bits-hr-snapshot-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .bits-hr-snapshot-tiles { grid-template-columns: repeat(5, 1fr); } }
.bits-hr-tile {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid #e2e8f0; border-radius: 12px;
    padding: 0.85rem 1rem; box-shadow: 0 1px 2px rgba(15, 42, 92, 0.04);
}
.bits-hr-tile-label { color: #64748b; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.bits-hr-tile-value { color: #0f2a5c; font-weight: 700; font-size: 1.6rem; margin-top: 0.25rem; }
.bits-hr-tile-sub { color: #64748b; font-size: 0.78rem; margin-top: 0.2rem; }
.bits-hr-tile-link { color: var(--bits-blue-700, #123573); font-weight: 600; font-size: 0.8rem; }
.bits-hr-bar { display: flex; height: 6px; border-radius: 4px; overflow: hidden; margin-top: 0.5rem; background: #f1f5f9; }
.bits-hr-bar > span { display: block; }
.bits-hr-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; margin-top: 0.4rem; color: #475569; font-size: 0.78rem; }
.bits-hr-legend > span::before {
    content: ''; display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 2px;
    margin-right: 0.3rem; vertical-align: middle; background: var(--bits-blue-600, #17428C);
}
.bits-hr-snapshot-row { display: grid; gap: 0.75rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .bits-hr-snapshot-row { grid-template-columns: 1fr 1fr; } }

/* ====================================================================
   HR Dashboard redesign (v2) - high-end SaaS layout
   - 12-col responsive grid
   - 20-24px gaps, 12-16px radius, 1px #E5E7EB, soft shadow
   - card header with tinted icon chip, semibold title
   - timeline + avatar lists
   ==================================================================== */

.bits-hr2-page { background: #F8FAFC; }

/* ---- Page title + meta line ---- */
.bits-hr2-page-head {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: 0.5rem;
}
.bits-hr2-page-title { font-size: 1.75rem; font-weight: 600; color: #0f172a; letter-spacing: -0.01em; margin: 0; }
@media (min-width: 1024px) { .bits-hr2-page-title { font-size: 1.75rem; } }
.bits-hr2-page-sub { color: #64748b; font-size: 0.9rem; margin: 0; }

/* ---- Hero strip (greeting + quick facts) ---- */
.bits-hr2-hero {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.25rem 2rem; flex-wrap: wrap;
    background: linear-gradient(135deg, #17428C 0%, #0F2A5C 100%);
    color: #fff;
    border-radius: 16px;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 8px 24px rgba(15, 42, 92, 0.18);
    margin: 0.5rem 0 1.5rem;
    position: relative; overflow: hidden;
}
.bits-hr2-hero::before {
    content: ''; position: absolute; right: -60px; top: -60px;
    width: 200px; height: 200px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255,255,255,0.08), rgba(255,255,255,0));
    pointer-events: none;
}
.bits-hr2-hero-id { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.bits-hr2-hero-id .bits-hr2-avatar {
    background: rgba(255,255,255,0.2) !important; color: #fff !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
    backdrop-filter: blur(2px);
}
.bits-hr2-hero-greeting { font-size: 0.95rem; color: rgba(255,255,255,0.78); font-weight: 500; }
.bits-hr2-hero-name { color: #fff; font-weight: 700; }
.bits-hr2-hero-date { color: rgba(255,255,255,0.7); font-size: 0.85rem; margin-top: 2px; }
.bits-hr2-hero-facts { display: flex; gap: 0.25rem 1.5rem; align-items: stretch; flex-wrap: wrap; }
.bits-hr2-hero-fact { display: flex; flex-direction: column; gap: 2px; padding-left: 1.25rem; border-left: 1px solid rgba(255,255,255,0.2); min-width: 0; }
.bits-hr2-hero-fact:first-child { padding-left: 0; border-left: 0; }
.bits-hr2-hero-fact-label { color: rgba(255,255,255,0.6); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.bits-hr2-hero-fact-value { color: #fff; font-size: 1.1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
    .bits-hr2-hero { padding: 1.1rem 1.1rem; gap: 1rem; }
    .bits-hr2-hero-facts { width: 100%; }
    .bits-hr2-hero-fact { padding-left: 0.85rem; }
}
@media (max-width: 380px) { .bits-hr2-hero { padding: 0.85rem 0.9rem; } }

/* ---- 12-col responsive grid ---- */
.bits-hr2-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.bits-hr2-col-4 { grid-column: span 1; }
.bits-hr2-col-8 { grid-column: span 1; }
.bits-hr2-col-12 { grid-column: span 1; }
@media (min-width: 768px) {
    .bits-hr2-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
    .bits-hr2-col-4 { grid-column: span 2; }
    .bits-hr2-col-8 { grid-column: span 4; }
    .bits-hr2-col-12 { grid-column: span 4; }
}
@media (min-width: 1024px) {
    .bits-hr2-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem; }
    .bits-hr2-col-4 { grid-column: span 4; }
    .bits-hr2-col-8 { grid-column: span 8; }
    .bits-hr2-col-12 { grid-column: span 12; }
}

/* ---- Card (override Filament section) ---- */
.bits-hr2-card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    padding: 20px 22px;
    display: flex; flex-direction: column;
    min-width: 0;
    position: relative;
    transition: box-shadow 150ms ease;
}
.bits-hr2-card:hover { box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06); }
.bits-hr2-card-tinted { background: linear-gradient(180deg, #F8FAFC 0%, #fff 100%); }
.bits-hr2-card .fi-section-content-ctn,
.bits-hr2-card .fi-section-content,
.bits-hr2-card .fi-in-section-ctn { padding: 0 !important; }

.bits-hr2-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; }
.bits-hr2-card-title { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.bits-hr2-card-heading { font-size: 1rem; font-weight: 600; color: #0f172a; margin: 0; letter-spacing: -0.005em; line-height: 1.2; }
.bits-hr2-card-actions { display: inline-flex; gap: 0.4rem; align-items: center; }
.bits-hr2-ghostlink { color: #17428C; font-size: 0.85rem; font-weight: 600; text-decoration: none; padding: 0.2rem 0.4rem; border-radius: 6px; }
.bits-hr2-ghostlink:hover { background: #EAF1FA; color: #123573; text-decoration: none; }
.bits-hr2-card-body { flex: 1; min-width: 0; }

.bits-hr2-iconchip {
    width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
    background: #EAF1FA; color: #17428C;
    display: inline-flex; align-items: center; justify-content: center;
}
.bits-hr2-iconchip-svg { width: 20px; height: 20px; }

/* ---- Avatar (initials) ---- */
.bits-hr2-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; font-weight: 700; letter-spacing: 0.01em;
    flex-shrink: 0; line-height: 1; user-select: none;
}
.bits-hr2-avatar-sm { width: 28px; height: 28px; font-size: 0.7rem; }
.bits-hr2-avatar-md { width: 36px; height: 36px; font-size: 0.85rem; }
.bits-hr2-avatar-lg { width: 56px; height: 56px; font-size: 1.15rem; }

/* ---- Pill / badge ---- */
.bits-hr2-pill {
    display: inline-flex; align-items: center; gap: 0.3rem;
    border-radius: 999px; font-weight: 600; line-height: 1;
    border: 1px solid transparent; white-space: nowrap;
}
.bits-hr2-pill-sm { padding: 2px 8px; font-size: 0.7rem; }
.bits-hr2-pill-md { padding: 4px 10px; font-size: 0.78rem; }
.bits-hr2-pill-icon { width: 0.85rem; height: 0.85rem; flex: 0 0 auto; }
.bits-hr2-pill-neutral { background: #F1F5F9; color: #334155; }
.bits-hr2-pill-primary { background: #EAF1FA; color: #17428C; }
.bits-hr2-pill-success { background: #DCFCE7; color: #166534; }
.bits-hr2-pill-warning { background: #FEF3C7; color: #92400E; }
.bits-hr2-pill-danger  { background: #FEE2E2; color: #991B1B; }
.bits-hr2-pill-info    { background: #E0F2FE; color: #075985; }
.bits-hr2-pill-purple  { background: #EDE9FE; color: #5B21B6; }
.bits-hr2-pill-teal    { background: #CCFBF1; color: #0F766E; }
.bits-hr2-pill-amber   { background: #FFFBEB; color: #92400E; border-color: #FCD34D; }

/* ---- Empty state ---- */
.bits-hr2-empty { text-align: center; padding: 1.5rem 0.5rem; color: #64748b; }
.bits-hr2-empty-art { display: flex; justify-content: center; margin-bottom: 0.5rem; }
.bits-hr2-empty-art svg { width: 64px; height: 64px; }
.bits-hr2-empty-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 0.5rem;
    background: #F1F5F9; color: #94a3b8;
}
.bits-hr2-empty-icon-svg { width: 28px; height: 28px; }
.bits-hr2-empty-title { font-size: 0.95rem; font-weight: 600; color: #334155; margin: 0 0 0.15rem; }
.bits-hr2-empty-text { font-size: 0.85rem; color: #64748b; margin: 0; }
.bits-hr2-empty-action { margin-top: 0.85rem; }

/* ---- Stat tile (admin HR snapshot, also reusable) ---- */
.bits-hr2-tile {
    background: #fff; border: 1px solid #E5E7EB; border-radius: 14px;
    padding: 1rem 1.1rem; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    display: flex; flex-direction: column; gap: 0.4rem; min-width: 0;
    height: 100%;
}
.bits-hr2-tile-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.bits-hr2-tile-label { color: #64748b; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.bits-hr2-tile-iconchip {
    width: 32px; height: 32px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.bits-hr2-tile-iconchip-svg { width: 18px; height: 18px; }
.bits-hr2-tile-value {
    color: #0F2A5C; font-weight: 700;
    font-size: 1.6rem; line-height: 1.15; letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.bits-hr2-tile-delta { font-size: 0.78rem; font-weight: 600; color: #166534; }
.bits-hr2-tile-sub { font-size: 0.78rem; color: #64748b; line-height: 1.35; }
.bits-hr2-tile-link {
    font-size: 0.82rem; font-weight: 600; color: #17428C; text-decoration: none;
    margin-top: auto;
}
.bits-hr2-tile-link:hover { color: #123573; text-decoration: underline; }
.bits-hr2-tile-slot { margin-top: auto; }

.bits-hr2-tile-tone-primary .bits-hr2-tile-iconchip { background: #EAF1FA; color: #17428C; }
.bits-hr2-tile-tone-success .bits-hr2-tile-iconchip { background: #DCFCE7; color: #166534; }
.bits-hr2-tile-tone-warning .bits-hr2-tile-iconchip { background: #FEF3C7; color: #92400E; }
.bits-hr2-tile-tone-danger  .bits-hr2-tile-iconchip { background: #FEE2E2; color: #991B1B; }
.bits-hr2-tile-tone-info    .bits-hr2-tile-iconchip { background: #E0F2FE; color: #075985; }
.bits-hr2-tile-tone-purple  .bits-hr2-tile-iconchip { background: #EDE9FE; color: #5B21B6; }
.bits-hr2-tile-tone-teal    .bits-hr2-tile-iconchip { background: #CCFBF1; color: #0F766E; }

/* ---- Announcements ---- */
.bits-hr2-ann-list { display: flex; flex-direction: column; }
.bits-hr2-ann {
    position: relative; padding: 0.85rem 0 0.85rem 1rem;
    border-bottom: 1px solid #F1F5F9;
    margin-left: 2px;
}
.bits-hr2-ann:last-child { border-bottom: 0; padding-bottom: 0; }
.bits-hr2-ann::before {
    content: ''; position: absolute; left: 0; top: 0.85rem; bottom: 0.85rem;
    width: 3px; border-radius: 2px; background: #E2E8F0;
}
.bits-hr2-ann-pin::before { background: #F59E0B; }
.bits-hr2-ann-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.bits-hr2-ann-title { font-size: 0.9rem; font-weight: 600; color: #111827; }
.bits-hr2-ann-body { color: #475569; font-size: 0.85rem; margin-top: 0.35rem; line-height: 1.45; }
.bits-hr2-ann-body summary {
    cursor: pointer; color: #17428C; font-size: 0.8rem; font-weight: 600;
    list-style: none; display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.15rem 0; margin-top: 0.2rem;
}
.bits-hr2-ann-body summary::-webkit-details-marker { display: none; }
.bits-hr2-ann-body summary::before { content: '▸'; font-size: 0.7rem; transition: transform 150ms ease; }
.bits-hr2-ann-body[open] summary::before { transform: rotate(90deg); }
.bits-hr2-ann-body p { margin: 0.45rem 0 0; white-space: pre-wrap; }
.bits-hr2-ann-meta { color: #94a3b8; font-size: 0.75rem; margin-top: 0.4rem; display: inline-flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.bits-hr2-ann-meta strong { color: #475569; font-weight: 500; }
.bits-hr2-ann-dot { width: 3px; height: 3px; border-radius: 50%; background: #CBD5E1; display: inline-block; }

/* ---- Celebrations ---- */
.bits-hr2-celeb-group { margin-bottom: 1.1rem; }
.bits-hr2-celeb-group:last-child { margin-bottom: 0; }
.bits-hr2-celeb-group-label {
    color: #64748b; font-size: 0.7rem; letter-spacing: 0.08em;
    text-transform: uppercase; font-weight: 600; margin: 0 0 0.5rem;
}
.bits-hr2-celeb-list { display: flex; flex-direction: column; gap: 0.55rem; }
.bits-hr2-celeb {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.45rem 0.1rem; border-radius: 8px;
}
.bits-hr2-celeb-id { min-width: 0; flex: 1; }
.bits-hr2-celeb-name { font-size: 0.88rem; font-weight: 600; color: #0f172a; line-height: 1.2; }
.bits-hr2-celeb-sub { font-size: 0.75rem; color: #64748b; margin-top: 2px; }
.bits-hr2-celeb-when { font-size: 0.78rem; color: #475569; font-weight: 500; white-space: nowrap; }

/* ---- Who's out (rows) ---- */
.bits-hr2-out-list { display: flex; flex-direction: column; gap: 0.55rem; }
.bits-hr2-out {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.45rem 0.1rem;
}
.bits-hr2-out-id { min-width: 0; flex: 1; }
.bits-hr2-out-name { font-size: 0.88rem; font-weight: 600; color: #0f172a; }
.bits-hr2-out-sub { font-size: 0.75rem; color: #64748b; margin-top: 2px; }
.bits-hr2-out-dates { font-size: 0.78rem; color: #475569; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---- New joiners ---- */
.bits-hr2-join-list { display: flex; flex-direction: column; gap: 0.55rem; }
.bits-hr2-join {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.45rem 0.1rem;
}
.bits-hr2-join-id { min-width: 0; flex: 1; }
.bits-hr2-join-name { font-size: 0.88rem; font-weight: 600; color: #0f172a; }
.bits-hr2-join-sub { font-size: 0.75rem; color: #64748b; margin-top: 2px; }
.bits-hr2-join-when { font-size: 0.78rem; color: #475569; font-weight: 500; white-space: nowrap; }

/* ---- Hiring (job cards) ---- */
.bits-hr2-jobs { display: flex; flex-direction: column; gap: 0.85rem; }
.bits-hr2-job {
    border: 1px solid #E5E7EB; border-radius: 12px;
    padding: 0.95rem 1rem; background: #fff;
    display: flex; flex-direction: column; gap: 0.4rem;
}
.bits-hr2-job-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.bits-hr2-job-title { font-size: 0.95rem; font-weight: 600; color: #0f172a; }
.bits-hr2-job-meta { display: flex; gap: 0.5rem 0.85rem; flex-wrap: wrap; color: #64748b; font-size: 0.78rem; }
.bits-hr2-job-meta-item { display: inline-flex; align-items: center; gap: 0.3rem; }
.bits-hr2-job-meta-svg { width: 0.85rem; height: 0.85rem; color: #94a3b8; }
.bits-hr2-job-desc { color: #475569; font-size: 0.85rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bits-hr2-job-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.25rem; }
.bits-hr2-btn-outline {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.4rem 0.75rem; border: 1px solid #D3E2F4; color: #17428C;
    background: #fff; border-radius: 8px; font-size: 0.8rem; font-weight: 600;
    text-decoration: none; transition: background 120ms ease;
}
.bits-hr2-btn-outline:hover { background: #EAF1FA; color: #123573; }
.bits-hr2-btn-outline-svg { width: 0.85rem; height: 0.85rem; }

/* ---- Upcoming (timeline) ---- */
.bits-hr2-timeline { display: flex; flex-direction: column; gap: 1.25rem; }
.bits-hr2-timeline-month { display: flex; flex-direction: column; gap: 0.5rem; }
.bits-hr2-timeline-month-label {
    color: #17428C; font-size: 0.78rem; letter-spacing: 0.08em;
    text-transform: uppercase; font-weight: 700; margin: 0;
}
.bits-hr2-timeline-list { display: flex; flex-direction: column; gap: 0.4rem; }
.bits-hr2-timeline-item {
    display: flex; align-items: center; gap: 0.85rem;
    padding: 0.55rem 0.5rem; border-radius: 10px;
    background: #fff; border: 1px solid #F1F5F9;
}
.bits-hr2-timeline-item-main { min-width: 0; flex: 1; }
.bits-hr2-timeline-item-title { font-size: 0.9rem; font-weight: 600; color: #0f172a; line-height: 1.25; }
.bits-hr2-timeline-item-sub { font-size: 0.75rem; color: #64748b; margin-top: 2px; }
.bits-hr2-timeline-item-trail { display: inline-flex; align-items: center; gap: 0.4rem; color: #475569; font-size: 0.78rem; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Date chip variants */
.bits-hr2-datechip {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    width: 52px; height: 56px; border-radius: 10px; flex-shrink: 0;
    background: #F1F5F9; color: #334155; line-height: 1;
}
.bits-hr2-datechip-day { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.bits-hr2-datechip-month { font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; margin-top: 2px; color: #64748b; }
.bits-hr2-datechip-weekday { font-size: 0.62rem; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 600; margin-top: 1px; color: #94a3b8; }
.bits-hr2-datechip-payday  { background: #EAF1FA; color: #17428C; }
.bits-hr2-datechip-payday  .bits-hr2-datechip-month,
.bits-hr2-datechip-payday  .bits-hr2-datechip-weekday { color: #17428C; opacity: 0.7; }
.bits-hr2-datechip-holiday { background: #DBEAFE; color: #1E3A8A; }
.bits-hr2-datechip-holiday .bits-hr2-datechip-month,
.bits-hr2-datechip-holiday .bits-hr2-datechip-weekday { color: #1E3A8A; opacity: 0.7; }
.bits-hr2-datechip-event   { background: #CCFBF1; color: #0F766E; }
.bits-hr2-datechip-event   .bits-hr2-datechip-month,
.bits-hr2-datechip-event   .bits-hr2-datechip-weekday { color: #0F766E; opacity: 0.7; }
.bits-hr2-datechip-training { background: #EDE9FE; color: #5B21B6; }
.bits-hr2-datechip-training .bits-hr2-datechip-month,
.bits-hr2-datechip-training .bits-hr2-datechip-weekday { color: #5B21B6; opacity: 0.7; }

/* ---- Skeleton shimmer ---- */
.bits-hr2-skel { background: linear-gradient(90deg, #e2e8f0 0%, #f1f5f9 50%, #e2e8f0 100%); background-size: 200% 100%; border-radius: 6px; animation: bits-shimmer 1.4s ease-in-out infinite; }
@keyframes bits-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---- Stat row (used in admin) ---- */
.bits-hr2-stat-row { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .bits-hr2-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .bits-hr2-stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .bits-hr2-stat-row { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.bits-hr2-stat-row .bits-hr2-tile { font-size: 0.78rem; }

/* ---- Show more / less in lists ---- */
.bits-hr2-showmore {
    display: block; width: 100%; margin-top: 0.85rem;
    text-align: center; padding: 0.45rem 0.75rem;
    color: #17428C; background: #F8FAFC; border: 1px solid #E5E7EB;
    border-radius: 8px; font-size: 0.82rem; font-weight: 600;
    cursor: pointer; transition: background 120ms ease;
}
.bits-hr2-showmore:hover { background: #EAF1FA; color: #123573; }

/* ---- Dark mode ---- */
.dark .bits-hr2-page { background: #0B1220; }
.dark .bits-hr2-card { background: #0F172A; border-color: #1F2937; box-shadow: 0 1px 2px rgba(0,0,0,0.4); }
.dark .bits-hr2-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.5); }
.dark .bits-hr2-card-tinted { background: linear-gradient(180deg, #0F172A 0%, #0B1220 100%); }
.dark .bits-hr2-card-heading { color: #F8FAFC; }
.dark .bits-hr2-page-title { color: #F8FAFC; }
.dark .bits-hr2-page-sub { color: #94a3b8; }
.dark .bits-hr2-tile { background: #0F172A; border-color: #1F2937; box-shadow: 0 1px 2px rgba(0,0,0,0.4); }
.dark .bits-hr2-tile-value { color: #E2E8F0; }
.dark .bits-hr2-tile-label { color: #94a3b8; }
.dark .bits-hr2-tile-sub { color: #94a3b8; }
.dark .bits-hr2-ann { border-color: #1F2937; }
.dark .bits-hr2-ann::before { background: #334155; }
.dark .bits-hr2-ann-title { color: #F1F5F9; }
.dark .bits-hr2-ann-body { color: #CBD5E1; }
.dark .bits-hr2-ann-body summary { color: #7BA3D1; }
.dark .bits-hr2-ann-meta { color: #64748b; }
.dark .bits-hr2-celeb-name,
.dark .bits-hr2-out-name,
.dark .bits-hr2-join-name { color: #F1F5F9; }
.dark .bits-hr2-celeb-sub,
.dark .bits-hr2-out-sub,
.dark .bits-hr2-join-sub { color: #94a3b8; }
.dark .bits-hr2-celeb-when,
.dark .bits-hr2-out-dates,
.dark .bits-hr2-join-when { color: #CBD5E1; }
.dark .bits-hr2-celeb-group-label { color: #94a3b8; }
.dark .bits-hr2-job { background: #0F172A; border-color: #1F2937; }
.dark .bits-hr2-job-title { color: #F1F5F9; }
.dark .bits-hr2-job-desc { color: #CBD5E1; }
.dark .bits-hr2-job-meta { color: #94a3b8; }
.dark .bits-hr2-timeline-month-label { color: #7BA3D1; }
.dark .bits-hr2-timeline-item { background: #0F172A; border-color: #1F2937; }
.dark .bits-hr2-timeline-item-title { color: #F1F5F9; }
.dark .bits-hr2-timeline-item-sub { color: #94a3b8; }
.dark .bits-hr2-timeline-item-trail { color: #CBD5E1; }
.dark .bits-hr2-showmore { background: #0F172A; border-color: #1F2937; color: #7BA3D1; }
.dark .bits-hr2-showmore:hover { background: #1E293B; color: #BAE6FD; }
.dark .bits-hr2-empty { color: #94a3b8; }
.dark .bits-hr2-empty-title { color: #CBD5E1; }
.dark .bits-hr2-empty-text { color: #94a3b8; }
.dark .bits-hr2-empty-icon { background: #1E293B; color: #64748B; }
.dark .bits-hr2-pill-neutral { background: #1E293B; color: #CBD5E1; }
.dark .bits-hr2-btn-outline { background: #0F172A; border-color: #1E3A8A; color: #93C5FD; }
.dark .bits-hr2-btn-outline:hover { background: #1E3A8A33; color: #BAE6FD; }
.dark .bits-hr2-datechip { background: #1E293B; color: #CBD5E1; }
.dark .bits-hr2-datechip-month,
.dark .bits-hr2-datechip-weekday { color: #94a3b8; }
.dark .bits-hr2-datechip-payday  { background: #1E3A8A33; color: #93C5FD; }
.dark .bits-hr2-datechip-payday  .bits-hr2-datechip-month,
.dark .bits-hr2-datechip-payday  .bits-hr2-datechip-weekday { color: #93C5FD; }
.dark .bits-hr2-datechip-holiday { background: #1E3A8A33; color: #BFDBFE; }
.dark .bits-hr2-datechip-event   { background: #134E4A33; color: #5EEAD4; }
.dark .bits-hr2-datechip-training { background: #4C1D9533; color: #C4B5FD; }


/* ====================================================================
   My Attendance page (/me/my-attendance)
   Premium SaaS calendar + stat tiles + punches + correction form
   ==================================================================== */

.bits-att-page { display: flex; flex-direction: column; gap: 1.25rem; }

/* ---- Today card ---- */
.bits-att-today {
    display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem;
}
.bits-att-today-main { min-width: 0; flex: 1 1 280px; display: flex; flex-direction: column; gap: 0.4rem; }
.bits-att-today-detail { color: #475569; font-size: 0.9rem; margin: 0; line-height: 1.4; }
.bits-att-today-schedule {
    display: inline-flex; align-items: center; gap: 0.5rem;
    color: #475569; font-size: 0.82rem; margin: 0;
}
.bits-att-today-schedule-label {
    color: #64748b; font-size: 0.7rem; letter-spacing: 0.06em;
    text-transform: uppercase; font-weight: 600;
}
.bits-att-today-schedule-value {
    color: #0F2A5C; font-weight: 600; font-variant-numeric: tabular-nums;
}
.bits-att-today-times { display: flex; gap: 1rem; flex-shrink: 0; }
.bits-att-time-block {
    display: flex; flex-direction: column; gap: 2px;
    padding: 0.6rem 0.85rem; min-width: 88px;
    background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 10px;
}
.bits-att-time-label {
    color: #64748b; font-size: 0.65rem; letter-spacing: 0.08em;
    text-transform: uppercase; font-weight: 600;
}
.bits-att-time-value {
    color: #0F2A5C; font-size: 1.2rem; font-weight: 700;
    font-variant-numeric: tabular-nums; line-height: 1.1;
}
.bits-att-time-sub { color: #94a3b8; font-size: 0.7rem; }
.bits-att-today-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ---- Calendar ---- */
.bits-att-cal { width: 100%; }
.bits-att-cal-head {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px; margin-bottom: 6px;
}
.bits-att-cal-dow {
    text-align: center; color: #64748b; font-size: 0.7rem;
    letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
    padding: 0.2rem 0;
}
.bits-att-cal-grid {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-auto-rows: 1fr; gap: 6px;
}
.bits-att-cal-cell {
    appearance: none; border: 1px solid #E5E7EB; background: #fff;
    border-radius: 10px; padding: 0.4rem 0.35rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; min-height: 64px;
    cursor: pointer; transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
    text-align: center; line-height: 1.1;
    font: inherit; color: #0f172a;
}
.bits-att-cal-cell:hover {
    border-color: #7BA3D1; box-shadow: 0 2px 6px rgba(15, 42, 92, 0.08);
    transform: translateY(-1px);
}
.bits-att-cal-cell:focus-visible {
    outline: 2px solid #17428C; outline-offset: 2px;
}
.bits-att-cal-cell-leading { background: transparent !important; border: 0 !important; cursor: default; pointer-events: none; }
.bits-att-cal-cell-leading:hover { transform: none; box-shadow: none; }
.bits-att-cal-day { font-size: 0.95rem; font-weight: 700; color: #0F2A5C; font-variant-numeric: tabular-nums; }
.bits-att-cal-text {
    font-size: 0.62rem; letter-spacing: 0.02em; color: #475569;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.bits-att-cal-dot { display: none; }
.bits-att-cal-cell.is-today {
    border-color: #17428C; box-shadow: 0 0 0 2px rgba(23, 66, 140, 0.25);
}

/* Status colours: subtle background + coloured dot/text */
.bits-att-cal-cell--present { background: #ECFDF5; border-color: #A7F3D0; }
.bits-att-cal-cell--present .bits-att-cal-day { color: #065F46; }
.bits-att-cal-cell--present .bits-att-cal-text { color: #047857; }

.bits-att-cal-cell--late    { background: #FFFBEB; border-color: #FCD34D; }
.bits-att-cal-cell--late    .bits-att-cal-day { color: #92400E; }
.bits-att-cal-cell--late    .bits-att-cal-text { color: #92400E; }

.bits-att-cal-cell--absent  { background: #FEF2F2; border-color: #FECACA; }
.bits-att-cal-cell--absent  .bits-att-cal-day { color: #991B1B; }
.bits-att-cal-cell--absent  .bits-att-cal-text { color: #B91C1C; }

.bits-att-cal-cell--rest_day { background: #F8FAFC; border-color: #E2E8F0; }
.bits-att-cal-cell--rest_day .bits-att-cal-day { color: #475569; }
.bits-att-cal-cell--rest_day .bits-att-cal-text { color: #64748b; }

.bits-att-cal-cell--holiday { background: #FFFBEB; border-color: #FDE68A; }
.bits-att-cal-cell--holiday .bits-att-cal-day { color: #92400E; }
.bits-att-cal-cell--holiday .bits-att-cal-text { color: #92400E; }

.bits-att-cal-cell--leave   { background: #EFF6FF; border-color: #BFDBFE; }
.bits-att-cal-cell--leave   .bits-att-cal-day { color: #1E3A8A; }
.bits-att-cal-cell--leave   .bits-att-cal-text { color: #1D4ED8; }

.bits-att-cal-cell--incomplete { background: #FFF7ED; border-color: #FED7AA; }
.bits-att-cal-cell--incomplete .bits-att-cal-day { color: #9A3412; }
.bits-att-cal-cell--incomplete .bits-att-cal-text { color: #C2410C; }

.bits-att-cal-cell--exempt  { background: #F5F3FF; border-color: #DDD6FE; }
.bits-att-cal-cell--exempt  .bits-att-cal-day { color: #5B21B6; }
.bits-att-cal-cell--exempt  .bits-att-cal-text { color: #6D28D9; }

.bits-att-cal-cell--future  { background: #FFFFFF; border-color: #F1F5F9; }
.bits-att-cal-cell--future  .bits-att-cal-day { color: #94a3b8; }

.bits-att-cal-cell--blank   { background: transparent; border: 0; cursor: default; pointer-events: none; }
.bits-att-cal-cell--blank:hover { transform: none; box-shadow: none; }

/* ---- Calendar legend ---- */
.bits-att-cal-legend {
    display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: 0.85rem;
    color: #475569; font-size: 0.75rem;
}
.bits-att-cal-legend-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.bits-att-cal-legend-dot {
    display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 3px;
    border: 1px solid transparent;
}
.bits-att-cal-legend-dot.bits-att-cal-cell--present { background: #ECFDF5; border-color: #A7F3D0; }
.bits-att-cal-legend-dot.bits-att-cal-cell--late { background: #FFFBEB; border-color: #FCD34D; }
.bits-att-cal-legend-dot.bits-att-cal-cell--absent { background: #FEF2F2; border-color: #FECACA; }
.bits-att-cal-legend-dot.bits-att-cal-cell--rest_day { background: #F8FAFC; border-color: #E2E8F0; }
.bits-att-cal-legend-dot.bits-att-cal-cell--holiday { background: #FFFBEB; border-color: #FDE68A; }
.bits-att-cal-legend-dot.bits-att-cal-cell--leave { background: #EFF6FF; border-color: #BFDBFE; }
.bits-att-cal-legend-dot.bits-att-cal-cell--incomplete { background: #FFF7ED; border-color: #FED7AA; }
.bits-att-cal-hint {
    color: #94a3b8; font-size: 0.72rem; margin: 0.6rem 0 0; text-align: right;
}

/* ---- My punches list ---- */
.bits-att-punches {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 0.5rem;
}
.bits-att-punch {
    display: flex; gap: 0.75rem; align-items: center;
    padding: 0.6rem 0.75rem;
    background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 10px;
}
.bits-att-punch-selfie { flex: 0 0 auto; }
.bits-att-punch-img {
    width: 44px; height: 44px; border-radius: 50%;
    object-fit: cover; border: 1px solid #E2E8F0; background: #F1F5F9;
    display: block;
}
.bits-att-punch-noimg {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    background: #E2E8F0; color: #94a3b8;
}
.bits-att-punch-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 0.25rem; }
.bits-att-punch-when { display: flex; gap: 0.5rem; align-items: baseline; }
.bits-att-punch-time { color: #0F2A5C; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.95rem; }
.bits-att-punch-date { color: #94a3b8; font-size: 0.72rem; }
.bits-att-punch-meta { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.bits-att-punch-source { color: #475569; font-size: 0.78rem; font-weight: 600; }
.bits-att-punch-site { color: #64748b; font-size: 0.72rem; }
.bits-att-punch-flags { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 2px; }

/* ---- Correction form ---- */
.bits-att-corr-form { display: flex; flex-direction: column; gap: 0.75rem; }
.bits-att-corr-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.bits-att-corr-btn { margin-top: 0.5rem; }
.bits-att-corr-list { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid #E2E8F0; }
.bits-att-corr-list-title {
    color: #64748b; font-size: 0.7rem; letter-spacing: 0.08em;
    text-transform: uppercase; font-weight: 700; margin: 0 0 0.5rem;
}
.bits-att-corr-items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.bits-att-corr-item {
    display: flex; gap: 0.75rem; align-items: flex-start; justify-content: space-between;
    background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 10px;
    padding: 0.65rem 0.85rem;
}
.bits-att-corr-item-info { min-width: 0; flex: 1; }
.bits-att-corr-item-head { display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; }
.bits-att-corr-item-date { color: #0F2A5C; font-weight: 700; font-size: 0.85rem; }
.bits-att-corr-item-type { color: #475569; font-size: 0.78rem; }
.bits-att-corr-item-times { color: #475569; font-size: 0.75rem; margin-top: 2px; font-variant-numeric: tabular-nums; }
.bits-att-corr-item-reason { color: #64748b; font-size: 0.75rem; margin-top: 2px; line-height: 1.4; }

/* ---- Dark mode ---- */
.dark .bits-att-today-detail { color: #CBD5E1; }
.dark .bits-att-today-schedule { color: #CBD5E1; }
.dark .bits-att-today-schedule-label { color: #94a3b8; }
.dark .bits-att-time-block { background: #0F172A; border-color: #1F2937; }
.dark .bits-att-time-value { color: #E2E8F0; }
.dark .bits-att-time-sub { color: #64748b; }
.dark .bits-att-cal-cell { background: #0F172A; border-color: #1F2937; }
.dark .bits-att-cal-day { color: #E2E8F0; }
.dark .bits-att-cal-cell--present { background: #064E3B; border-color: #065F46; }
.dark .bits-att-cal-cell--present .bits-att-cal-day { color: #A7F3D0; }
.dark .bits-att-cal-cell--present .bits-att-cal-text { color: #6EE7B7; }
.dark .bits-att-cal-cell--late    { background: #451A03; border-color: #92400E; }
.dark .bits-att-cal-cell--late    .bits-att-cal-day { color: #FCD34D; }
.dark .bits-att-cal-cell--late    .bits-att-cal-text { color: #FCD34D; }
.dark .bits-att-cal-cell--absent  { background: #450A0A; border-color: #7F1D1D; }
.dark .bits-att-cal-cell--absent  .bits-att-cal-day { color: #FCA5A5; }
.dark .bits-att-cal-cell--absent  .bits-att-cal-text { color: #F87171; }
.dark .bits-att-cal-cell--rest_day { background: #0F172A; border-color: #1F2937; }
.dark .bits-att-cal-cell--rest_day .bits-att-cal-day { color: #94a3b8; }
.dark .bits-att-cal-cell--rest_day .bits-att-cal-text { color: #64748b; }
.dark .bits-att-cal-cell--holiday { background: #451A03; border-color: #92400E; }
.dark .bits-att-cal-cell--holiday .bits-att-cal-day { color: #FDE68A; }
.dark .bits-att-cal-cell--holiday .bits-att-cal-text { color: #FDE68A; }
.dark .bits-att-cal-cell--leave   { background: #1E3A8A33; border-color: #1E3A8A; }
.dark .bits-att-cal-cell--leave   .bits-att-cal-day { color: #BFDBFE; }
.dark .bits-att-cal-cell--leave   .bits-att-cal-text { color: #93C5FD; }
.dark .bits-att-cal-cell--incomplete { background: #431407; border-color: #9A3412; }
.dark .bits-att-cal-cell--incomplete .bits-att-cal-day { color: #FED7AA; }
.dark .bits-att-cal-cell--incomplete .bits-att-cal-text { color: #FDBA74; }
.dark .bits-att-cal-cell--exempt  { background: #2E1065; border-color: #5B21B6; }
.dark .bits-att-cal-cell--exempt  .bits-att-cal-day { color: #C4B5FD; }
.dark .bits-att-cal-cell--exempt  .bits-att-cal-text { color: #C4B5FD; }
.dark .bits-att-cal-cell--future  { background: #0F172A; border-color: #1F2937; }
.dark .bits-att-cal-cell--future  .bits-att-cal-day { color: #64748b; }
.dark .bits-att-cal-dow { color: #94a3b8; }
.dark .bits-att-cal-legend { color: #94a3b8; }
.dark .bits-att-punch { background: #0F172A; border-color: #1F2937; }
.dark .bits-att-punch-time { color: #E2E8F0; }
.dark .bits-att-punch-source { color: #CBD5E1; }
.dark .bits-att-punch-site { color: #94a3b8; }
.dark .bits-att-corr-list { border-color: #1F2937; }
.dark .bits-att-corr-item { background: #0F172A; border-color: #1F2937; }
.dark .bits-att-corr-item-date { color: #E2E8F0; }
.dark .bits-att-corr-item-type { color: #CBD5E1; }
.dark .bits-att-corr-item-times { color: #94a3b8; }

/* ---- Mobile (375px) ---- */
@media (max-width: 640px) {
    .bits-att-today { flex-direction: column; align-items: stretch; }
    .bits-att-today-times { width: 100%; }
    .bits-att-time-block { flex: 1; min-width: 0; }
    .bits-att-cal-dow { font-size: 0.62rem; }
    .bits-att-cal-cell { min-height: 56px; padding: 0.3rem 0.2rem; }
    .bits-att-cal-day { font-size: 0.85rem; }
    .bits-att-cal-text { display: none; } /* show dot only on phones */
    .bits-att-cal-dot {
        display: block; width: 6px; height: 6px; border-radius: 50%;
        background: currentColor; margin-top: 2px;
    }
    .bits-att-cal-cell--present .bits-att-cal-dot { background: #10B981; }
    .bits-att-cal-cell--late    .bits-att-cal-dot { background: #F59E0B; }
    .bits-att-cal-cell--absent  .bits-att-cal-dot { background: #EF4444; }
    .bits-att-cal-cell--rest_day .bits-att-cal-dot { background: #94a3b8; }
    .bits-att-cal-cell--holiday .bits-att-cal-dot { background: #F59E0B; }
    .bits-att-cal-cell--leave   .bits-att-cal-dot { background: #3B82F6; }
    .bits-att-cal-cell--incomplete .bits-att-cal-dot { background: #F97316; }
    .bits-att-cal-cell--exempt  .bits-att-cal-dot { background: #8B5CF6; }
    .bits-att-cal-cell--future  .bits-att-cal-dot { background: transparent; }
    .bits-att-punch { padding: 0.5rem 0.6rem; }
    .bits-att-punch-img, .bits-att-punch-noimg { width: 36px; height: 36px; }
    .bits-att-punch-time { font-size: 0.85rem; }
    .bits-att-punch-date { display: none; }
    .bits-att-cal-hint { text-align: left; }
}
@media (max-width: 380px) {
    .bits-att-cal-cell { min-height: 48px; padding: 0.25rem 0.15rem; }
    .bits-att-cal-day { font-size: 0.78rem; }
}