/* ================================================================
   HR MANAGEMENT — UNIFIED DESIGN SYSTEM
   ================================================================
   Every value is derived from CompanyCSSCustomization.css variables.
   No colours, fonts, radii, or shadows are hard-coded.
   Add <link href="css/modern-unified.css" rel="stylesheet" />
   to any page to get the full component library.
   ================================================================ */

/* ── 1. TOKENS (convenience aliases) ──────────────────────────── */
:root {
    --hr-radius-xs:  var(--company-radius-sm,  6px);
    --hr-radius-sm:  var(--company-radius-md,  8px);
    --hr-radius-md:  var(--company-radius-lg, 12px);
    --hr-radius-lg:  var(--company-radius-xl, 16px);
    --hr-radius-xl:  var(--company-radius-2xl,20px);
    --hr-radius-full:9999px;

    --hr-shadow-xs:  0 1px 2px  rgba(0,0,0,.06);
    --hr-shadow-sm:  0 2px 6px  rgba(0,0,0,.07);
    --hr-shadow-md:  0 4px 12px rgba(0,0,0,.09);
    --hr-shadow-lg:  0 8px 24px rgba(0,0,0,.11);
    --hr-shadow-xl:  0 16px 40px rgba(0,0,0,.13);

    --hr-transition: 0.22s cubic-bezier(.4,0,.2,1);
    --hr-transition-fast: 0.15s ease;
    --hr-transition-slow: 0.4s cubic-bezier(.4,0,.2,1);
}

/* ── 2. PAGE WRAPPER ───────────────────────────────────────────── */
.hr-page {
    padding: var(--company-spacing-6, 1.5rem);
    max-width: 100%;
    animation: hr-page-in var(--hr-transition-slow) both;
}

@keyframes hr-page-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* ── 3. PAGE HEADER (gradient banner) ─────────────────────────── */
.hr-page-header {
    background: linear-gradient(
        135deg,
        var(--company-primary-600, #2563eb) 0%,
        var(--company-primary-800, #1e40af) 100%
    );
    border-radius: var(--hr-radius-lg);
    padding: 1.75rem 2rem;
    margin-bottom: 1.75rem;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    box-shadow: var(--hr-shadow-md);
}

/* Decorative circles */
.hr-page-header::before,
.hr-page-header::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    pointer-events: none;
}
.hr-page-header::before {
    width: 260px; height: 260px;
    top: -80px; right: -60px;
}
.hr-page-header::after {
    width: 140px; height: 140px;
    bottom: -50px; left: 40px;
}

.hr-page-header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 1;
}

.hr-page-icon {
    width: 52px; height: 52px;
    border-radius: var(--hr-radius-md);
    background: rgba(255,255,255,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
    color: #fff;
    flex-shrink: 0;
    backdrop-filter: blur(4px);
}

.hr-page-title {
    font-size: 1.625rem;
    font-weight: var(--company-font-bold, 700);
    color: #fff;
    margin: 0 0 .2rem;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.hr-page-subtitle {
    font-size: var(--company-text-sm, .875rem);
    color: rgba(255,255,255,.75);
    margin: 0;
}

.hr-page-actions {
    display: flex;
    align-items: center;
    gap: .625rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

/* Flat page header (white background, no gradient) */
.hr-page-header-flat {
    background: var(--company-bg-primary, #fff);
    border: 1px solid var(--company-border-light, #e5e7eb);
    border-radius: var(--hr-radius-lg);
    padding: 1.25rem 1.75rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    box-shadow: var(--hr-shadow-xs);
}

.hr-page-header-flat .hr-page-title {
    color: var(--company-text-primary, #111827);
    font-size: 1.375rem;
}

.hr-page-header-flat .hr-page-subtitle {
    color: var(--company-text-secondary, #6b7280);
}

/* ── 4. BUTTONS ────────────────────────────────────────────────── */
.hr-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1.1rem;
    font-size: var(--company-text-sm, .875rem);
    font-weight: var(--company-font-semibold, 600);
    font-family: var(--company-font-primary, inherit);
    border: 1.5px solid transparent;
    border-radius: var(--hr-radius-sm);
    cursor: pointer;
    transition: all var(--hr-transition);
    white-space: nowrap;
    text-decoration: none;
    line-height: 1.4;
    position: relative;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
}

.hr-btn:disabled,
.hr-btn[disabled] {
    opacity: .55;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Ripple */
.hr-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.18);
    opacity: 0;
    transition: opacity var(--hr-transition-fast);
}
.hr-btn:active::after { opacity: 1; }

/* White (used on gradient headers) */
.hr-btn-white {
    background: rgba(255,255,255,.15);
    color: #fff;
    border-color: rgba(255,255,255,.3);
    backdrop-filter: blur(4px);
}
.hr-btn-white:hover:not(:disabled) {
    background: rgba(255,255,255,.25);
    color: #fff;
    transform: translateY(-1px);
}

/* Primary */
.hr-btn-primary {
    background: var(--company-primary-600, #2563eb);
    color: #fff;
    box-shadow: 0 2px 8px rgba(37,99,235,.3);
}
.hr-btn-primary:hover:not(:disabled) {
    background: var(--company-primary-700, #1d4ed8);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(37,99,235,.35);
    color: #fff;
}

/* Secondary */
.hr-btn-secondary {
    background: var(--company-bg-tertiary, #f3f4f6);
    color: var(--company-text-primary, #111827);
    border-color: var(--company-border-light, #e5e7eb);
}
.hr-btn-secondary:hover:not(:disabled) {
    background: var(--company-gray-200, #e5e7eb);
    transform: translateY(-1px);
}

/* Outline */
.hr-btn-outline {
    background: transparent;
    color: var(--company-primary-600, #2563eb);
    border-color: var(--company-primary-300, #93c5fd);
}
.hr-btn-outline:hover:not(:disabled) {
    background: var(--company-primary-50, #eff6ff);
    border-color: var(--company-primary-500, #3b82f6);
    transform: translateY(-1px);
}

/* Ghost */
.hr-btn-ghost {
    background: transparent;
    color: var(--company-text-secondary, #6b7280);
    border-color: transparent;
}
.hr-btn-ghost:hover:not(:disabled) {
    background: var(--company-bg-secondary, #f9fafb);
    color: var(--company-text-primary, #111827);
}

/* Danger */
.hr-btn-danger {
    background: var(--company-danger, #ef4444);
    color: #fff;
    box-shadow: 0 2px 8px rgba(239,68,68,.25);
}
.hr-btn-danger:hover:not(:disabled) {
    background: #dc2626;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(239,68,68,.32);
    color: #fff;
}

/* Icon-only */
.hr-btn-icon {
    width: 36px; height: 36px;
    padding: 0;
    border-radius: var(--hr-radius-sm);
    justify-content: center;
    flex-shrink: 0;
}
.hr-btn-icon.hr-btn-lg { width: 42px; height: 42px; font-size: 1rem; }

/* Sizes */
.hr-btn-sm { padding: .35rem .75rem; font-size: .8125rem; }
.hr-btn-lg { padding: .75rem 1.5rem; font-size: 1rem; border-radius: var(--hr-radius-md); }

/* ── 5. BADGES & STATUS CHIPS ──────────────────────────────────── */
.hr-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .65rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: var(--hr-radius-full);
    white-space: nowrap;
}

.hr-badge-success {
    background: var(--company-success-light, #d1fae5);
    color: #065f46;
}
.hr-badge-danger {
    background: var(--company-danger-light, #fee2e2);
    color: #991b1b;
}
.hr-badge-warning {
    background: var(--company-warning-light, #fef3c7);
    color: #92400e;
}
.hr-badge-info {
    background: var(--company-info-light, #dbeafe);
    color: #1e40af;
}
.hr-badge-neutral {
    background: var(--company-gray-100, #f3f4f6);
    color: var(--company-gray-600, #4b5563);
}
.hr-badge-primary {
    background: var(--company-primary-100, #dbeafe);
    color: var(--company-primary-800, #1e40af);
}

/* ── 6. STAT CARDS ─────────────────────────────────────────────── */
.hr-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.hr-stat-card {
    background: var(--company-bg-primary, #fff);
    border: 1px solid var(--company-border-light, #e5e7eb);
    border-radius: var(--hr-radius-md);
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: var(--hr-shadow-xs);
    transition: all var(--hr-transition);
    position: relative;
    overflow: hidden;
    cursor: default;
}

.hr-stat-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    border-radius: var(--hr-radius-xs) 0 0 var(--hr-radius-xs);
    background: var(--hr-stat-accent, var(--company-primary-500, #3b82f6));
}

.hr-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--hr-shadow-md);
}

.hr-stat-icon {
    width: 48px; height: 48px;
    border-radius: var(--hr-radius-md);
    background: var(--hr-stat-accent-bg, var(--company-primary-50, #eff6ff));
    color: var(--hr-stat-accent, var(--company-primary-600, #2563eb));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.hr-stat-content { flex: 1; min-width: 0; }
.hr-stat-value {
    font-size: 1.625rem;
    font-weight: 800;
    color: var(--company-text-primary, #111827);
    line-height: 1.1;
    letter-spacing: -.03em;
}
.hr-stat-label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--company-text-secondary, #6b7280);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: .2rem;
}
.hr-stat-trend {
    font-size: .75rem;
    font-weight: 600;
    margin-top: .25rem;
}
.hr-stat-trend.up   { color: var(--company-success, #10b981); }
.hr-stat-trend.down { color: var(--company-danger,  #ef4444); }

/* Accent presets */
.hr-stat-success { --hr-stat-accent: var(--company-success, #10b981); --hr-stat-accent-bg: var(--company-success-light, #d1fae5); }
.hr-stat-danger  { --hr-stat-accent: var(--company-danger,  #ef4444); --hr-stat-accent-bg: var(--company-danger-light,  #fee2e2); }
.hr-stat-warning { --hr-stat-accent: var(--company-warning, #f59e0b); --hr-stat-accent-bg: var(--company-warning-light, #fef3c7); }
.hr-stat-info    { --hr-stat-accent: var(--company-info,    #3b82f6); --hr-stat-accent-bg: var(--company-info-light,    #dbeafe); }

/* ── 7. CARD GRID ──────────────────────────────────────────────── */
.hr-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
}

.hr-card {
    background: var(--company-bg-primary, #fff);
    border: 1px solid var(--company-border-light, #e5e7eb);
    border-radius: var(--hr-radius-lg);
    box-shadow: var(--hr-shadow-xs);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all var(--hr-transition);
}

.hr-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--hr-shadow-lg);
    border-color: var(--company-primary-200, #bfdbfe);
}

.hr-card-header {
    padding: 1.125rem 1.25rem;
    background: var(--company-bg-secondary, #f9fafb);
    border-bottom: 1px solid var(--company-border-light, #e5e7eb);
    display: flex;
    align-items: center;
    gap: .875rem;
}

.hr-card-icon {
    width: 44px; height: 44px;
    border-radius: var(--hr-radius-sm);
    background: var(--company-primary-50, #eff6ff);
    color: var(--company-primary-600, #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex-shrink: 0;
    transition: all var(--hr-transition);
}
.hr-card:hover .hr-card-icon {
    background: var(--company-primary-100, #dbeafe);
    transform: scale(1.07);
}

.hr-card-header-info { flex: 1; min-width: 0; }

.hr-card-title {
    font-size: .9375rem;
    font-weight: var(--company-font-semibold, 600);
    color: var(--company-text-primary, #111827);
    margin: 0 0 .15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hr-card-subtitle {
    font-size: .8rem;
    color: var(--company-text-secondary, #6b7280);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hr-card-body {
    padding: 1.125rem 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.hr-card-info-row {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    font-size: .845rem;
    color: var(--company-text-secondary, #6b7280);
}

.hr-card-info-row i {
    width: 16px;
    color: var(--company-primary-400, #60a5fa);
    flex-shrink: 0;
    margin-top: .15rem;
}

.hr-card-footer {
    padding: .875rem 1.25rem;
    border-top: 1px solid var(--company-border-light, #e5e7eb);
    background: var(--company-bg-secondary, #f9fafb);
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

/* ── 8. TABLE ──────────────────────────────────────────────────── */
.hr-table-card {
    background: var(--company-bg-primary, #fff);
    border: 1px solid var(--company-border-light, #e5e7eb);
    border-radius: var(--hr-radius-lg);
    box-shadow: var(--hr-shadow-xs);
    overflow: hidden;
}

.hr-filter-bar {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--company-border-light, #e5e7eb);
    flex-wrap: wrap;
    background: var(--company-bg-secondary, #f9fafb);
}

.hr-search-box {
    position: relative;
    flex: 1;
    min-width: 220px;
}

.hr-search-box i {
    position: absolute;
    left: .875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--company-text-tertiary, #9ca3af);
    pointer-events: none;
    font-size: .875rem;
}

.hr-search-input {
    width: 100%;
    padding: .5rem .75rem .5rem 2.25rem;
    border: 1.5px solid var(--company-border-light, #e5e7eb);
    border-radius: var(--hr-radius-sm);
    font-size: .875rem;
    background: var(--company-bg-primary, #fff);
    color: var(--company-text-primary, #111827);
    transition: border-color var(--hr-transition-fast), box-shadow var(--hr-transition-fast);
    outline: none;
}

.hr-search-input:focus {
    border-color: var(--company-primary-400, #60a5fa);
    box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}

.hr-filter-select {
    padding: .5rem .875rem;
    border: 1.5px solid var(--company-border-light, #e5e7eb);
    border-radius: var(--hr-radius-sm);
    font-size: .875rem;
    background: var(--company-bg-primary, #fff);
    color: var(--company-text-primary, #111827);
    outline: none;
    cursor: pointer;
    transition: border-color var(--hr-transition-fast);
}

.hr-filter-select:focus {
    border-color: var(--company-primary-400, #60a5fa);
    box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}

.hr-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.hr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}

.hr-table thead tr {
    background: var(--company-bg-secondary, #f9fafb);
}

.hr-table th {
    padding: .875rem 1rem;
    text-align: left;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--company-text-secondary, #6b7280);
    border-bottom: 2px solid var(--company-border-light, #e5e7eb);
    white-space: nowrap;
}

.hr-table td {
    padding: .875rem 1rem;
    border-bottom: 1px solid var(--company-border-light, #f0f0f0);
    color: var(--company-text-primary, #111827);
    vertical-align: middle;
}

.hr-table tbody tr {
    transition: background var(--hr-transition-fast);
}

.hr-table tbody tr:hover {
    background: var(--company-primary-50, #eff6ff);
}

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

/* ── 9. DETAIL VIEW ────────────────────────────────────────────── */
.hr-detail-banner {
    background: linear-gradient(
        135deg,
        var(--company-primary-600, #2563eb) 0%,
        var(--company-primary-800, #1e40af) 100%
    );
    border-radius: var(--hr-radius-lg);
    padding: 2rem;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    box-shadow: var(--hr-shadow-md);
}

.hr-detail-banner::before {
    content: '';
    position: absolute;
    width: 300px; height: 300px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    top: -100px; right: -80px;
    pointer-events: none;
}

.hr-detail-banner-left {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    position: relative;
    z-index: 1;
}

.hr-detail-avatar {
    width: 64px; height: 64px;
    border-radius: var(--hr-radius-md);
    background: rgba(255,255,255,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: #fff;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,.25);
    overflow: hidden;
}

.hr-detail-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
}

.hr-detail-banner-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 .3rem;
    letter-spacing: -.02em;
}

.hr-detail-banner-meta {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.hr-detail-banner-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.hr-detail-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.hr-info-card {
    background: var(--company-bg-primary, #fff);
    border: 1px solid var(--company-border-light, #e5e7eb);
    border-radius: var(--hr-radius-lg);
    box-shadow: var(--hr-shadow-xs);
    overflow: hidden;
}

.hr-info-card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--company-border-light, #e5e7eb);
    background: var(--company-bg-secondary, #f9fafb);
    display: flex;
    align-items: center;
    gap: .625rem;
}

.hr-info-card-header-icon {
    width: 32px; height: 32px;
    border-radius: var(--hr-radius-xs);
    background: var(--company-primary-50, #eff6ff);
    color: var(--company-primary-600, #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .875rem;
    flex-shrink: 0;
}

.hr-info-card-title {
    font-size: .9rem;
    font-weight: 700;
    color: var(--company-text-primary, #111827);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.hr-info-card-body { padding: 1.125rem 1.25rem; }

.hr-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: .65rem 0;
    border-bottom: 1px solid var(--company-border-light, #f0f0f0);
}

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

.hr-detail-label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--company-text-secondary, #6b7280);
    flex-shrink: 0;
    min-width: 120px;
}

.hr-detail-value {
    font-size: .875rem;
    color: var(--company-text-primary, #111827);
    text-align: right;
    word-break: break-word;
}

/* ── 10. FORM ──────────────────────────────────────────────────── */
.hr-form-page {
    max-width: 900px;
    margin: 0 auto;
}

.hr-form-card {
    background: var(--company-bg-primary, #fff);
    border: 1px solid var(--company-border-light, #e5e7eb);
    border-radius: var(--hr-radius-lg);
    box-shadow: var(--hr-shadow-xs);
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.hr-form-card-header {
    padding: 1.125rem 1.5rem;
    background: var(--company-bg-secondary, #f9fafb);
    border-bottom: 1px solid var(--company-border-light, #e5e7eb);
    display: flex;
    align-items: center;
    gap: .625rem;
}

.hr-form-card-header i {
    color: var(--company-primary-500, #3b82f6);
}

.hr-form-card-title {
    font-size: .9375rem;
    font-weight: 700;
    color: var(--company-text-primary, #111827);
    margin: 0;
}

.hr-form-card-body {
    padding: 1.5rem;
}

.hr-form-group { margin-bottom: 1.25rem; }

.hr-form-label {
    display: block;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--company-text-secondary, #6b7280);
    margin-bottom: .4rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.hr-form-required::after {
    content: ' *';
    color: var(--company-danger, #ef4444);
}

.hr-form-control {
    width: 100%;
    padding: .5625rem .875rem;
    border: 1.5px solid var(--company-border-light, #e5e7eb);
    border-radius: var(--hr-radius-sm);
    font-size: .875rem;
    color: var(--company-text-primary, #111827);
    background: var(--company-bg-primary, #fff);
    transition: border-color var(--hr-transition-fast), box-shadow var(--hr-transition-fast);
    outline: none;
    font-family: var(--company-font-primary, inherit);
}

.hr-form-control:focus {
    border-color: var(--company-primary-400, #60a5fa);
    box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}

.hr-form-control:disabled,
.hr-form-control[readonly] {
    background: var(--company-bg-tertiary, #f3f4f6);
    color: var(--company-text-secondary, #6b7280);
    cursor: not-allowed;
}

.hr-form-hint {
    font-size: .76rem;
    color: var(--company-text-tertiary, #9ca3af);
    margin-top: .3rem;
}

.hr-form-footer {
    padding: 1.125rem 1.5rem;
    border-top: 1px solid var(--company-border-light, #e5e7eb);
    background: var(--company-bg-secondary, #f9fafb);
    display: flex;
    justify-content: flex-end;
    gap: .625rem;
}

/* ── 11. EMPTY STATE ───────────────────────────────────────────── */
.hr-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.hr-empty-icon {
    font-size: 3.5rem;
    color: var(--company-gray-300, #d1d5db);
    margin-bottom: 1rem;
    animation: hr-float 3s ease-in-out infinite;
}

@keyframes hr-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}

.hr-empty-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--company-text-primary, #111827);
    margin-bottom: .4rem;
}

.hr-empty-text {
    font-size: .875rem;
    color: var(--company-text-secondary, #6b7280);
    max-width: 360px;
    margin-bottom: 1.5rem;
}

/* ── 12. TABS ──────────────────────────────────────────────────── */
.hr-tabs {
    display: flex;
    gap: .25rem;
    padding: .375rem;
    background: var(--company-bg-secondary, #f3f4f6);
    border-radius: var(--hr-radius-md);
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.hr-tab {
    padding: .45rem 1rem;
    border-radius: var(--hr-radius-sm);
    font-size: .8375rem;
    font-weight: 600;
    color: var(--company-text-secondary, #6b7280);
    cursor: pointer;
    transition: all var(--hr-transition-fast);
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
}

.hr-tab:hover:not(.hr-tab-active) {
    color: var(--company-primary-600, #2563eb);
    background: rgba(255,255,255,.6);
}

.hr-tab-active {
    background: var(--company-bg-primary, #fff);
    color: var(--company-primary-600, #2563eb);
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

.hr-tab-count {
    background: var(--company-primary-100, #dbeafe);
    color: var(--company-primary-700, #1d4ed8);
    font-size: .68rem;
    font-weight: 700;
    padding: .1rem .45rem;
    border-radius: var(--hr-radius-full);
}

/* ── 13. ATTENDANCE SPECIFIC ───────────────────────────────────── */
.hr-att-punch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    background: linear-gradient(
        135deg,
        var(--company-primary-700, #1d4ed8),
        var(--company-primary-900, #1e3a8a)
    );
    border-radius: var(--hr-radius-lg);
    overflow: hidden;
    margin-bottom: 1.5rem;
    box-shadow: var(--hr-shadow-md);
}

.hr-att-punch-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    padding: 1.25rem .75rem;
    border: none;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background var(--hr-transition-fast);
    border-right: 1px solid rgba(255,255,255,.1);
    min-height: 100px;
    position: relative;
}
.hr-att-punch-btn:last-child { border-right: none; }
.hr-att-punch-btn:hover:not(:disabled) { background: rgba(255,255,255,.12); }
.hr-att-punch-btn:disabled { opacity: .45; cursor: not-allowed; }
.hr-att-punch-btn.done     { background: rgba(255,255,255,.1); }

.hr-att-punch-icon  { font-size: 1.4rem; }
.hr-att-punch-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .85;
}
.hr-att-punch-time  {
    font-size: 1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.hr-att-punch-stamp {
    font-size: .65rem;
    opacity: .55;
    font-variant-numeric: tabular-nums;
}

/* ── 14. ANIMATION UTILITIES ───────────────────────────────────── */
.hr-fade-in {
    animation: hr-fade-in .3s ease both;
}
@keyframes hr-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.hr-slide-up {
    animation: hr-slide-up .3s ease both;
}
@keyframes hr-slide-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* Staggered children animation */
.hr-stagger > * {
    animation: hr-slide-up .3s ease both;
}
.hr-stagger > *:nth-child(1) { animation-delay: .04s; }
.hr-stagger > *:nth-child(2) { animation-delay: .08s; }
.hr-stagger > *:nth-child(3) { animation-delay: .12s; }
.hr-stagger > *:nth-child(4) { animation-delay: .16s; }
.hr-stagger > *:nth-child(5) { animation-delay: .20s; }
.hr-stagger > *:nth-child(6) { animation-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
    .hr-page,
    .hr-fade-in,
    .hr-slide-up,
    .hr-stagger > * {
        animation: none !important;
    }
    .hr-btn:hover,
    .hr-card:hover,
    .hr-stat-card:hover {
        transform: none !important;
    }
}

/* ── 15. RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 768px) {
    .hr-page { padding: 1rem; }

    .hr-page-header,
    .hr-detail-banner {
        padding: 1.25rem;
        flex-direction: column;
        align-items: flex-start;
    }

    .hr-page-actions,
    .hr-detail-banner-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .hr-card-grid { grid-template-columns: 1fr; }

    .hr-stats-grid,
    .hr-detail-stats { grid-template-columns: repeat(2, 1fr); }

    .hr-tabs { gap: .15rem; }

    .hr-detail-row {
        flex-direction: column;
        gap: .2rem;
    }
    .hr-detail-value { text-align: left; }

    .hr-form-footer {
        flex-direction: column-reverse;
    }
    .hr-form-footer .hr-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .hr-stats-grid { grid-template-columns: 1fr; }
    .hr-page-title  { font-size: 1.25rem; }
    .hr-stat-value  { font-size: 1.375rem; }
}