/* قسم الموظفين — HR */

.hr-workspace {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}

.hr-hero {
    background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 45%, #2563eb 100%);
    border: none;
    color: #fff;
    padding: 0;
    overflow: hidden;
}

.hr-hero-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
}

.hr-hero-text h2 {
    margin: 0 0 6px;
    font-size: 1.35rem;
}

.hr-hero-text p {
    margin: 0;
    opacity: 0.9;
    font-size: 0.88rem;
}

.hr-hero-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.hr-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hr-hero-stat {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 10px 14px;
    min-width: 88px;
    text-align: center;
}

.hr-hero-stat-val {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
}

.hr-hero-stat-lbl {
    display: block;
    font-size: 0.72rem;
    opacity: 0.85;
    margin-top: 2px;
}

.hr-subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
}

.hr-subtab {
    border: none;
    background: transparent;
    color: var(--text-muted);
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.82rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s, color 0.15s;
}

.hr-subtab:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.hr-subtab.active {
    background: linear-gradient(135deg, #1d4ed8, #2563eb);
    color: #fff;
    font-weight: 600;
}

.hr-module-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hr-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.hr-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.hr-empty {
    text-align: center;
    padding: 24px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.hr-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.hr-summary-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
}

.hr-summary-card strong {
    display: block;
    margin-bottom: 4px;
}

.hr-hours-total {
    color: #2563eb;
    font-weight: 700;
    font-size: 1.1rem;
}

.hr-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.hr-status-pending { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.hr-status-approved { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.hr-status-rejected { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

.hr-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.hr-employees-card {
    width: 100%;
}

.hr-emp-count {
    display: inline-block;
    min-width: 1.5em;
    padding: 0 8px;
    margin-right: 4px;
    background: rgba(37, 99, 235, 0.15);
    color: #2563eb;
    border-radius: 999px;
    font-size: 0.85em;
    font-weight: 700;
    vertical-align: middle;
}

.hr-emp-filtered-count {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 400;
}

.hr-employees-filters {
    margin-bottom: 12px;
}

.hr-employees-table-wrap {
    max-height: min(70vh, 720px);
    overflow: auto;
    border: 1px solid var(--card-border);
    border-radius: 10px;
}

.hr-employees-table {
    width: 100%;
    margin: 0;
}

.hr-employees-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--card-bg, #1e293b);
    box-shadow: 0 1px 0 var(--card-border);
}

.hr-employees-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

.hr-employees-table tbody tr:hover td {
    background: rgba(37, 99, 235, 0.06);
}

.hr-employees-table tbody tr.hr-emp-row--selected td {
    background: rgba(37, 99, 235, 0.12);
}

.hr-col-num {
    width: 42px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.hr-col-actions {
    width: 96px;
    text-align: center;
    white-space: nowrap;
}

.hr-col-shift {
    white-space: nowrap;
    font-size: 0.88rem;
    direction: ltr;
    text-align: center;
}

.hr-emp-id {
    font-size: 0.78rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
}

.hr-emp-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.hr-emp-status--active {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.hr-emp-status--suspended {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.hr-emp-status--terminated {
    background: rgba(148, 163, 184, 0.2);
    color: #94a3b8;
}

.hr-employee-form-card.hidden {
    display: none !important;
}

.hr-table-wrap {
    overflow-x: auto;
    margin-top: 8px;
}

.hr-requests-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    table-layout: fixed;
}

.hr-requests-table th,
.hr-requests-table td {
    border: 1px solid var(--card-border);
    padding: 10px 12px;
    text-align: center;
    vertical-align: middle;
    word-break: break-word;
}

.hr-requests-table thead th {
    background: #0f766e;
    color: #fff;
    font-weight: 600;
    font-size: 0.82rem;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}

.hr-requests-table tbody tr.hr-req-row:nth-child(even) td {
    background: rgba(148, 163, 184, 0.06);
}

.hr-requests-table tbody tr.hr-req-row:hover td {
    background: rgba(59, 130, 246, 0.07);
}

.hr-requests-table .hr-req-id {
    font-weight: 700;
    white-space: nowrap;
    color: #0f766e;
}

.hr-requests-table .hr-req-emp {
    text-align: right;
}

.hr-requests-table .hr-req-date,
.hr-requests-table .hr-req-days {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.hr-requests-table .hr-req-actions-col,
.hr-requests-table .hr-req-actions {
    width: 120px;
    white-space: nowrap;
}

.hr-req-edit-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.hr-req-edit-modal.hidden {
    display: none !important;
}

.hr-req-edit-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
}

.hr-req-edit-dialog {
    position: relative;
    z-index: 1;
    width: min(560px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.hr-req-edit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.hr-req-edit-header h3 {
    margin: 0;
    font-size: 1.05rem;
}

.hr-req-edit-close {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px 8px;
}

.hr-req-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

body:not(.light-mode) .hr-requests-table thead th {
    background: #115e59;
}

body:not(.light-mode) .hr-requests-table .hr-req-id {
    color: #5eead4;
}

.hr-actions-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.hr-dash-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.hr-dash-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 16px;
}

.hr-dash-card h3 {
    margin: 0 0 8px;
    font-size: 0.95rem;
}

.hr-dash-card .val {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2563eb;
}

#viewHrPanel.app-workspace.tab-view.active {
    display: flex;
    flex-direction: column;
}

.hr-gate-patterns-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0;
    min-height: 36px;
}

.hr-gate-pattern-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(37, 99, 235, 0.12);
    border: 1px solid rgba(37, 99, 235, 0.25);
    border-radius: 999px;
    font-size: 0.85rem;
}

.hr-gate-pattern-remove {
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 2px;
}

.hr-gate-pattern-remove:hover {
    color: #ef4444;
}

.hr-gate-patterns-add {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.hr-gate-patterns-add .filter-input {
    flex: 1;
    min-width: 160px;
}

.hr-col-gate {
    min-width: 108px;
}

.hr-gate-inline {
    min-width: 96px;
    padding: 4px 8px;
    font-size: 0.82rem;
}

.hr-emp-row--gate-excluded {
    opacity: 0.72;
}

.hr-emp-row--gate-excluded td:nth-child(4),
.hr-emp-row--gate-excluded td:nth-child(5) {
    color: var(--text-muted);
}

.hr-time-12 {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    direction: rtl;
}

.hr-time-12 select {
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.hr-time-12 .hr-time-period-first {
    min-width: 108px;
    font-size: 0.88rem;
}

.hr-time-12 .hr-time-h12,
.hr-time-12 .hr-time-m {
    min-width: 52px;
    max-width: 64px;
    direction: ltr;
}

.hr-time-sep {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1;
    direction: ltr;
}

.hr-time-12-hint {
    font-weight: 400;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-inline-start: 4px;
}

.hr-shift-time-hint {
    margin: 0 0 12px;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.hr-shift-excel-hint {
    margin: 6px 0 0;
    font-size: 0.78rem;
    color: #0d9488;
    font-weight: 600;
}

.hr-shift-excel-hint i {
    margin-inline-end: 4px;
}

.hr-shift-edit-hint {
    margin: 0 0 10px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 0.78rem;
    color: #1d4ed8;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.hr-shift-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.hr-time-select option {
    padding: 4px 8px;
}

.hr-shift-add-card {
    margin: 0 0 14px;
    padding: 14px;
    background: rgba(13, 148, 136, 0.06);
    border: 1px solid rgba(13, 148, 136, 0.18);
    border-radius: 10px;
}

.hr-shift-add-card h3 {
    margin: 0 0 12px;
    font-size: 1rem;
    color: #0f766e;
}

.hr-shift-days-panel {
    margin-top: 8px;
}

.hr-shift-day-mode {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.hr-shift-day-mode label {
    font-weight: 600;
    font-size: 0.88rem;
}

.hr-shift-days-table-wrap {
    max-height: none;
    overflow: visible;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 8px;
}

.hr-shift-days-table {
    margin: 0;
}

.hr-shift-days-table th,
.hr-shift-days-table td {
    text-align: center;
    padding: 8px 10px;
}

.hr-shift-col-pick {
    width: 72px;
}

.hr-shift-day-row:has(.hr-shift-day-cb:checked) {
    background: rgba(13, 148, 136, 0.08);
}

.hr-shift-day-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.hr-shift-days-form-group {
    grid-column: 1 / -1;
}

.hr-shift-day-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.hr-shift-day-check {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 10px;
    min-width: 72px;
    border: 1px solid rgba(148, 163, 184, 0.45);
    border-radius: 8px;
    cursor: pointer;
    background: #fff;
    font-size: 0.82rem;
}

.hr-shift-day-check:has(input:checked) {
    border-color: #0d9488;
    background: rgba(13, 148, 136, 0.1);
}

.hr-shift-day-name {
    font-weight: 700;
}

.hr-shift-day-date {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.hr-shift-schedule-card {
    margin-bottom: 0;
}

.hr-shift-hint {
    margin: 4px 0 0;
    font-size: 0.88rem;
    color: var(--text-muted);
}

.hr-shift-toolbar {
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.hr-shift-week-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.85rem;
    font-weight: 600;
}

.hr-shift-week-label {
    font-size: 0.9rem;
    color: var(--text-muted);
    padding: 6px 10px;
    background: rgba(13, 148, 136, 0.08);
    border-radius: 8px;
}

.hr-shift-planning-banner {
    margin: 0 0 12px;
    padding: 10px 14px;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 8px;
    font-size: 0.9rem;
    color: #92400e;
}

.hr-shift-empty-banner {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: 8px;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.25);
    color: #1e3a8a;
    font-size: 0.88rem;
}

.hr-shift-empty-banner.hidden {
    display: none !important;
}

.hr-shift-empty-banner > i {
    font-size: 1.2rem;
    margin-top: 2px;
    color: #2563eb;
}

.hr-shift-empty-banner p {
    margin: 6px 0 10px;
    line-height: 1.5;
}

.hr-shift-empty-sub {
    display: block;
    margin-top: 2px;
    font-size: 0.8rem;
    opacity: 0.85;
}

.hr-shift-table-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 10px;
    flex-wrap: wrap;
}

.hr-shift-table-head-text h3 {
    margin: 0;
    font-size: 1rem;
    color: var(--text-main);
}

.hr-shift-table-sub {
    margin: 4px 0 0;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.hr-shift-table-count {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(13, 148, 136, 0.12);
    border: 1px solid rgba(13, 148, 136, 0.25);
    color: #0f766e;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}

.hr-shift-table-wrap {
    max-height: none;
    overflow-x: auto;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    background: var(--card-bg);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.hr-shift-grid-table {
    width: 100%;
    min-width: 640px;
    table-layout: fixed;
}

.hr-shift-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.88rem;
}

.hr-shift-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 11px 14px;
    text-align: right;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    background: rgba(15, 118, 110, 0.08);
    border-bottom: 2px solid rgba(13, 148, 136, 0.22);
    white-space: nowrap;
}

.hr-shift-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    vertical-align: top;
    color: var(--text-main);
}

.hr-shift-col-day {
    width: 88px;
}

.hr-shift-col-date {
    width: 112px;
}

.hr-shift-col-shifts {
    width: auto;
}

.hr-shift-day-row-compact--alt td {
    background: rgba(255, 255, 255, 0.015);
}

.hr-shift-day-row-compact:hover td {
    background: rgba(13, 148, 136, 0.04);
}

.hr-shift-day-row-compact--empty .hr-shift-blocks-cell {
    opacity: 0.75;
}

.hr-shift-day-cell {
    text-align: center !important;
    vertical-align: middle !important;
}

.hr-shift-day-badge {
    display: block;
    margin-top: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-muted);
}

.hr-shift-date-cell {
    font-weight: 700;
    font-size: 0.82rem;
    direction: ltr;
    unicode-bidi: embed;
    text-align: center !important;
    vertical-align: middle !important;
    color: var(--text-muted);
}

.hr-shift-blocks-cell {
    padding: 10px 12px !important;
}

.hr-shift-day-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
    width: 100%;
}

.hr-shift-day-list .hr-shift-block {
    flex: 1 1 220px;
    max-width: 100%;
}

.hr-shift-period-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
}

.hr-shift-period-col {
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.02);
    min-height: 88px;
}

.hr-shift-period-col-head {
    padding: 8px 8px 6px;
    text-align: center;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}

.hr-shift-period-col--morning .hr-shift-period-col-head {
    background: rgba(245, 158, 11, 0.14);
    border-bottom-color: rgba(245, 158, 11, 0.25);
}

.hr-shift-period-col--noon .hr-shift-period-col-head {
    background: rgba(59, 130, 246, 0.12);
    border-bottom-color: rgba(59, 130, 246, 0.22);
}

.hr-shift-period-col--afternoon .hr-shift-period-col-head {
    background: rgba(249, 115, 22, 0.12);
    border-bottom-color: rgba(249, 115, 22, 0.22);
}

.hr-shift-period-col--night .hr-shift-period-col-head {
    background: rgba(99, 102, 241, 0.12);
    border-bottom-color: rgba(99, 102, 241, 0.22);
}

.hr-shift-period-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--text-main);
}

.hr-shift-period-sub {
    display: block;
    font-size: 0.68rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.hr-shift-period-col-body {
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hr-shift-period-empty {
    display: block;
    text-align: center;
    padding: 14px 4px;
    font-size: 0.78rem;
    color: var(--text-muted);
    opacity: 0.55;
}

.hr-shift-blocks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
}

.hr-shift-block {
    border: 1px solid rgba(13, 148, 136, 0.2);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
}

.hr-shift-block--morning { border-color: rgba(245, 158, 11, 0.35); }
.hr-shift-block--noon { border-color: rgba(59, 130, 246, 0.35); }
.hr-shift-block--afternoon { border-color: rgba(249, 115, 22, 0.35); }
.hr-shift-block--night { border-color: rgba(99, 102, 241, 0.35); }

.hr-shift-block--morning .hr-shift-block-time { background: rgba(245, 158, 11, 0.1); }
.hr-shift-block--noon .hr-shift-block-time { background: rgba(59, 130, 246, 0.08); }
.hr-shift-block--afternoon .hr-shift-block-time { background: rgba(249, 115, 22, 0.08); }
.hr-shift-block--night .hr-shift-block-time { background: rgba(99, 102, 241, 0.08); }

.hr-shift-block-time {
    padding: 10px 12px;
    text-align: center;
    background: rgba(245, 158, 11, 0.08);
    border-bottom: 1px solid rgba(245, 158, 11, 0.18);
}

.hr-shift-time-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--text-main);
}

.hr-shift-time-line {
    display: block;
}

.hr-shift-time-val {
    display: inline-block;
    direction: ltr;
    unicode-bidi: isolate;
    font-weight: 800;
    color: #b45309;
    padding: 0 2px;
}

.hr-shift-block-time .hr-shift-time-range {
    padding: 4px 10px;
    font-size: 0.8rem;
}

.hr-shift-block-names {
    list-style: none;
    margin: 0;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hr-shift-name-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 6px;
    background: rgba(148, 163, 184, 0.08);
}

.hr-shift-name-item:hover {
    background: rgba(13, 148, 136, 0.08);
}

@media (max-width: 900px) {
    .hr-shift-period-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .hr-shift-period-grid {
        grid-template-columns: 1fr;
    }
}

.hr-shift-name-chip {
    flex: 1;
    min-width: 0;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hr-shift-day-empty {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.82rem;
    color: var(--text-muted);
    background: rgba(148, 163, 184, 0.08);
}

.hr-shift-day-empty i {
    opacity: 0.5;
}

.hr-shift-date-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
}

.hr-shift-date-chip--fri { background: rgba(13, 148, 136, 0.18); color: #0f766e; }
.hr-shift-date-chip--sat { background: rgba(59, 130, 246, 0.15); color: #1d4ed8; }
.hr-shift-date-chip--sun { background: rgba(168, 85, 247, 0.15); color: #7e22ce; }
.hr-shift-date-chip--mon { background: rgba(245, 158, 11, 0.15); color: #b45309; }
.hr-shift-date-chip--tue { background: rgba(34, 197, 94, 0.15); color: #15803d; }
.hr-shift-date-chip--wed { background: rgba(236, 72, 153, 0.15); color: #be185d; }
.hr-shift-date-chip--thu { background: rgba(99, 102, 241, 0.15); color: #4338ca; }
.hr-shift-date-chip--default { background: rgba(148, 163, 184, 0.2); color: #64748b; }

.hr-shift-time-range {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.25);
    color: #b45309;
    font-weight: 700;
    font-size: 0.82rem;
    white-space: nowrap;
    direction: ltr;
}

.hr-shift-time-range i {
    font-size: 0.68rem;
    opacity: 0.75;
}

.hr-shift-del-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

.hr-shift-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

.hr-shift-edit-btn:hover {
    background: rgba(59, 130, 246, 0.15);
    color: #2563eb;
}

.hr-shift-del-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

.hr-shift-table .hr-empty {
    padding: 36px 16px;
    text-align: center;
}

.hr-shift-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
}

.hr-shift-badge--day {
    background: rgba(245, 158, 11, 0.15);
    color: #b45309;
}

.hr-shift-badge--night {
    background: rgba(99, 102, 241, 0.15);
    color: #4338ca;
}

.hr-shift-badge--off {
    background: rgba(148, 163, 184, 0.2);
    color: #64748b;
}

.hr-att-shift-badge {
    min-height: 36px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* ——— تسجيل الدوام اليومي ——— */
.hr-attendance-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hr-att-block {
    display: grid;
    gap: 12px;
}

.hr-att-block--identity {
    grid-template-columns: minmax(160px, 1fr) minmax(220px, 2fr);
    align-items: end;
}

.hr-att-block-title {
    margin: 0 0 4px;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 8px;
}

.hr-att-block-title i {
    color: #0d9488;
}

.hr-att-block--times {
    padding: 14px;
    border: 1px solid rgba(13, 148, 136, 0.18);
    border-radius: 12px;
    background: rgba(13, 148, 136, 0.04);
}

.hr-att-times-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(120px, 160px);
    gap: 14px;
    align-items: end;
}

.hr-att-time-group .hr-time-12 {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.hr-att-time-group .hr-time-period-first {
    flex: 1 1 108px;
    min-width: 96px;
    max-width: 140px;
}

.hr-att-time-group .hr-time-h12,
.hr-att-time-group .hr-time-m {
    flex: 0 0 auto;
}

.hr-att-status-group select {
    width: 100%;
}

.hr-att-shift-panel {
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(59, 130, 246, 0.2);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.07), rgba(13, 148, 136, 0.05));
}

.hr-att-shift-panel-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #1d4ed8;
    flex-wrap: wrap;
}

.hr-att-goto-shift {
    margin-inline-start: auto;
    font-size: 0.78rem;
    font-weight: 600;
    color: #0f766e !important;
    text-decoration: none;
    padding: 2px 8px;
}

.hr-att-goto-shift:hover {
    text-decoration: underline;
}

.hr-att-shift-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hr-att-shift-empty {
    font-size: 0.88rem;
    color: var(--text-muted);
}

.hr-att-shift-off {
    color: #b45309;
}

.hr-att-shift-off i {
    margin-inline-end: 4px;
}

.hr-att-block--notes .form-group {
    margin: 0;
}

.hr-att-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 4px;
    border-top: 1px solid var(--card-border);
}

.hr-att-overwrite {
    margin: 0;
}

.hr-att-date-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.hr-att-date-quick .btn-sm {
    padding: 3px 10px;
    font-size: 0.78rem;
}

@media (max-width: 860px) {
    .hr-att-block--identity,
    .hr-att-times-grid {
        grid-template-columns: 1fr;
    }

    .hr-att-time-group .hr-time-12 {
        flex-wrap: wrap;
    }
}

.hr-shift-type-select {
    min-width: 100px;
    padding: 4px 8px;
    font-size: 0.85rem;
}

.hr-gate-settings-card {
    margin-bottom: 0;
}

@media print {
    body.printing-gate-sheet {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    body.printing-gate-sheet #overtimePrintSheet .rf-print-doc.rf-print-portrait {
        height: auto;
        min-height: 0;
        max-height: none;
        overflow: visible;
        page-break-inside: avoid !important;
        break-inside: avoid-page !important;
    }

    body.printing-gate-week #overtimePrintSheet .rf-print-doc.rf-print-portrait.hr-gate-week-sheet:not(:first-child) {
        page-break-before: always !important;
        break-before: page !important;
    }

    body.printing-gate-week #overtimePrintSheet .rf-print-doc.rf-print-portrait.hr-gate-week-sheet {
        page-break-after: auto !important;
        break-after: auto !important;
        page-break-inside: avoid !important;
        break-inside: avoid-page !important;
    }

    body.printing-gate-sheet #overtimePrintSheet .hr-gate-print-one-page {
        height: 100%;
        min-height: 100%;
        max-height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        box-sizing: border-box;
        overflow: hidden;
        page-break-inside: avoid !important;
        break-inside: avoid-page !important;
        padding-bottom: 0;
    }

    /* تجاوز قواعد الأوفر تايم التي تفرض ارتفاع A4 عمودي */
    body.printing-gate-sheet #overtimePrintSheet .rf-print-page-wrap.ot-print-page-wrap {
        height: calc(297mm - 18mm) !important;
        min-height: calc(297mm - 18mm) !important;
        max-height: calc(297mm - 18mm) !important;
        padding-bottom: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
    }

    body.printing-gate-sheet #overtimePrintSheet .hr-gate-print-one-page .rf-print-main {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
        height: 100%;
        overflow: hidden;
    }

    body.printing-gate-sheet #overtimePrintSheet .hr-gate-print-stack {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
        height: 100%;
        overflow: hidden;
    }

    body.printing-gate-sheet #overtimePrintSheet .hr-gate-print-one-page .rf-print-letterhead {
        margin-bottom: 2px;
        padding-bottom: 2px;
    }

    body.printing-gate-sheet #overtimePrintSheet .hr-gate-print-one-page .rf-print-brand-logo {
        width: 44%;
        max-height: 11mm;
    }

    body.printing-gate-sheet #overtimePrintSheet .hr-gate-print-one-page .rf-print-title {
        font-size: 10pt;
        margin: 0;
    }

    body.printing-gate-sheet #overtimePrintSheet .hr-gate-print-one-page .rf-print-subtitle {
        font-size: 11pt;
        font-weight: 700;
        color: #0f766e;
        margin: 2px 0 0;
    }

    body.printing-gate-sheet #overtimePrintSheet .hr-gate-print-one-page .rf-print-meta-inline {
        font-size: 7.5pt;
        margin-top: 1px;
        gap: 2px 12px;
    }

    body.printing-gate-sheet #overtimePrintSheet .hr-gate-print-one-page .rf-print-footer {
        display: none !important;
    }

    body.printing-gate-sheet #overtimePrintSheet .hr-gate-inline-footer {
        flex: 0 0 auto;
        margin: 2px 0 0;
        padding-top: 2px;
        border-top: 1px solid #e2e8f0;
        font-size: 6pt;
        color: #64748b;
        text-align: center;
        line-height: 1.2;
    }

    body.printing-gate-sheet #overtimePrintSheet .hr-gate-sheet-table {
        width: 100%;
        table-layout: fixed;
        font-size: 7.5pt;
        line-height: 1.25;
        height: 100%;
        border-collapse: collapse;
    }

    body.printing-gate-sheet #overtimePrintSheet .hr-gate-sheet-table tbody tr {
        page-break-inside: auto !important;
        break-inside: auto !important;
    }

    body.printing-gate-sheet #overtimePrintSheet .ot-print-table.hr-gate-sheet-table tr {
        page-break-inside: auto !important;
        break-inside: auto !important;
    }

    body.printing-gate-sheet #overtimePrintSheet .hr-gate-sheet-table thead {
        display: table-header-group;
    }

    body.printing-gate-sheet #overtimePrintSheet .hr-gate-sheet-table tbody tr {
        page-break-inside: auto !important;
        break-inside: auto !important;
    }

    body.printing-gate-sheet #overtimePrintSheet .hr-gate-sheet-table th,
    body.printing-gate-sheet #overtimePrintSheet .hr-gate-sheet-table td {
        padding: 2px 3px;
        vertical-align: middle;
        word-break: normal;
        overflow: hidden;
    }
    body.printing-gate-sheet #overtimePrintSheet .hr-gate-note {
        margin: 0 0 3px;
        padding: 3px 6px;
        background: #f1f5f9;
        border-right: 3px solid #2563eb;
        font-size: 7pt;
        line-height: 1.25;
        text-align: right;
        flex-shrink: 0;
    }

    body.printing-gate-sheet #overtimePrintSheet .hr-gate-table-section {
        margin-bottom: 0;
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }

    body.printing-gate-sheet #overtimePrintSheet .hr-gate-table-section[style*="--hr-gate-row-mm"] .hr-gate-sheet-table {
        flex: 1 1 auto;
        height: 100%;
    }

    body.printing-gate-sheet #overtimePrintSheet .hr-gate-table-section[style*="--hr-gate-row-mm"] .hr-gate-sheet-table tbody tr {
        height: var(--hr-gate-row-mm);
    }

    body.printing-gate-sheet #overtimePrintSheet .hr-gate-table-section[style*="--hr-gate-row-mm"] .hr-gate-sheet-table tbody td {
        height: var(--hr-gate-row-mm);
        min-height: var(--hr-gate-row-mm);
        padding-top: 1mm;
        padding-bottom: 1mm;
        vertical-align: middle;
    }
    body.printing-gate-sheet #overtimePrintSheet .hr-gate-col-num { width: 4%; }
    body.printing-gate-sheet #overtimePrintSheet .hr-gate-col-name { width: 30%; }
    body.printing-gate-sheet #overtimePrintSheet .hr-gate-col-job { width: 16%; }
    body.printing-gate-sheet #overtimePrintSheet .hr-gate-col-dept { width: 14%; }
    body.printing-gate-sheet #overtimePrintSheet .hr-gate-col-time { width: 9%; }
    body.printing-gate-sheet #overtimePrintSheet .hr-gate-col-sig { width: 18%; }

    body.printing-gate-sheet #overtimePrintSheet .hr-gate-sheet-table thead th {
        font-size: 7.5pt;
        padding: 4px 3px;
        line-height: 1.2;
        white-space: nowrap;
    }

    body.printing-gate-sheet #overtimePrintSheet .hr-gate-sheet-table .hr-gate-name {
        text-align: right;
        font-weight: 600;
        white-space: nowrap;
        font-size: 8pt;
        padding-right: 4px;
        padding-left: 2px;
    }

    body.printing-gate-sheet #overtimePrintSheet .hr-gate-sheet-table td:nth-child(3),
    body.printing-gate-sheet #overtimePrintSheet .hr-gate-sheet-table td:nth-child(4) {
        font-size: 7.5pt;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.printing-gate-sheet #overtimePrintSheet .hr-gate-sheet-table .hr-gate-time,
    body.printing-gate-sheet #overtimePrintSheet .hr-gate-sheet-table .hr-gate-sig {
        min-width: 0;
    }

    body.printing-gate-sheet #overtimePrintSheet .hr-gate-table-section[style*="--hr-gate-row-mm"] .hr-gate-sheet-table .hr-gate-time,
    body.printing-gate-sheet #overtimePrintSheet .hr-gate-table-section[style*="--hr-gate-row-mm"] .hr-gate-sheet-table .hr-gate-sig {
        height: var(--hr-gate-row-mm);
        min-height: var(--hr-gate-row-mm);
    }

    body.printing-gate-sheet #overtimePrintSheet .hr-gate-guard-sig {
        flex: 0 0 auto;
        margin-top: auto;
        padding-top: 5mm;
        gap: 18px;
    }

    body.printing-gate-sheet #overtimePrintSheet .hr-gate-guard-sig .ot-sig-line {
        height: 28px;
        margin: 0 8px 3px;
    }

    body.printing-gate-sheet #overtimePrintSheet .hr-gate-guard-sig .ot-sig-label {
        font-size: 9pt;
    }

    body.printing-gate-sheet #overtimePrintSheet .hr-gate-rows-sm .hr-gate-sheet-table {
        font-size: 8pt;
    }

    body.printing-gate-sheet #overtimePrintSheet .hr-gate-rows-md .hr-gate-sheet-table {
        font-size: 7.5pt;
    }

    body.printing-gate-sheet #overtimePrintSheet .hr-gate-rows-md .hr-gate-sheet-table .hr-gate-name {
        font-size: 7.5pt;
    }

    body.printing-gate-sheet #overtimePrintSheet .hr-gate-rows-md .hr-gate-sheet-table th,
    body.printing-gate-sheet #overtimePrintSheet .hr-gate-rows-md .hr-gate-sheet-table td {
        padding: 1px 2px;
    }

    body.printing-gate-sheet #overtimePrintSheet .hr-gate-rows-lg .hr-gate-sheet-table {
        font-size: 6.5pt;
    }

    body.printing-gate-sheet #overtimePrintSheet .hr-gate-rows-lg .hr-gate-sheet-table .hr-gate-name {
        font-size: 6.5pt;
    }

    body.printing-gate-sheet #overtimePrintSheet .hr-gate-rows-lg .hr-gate-guard-sig {
        padding-top: 3mm;
        margin-top: auto;
    }

    body.printing-gate-sheet #overtimePrintSheet .hr-gate-rows-xl .hr-gate-sheet-table {
        font-size: 6pt;
    }

    body.printing-gate-sheet #overtimePrintSheet .hr-gate-rows-xl .hr-gate-sheet-table .hr-gate-name {
        font-size: 6pt;
    }

    body.printing-gate-sheet #overtimePrintSheet .hr-gate-rows-xl .hr-gate-guard-sig {
        padding-top: 2mm;
        margin-top: auto;
    }

    body.printing-gate-week #overtimePrintSheet .rf-print-doc:not(:first-child) .hr-gate-note {
        display: none !important;
    }

    body.printing-gate-sheet #overtimePrintSheet .hr-gate-rows-xl .hr-gate-guard-sig .ot-sig-line {
        height: 20px;
    }

    body.printing-gate-sheet #overtimePrintSheet .hr-gate-print-one-page .hr-gate-sheet-table thead tr {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    body.printing-overtime #overtimePrintSheet .hr-gate-note {
        margin: 0 0 10px;
        padding: 8px 10px;
        background: #f1f5f9;
        border-right: 4px solid #2563eb;
        font-size: 10pt;
        text-align: right;
    }

    body.printing-overtime:not(.printing-gate-sheet) #overtimePrintSheet .hr-gate-sheet-table .hr-gate-name {
        text-align: right;
        font-weight: 600;
    }

    body.printing-overtime:not(.printing-gate-sheet) #overtimePrintSheet .hr-gate-sheet-table .hr-gate-time {
        min-width: 72px;
        height: 28px;
    }

    body.printing-overtime:not(.printing-gate-sheet) #overtimePrintSheet .hr-gate-sheet-table .hr-gate-sig {
        min-width: 90px;
        height: 32px;
    }

    body.printing-overtime:not(.printing-gate-sheet) #overtimePrintSheet .hr-gate-guard-sig {
        margin-top: 16px;
    }

    body.printing-overtime #overtimePrintSheet .ot-print-table tbody th {
        background: #e2e8f0;
        font-weight: 700;
        text-align: right;
        width: 18%;
        color: #111;
    }

    body.printing-shift-schedule {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    body.printing-shift-schedule #overtimePrintSheet .hr-shift-print-doc {
        width: 94%;
        max-width: 94%;
        margin: 0 auto;
    }

    body.printing-shift-schedule #overtimePrintSheet .hr-shift-print-section {
        page-break-inside: auto;
        padding: 0 2mm;
    }

    body.printing-shift-schedule #overtimePrintSheet .hr-shift-print-table {
        width: 100%;
        max-width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
        font-size: 7.5pt;
    }

    body.printing-shift-schedule #overtimePrintSheet .hr-shift-print-table thead th {
        background: #0f766e !important;
        color: #fff !important;
        font-weight: 800;
        font-size: 7.5pt;
        padding: 4px 3px;
        border: 1px solid #115e59;
        text-align: center;
        vertical-align: middle;
        line-height: 1.2;
        word-wrap: break-word;
        overflow: hidden;
    }

    body.printing-shift-schedule #overtimePrintSheet .hr-shift-print-table td {
        border: 1px solid #94a3b8;
        padding: 2px 3px;
        vertical-align: middle;
        text-align: center;
        color: #0f172a;
        line-height: 1.2;
        overflow: hidden;
        word-wrap: break-word;
    }

    body.printing-shift-schedule #overtimePrintSheet .hr-shift-print-col-num { width: 3.5%; }
    body.printing-shift-schedule #overtimePrintSheet .hr-shift-print-col-day { width: 6%; }
    body.printing-shift-schedule #overtimePrintSheet .hr-shift-print-col-date { width: 9%; }
    body.printing-shift-schedule #overtimePrintSheet .hr-shift-print-col-emp { width: 22%; }
    body.printing-shift-schedule #overtimePrintSheet .hr-shift-print-col-dept { width: 11%; }
    body.printing-shift-schedule #overtimePrintSheet .hr-shift-print-col-start { width: 12%; }
    body.printing-shift-schedule #overtimePrintSheet .hr-shift-print-col-end { width: 12%; }

    body.printing-shift-schedule #overtimePrintSheet .hr-shift-print-row--day-start td {
        border-top: 2px solid #0f766e;
    }

    body.printing-shift-schedule #overtimePrintSheet .hr-shift-print-num {
        font-weight: 700;
        color: #475569;
        background: #f8fafc;
    }

    body.printing-shift-schedule #overtimePrintSheet .hr-shift-print-day {
        font-weight: 800;
        background: #ecfdf5;
        color: #065f46;
    }

    body.printing-shift-schedule #overtimePrintSheet .hr-shift-print-date {
        direction: ltr;
        unicode-bidi: embed;
        font-weight: 600;
        background: #ecfdf5;
    }

    body.printing-shift-schedule #overtimePrintSheet .hr-shift-print-emp {
        text-align: right;
        font-weight: 700;
        font-size: 7.5pt;
        padding-inline: 4px;
    }

    body.printing-shift-schedule #overtimePrintSheet .hr-shift-print-dept {
        text-align: right;
        font-size: 7pt;
        color: #334155;
    }

    body.printing-shift-schedule #overtimePrintSheet .hr-shift-print-time {
        padding: 2px 1px;
        overflow: hidden;
    }

    body.printing-shift-schedule #overtimePrintSheet .hr-shift-print-time-stack {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1px;
        max-width: 100%;
        overflow: hidden;
        line-height: 1.1;
    }

    body.printing-shift-schedule #overtimePrintSheet .hr-shift-print-time-main {
        display: block;
        font-weight: 800;
        font-size: 8pt;
        direction: ltr;
        unicode-bidi: isolate;
    }

    body.printing-shift-schedule #overtimePrintSheet .hr-shift-print-time-period {
        display: block;
        font-weight: 600;
        font-size: 6.5pt;
        color: #475569;
        white-space: normal;
        word-break: break-word;
        text-align: center;
        max-width: 100%;
        line-height: 1.15;
    }

    body.printing-shift-schedule #overtimePrintSheet .hr-shift-print-row--empty td {
        color: #64748b;
        font-style: italic;
    }

    body.printing-shift-schedule #overtimePrintSheet .hr-shift-print-row:nth-child(even) td:not([rowspan]) {
        background: #f8fafc;
    }

    body.printing-shift-schedule #overtimePrintSheet .hr-shift-print-sigs {
        margin-top: 36px;
        padding-top: 20px;
        page-break-inside: avoid;
    }

    body.printing-shift-schedule #overtimePrintSheet .hr-shift-print-sigs .ot-sig-label {
        font-size: 9pt;
    }

    body.printing-shift-schedule #overtimePrintSheet .hr-shift-print-sigs .ot-sig-line {
        height: 18px;
    }

    body.printing-shift-schedule #overtimePrintSheet .hr-shift-print-section {
        page-break-inside: auto;
        margin-bottom: 4mm;
    }

    body.printing-shift-schedule #overtimePrintSheet .hr-shift-print-table tr {
        page-break-inside: avoid;
    }
}

.nav-tile--hr {
    --nav-tile-accent: #2563eb;
}

/* إنذارات الدوام — مقارنة الجدول الأسبوعي vs اليومي */
.hr-hero-stat--warn .hr-hero-stat-val {
    color: #f59e0b;
}

.hr-dash-card--warn .val {
    color: #d97706;
}

.hr-att-alerts-card {
    border-color: rgba(245, 158, 11, 0.25);
}

.hr-att-alerts-card--ok {
    border-color: rgba(34, 197, 94, 0.2);
}

.hr-att-alerts-summary {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    text-align: end;
}

.hr-att-alerts-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    padding: 4px 12px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 1.1rem;
    background: rgba(34, 197, 94, 0.12);
    color: #15803d;
}

.hr-att-alerts-count--warn {
    background: rgba(245, 158, 11, 0.15);
    color: #b45309;
}

.hr-att-alerts-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 420px;
    overflow-y: auto;
    padding: 4px 2px;
}

.hr-att-alert {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 12px 14px;
    background: var(--card-bg);
    border-right: 5px solid #94a3b8;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.hr-att-alert-icon {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    background: rgba(148, 163, 184, 0.15);
    color: #64748b;
}

.hr-att-alert-body {
    flex: 1;
    min-width: 0;
}

.hr-att-alert--danger {
    border-right-color: #dc2626;
    background: linear-gradient(90deg, rgba(220, 38, 38, 0.1) 0%, rgba(220, 38, 38, 0.02) 100%);
}

.hr-att-alert--danger .hr-att-alert-icon {
    background: rgba(220, 38, 38, 0.15);
    color: #b91c1c;
}

.hr-att-alert--warning {
    border-right-color: #f59e0b;
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.12) 0%, rgba(245, 158, 11, 0.02) 100%);
}

.hr-att-alert--warning .hr-att-alert-icon {
    background: rgba(245, 158, 11, 0.18);
    color: #b45309;
}

.hr-att-alert--info {
    border-right-color: #3b82f6;
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.02) 100%);
}

.hr-att-alert--info .hr-att-alert-icon {
    background: rgba(59, 130, 246, 0.15);
    color: #1d4ed8;
}

.hr-att-alert-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.hr-att-alert-badge {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.08);
}

.hr-att-alert--danger .hr-att-alert-badge {
    background: rgba(220, 38, 38, 0.12);
    color: #b91c1c;
}

.hr-att-alert--warning .hr-att-alert-badge {
    background: rgba(245, 158, 11, 0.15);
    color: #b45309;
}

.hr-att-alert-date {
    font-size: 0.85rem;
    color: var(--text-muted, #64748b);
}

.hr-att-alert-name {
    margin-inline-start: auto;
    font-size: 0.95rem;
}

.hr-att-alert-msg {
    margin: 0 0 6px;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--text-main);
}

.hr-att-alert-aside {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.hr-att-alert-aside .btn-sm {
    white-space: nowrap;
}

.hr-att-resolve-panel {
    margin-top: 4px;
    padding: 10px 12px;
    border: 1px solid rgba(3, 105, 161, 0.25);
    border-radius: 8px;
    background: rgba(3, 105, 161, 0.05);
    min-width: 220px;
    max-width: 280px;
}

.hr-att-resolve-panel.hidden {
    display: none !important;
}

.hr-att-resolve-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.hr-att-resolve-panel .filter-select,
.hr-att-resolve-panel .filter-input {
    width: 100%;
    margin-bottom: 6px;
    font-size: 0.85rem;
}

.hr-att-resolve-btns {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.hr-att-status--late {
    background: rgba(245, 158, 11, 0.15);
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, 0.35);
}

.hr-att-status-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
    padding: 8px 10px;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    background: rgba(3, 105, 161, 0.03);
}

.hr-att-status-legend .hr-att-status-pill {
    font-size: 0.76rem;
    padding: 3px 10px;
}

.hr-att-log-row--late td {
    background: rgba(245, 158, 11, 0.06) !important;
}

.hr-att-log-row--absent td {
    background: rgba(239, 68, 68, 0.06) !important;
}

.hr-att-log-row--leave td {
    background: rgba(99, 102, 241, 0.06) !important;
}

.hr-att-log-row--holiday td {
    background: rgba(14, 165, 233, 0.06) !important;
}

.hr-att-log-row--late.hr-att-row--warning td,
.hr-att-log-row--absent.hr-att-row--warning td,
.hr-att-log-row--leave.hr-att-row--warning td,
.hr-att-log-row--holiday.hr-att-row--warning td {
    background-image: linear-gradient(rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.08));
}

.hr-att-status--leave {
    background: rgba(99, 102, 241, 0.12);
    color: #4338ca;
    border: 1px solid rgba(99, 102, 241, 0.25);
}

.hr-att-status--holiday {
    background: rgba(14, 165, 233, 0.12);
    color: #0369a1;
    border: 1px solid rgba(14, 165, 233, 0.25);
}

.hr-att-alert-compare {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    font-size: 0.82rem;
    color: var(--text-muted, #64748b);
}

.hr-att-alert-compare i {
    margin-inline-end: 4px;
    opacity: 0.75;
}

.hr-att-shift-default-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-inline-end: 10px;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    background: rgba(59, 130, 246, 0.12);
    color: #1d4ed8;
}

.hr-att-shift-default-tag i {
    opacity: 0.85;
}

.hr-att-alerts-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 8px 12px;
    margin-bottom: 10px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.03);
    font-size: 0.82rem;
}

.hr-att-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.hr-att-legend-item i {
    font-size: 0.55rem;
}

.hr-att-legend--danger { color: #b91c1c; }
.hr-att-legend--warning { color: #b45309; }
.hr-att-legend--info { color: #1d4ed8; }
.hr-att-legend--ok { color: #15803d; }

.hr-att-table-hint {
    margin: 4px 0 0;
    font-size: 0.85rem;
    color: var(--text-muted, #64748b);
}

/* ── Attendance log table ── */
.hr-att-log-filters {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.hr-att-log-date-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.hr-att-log-date-quick .btn-sm {
    padding: 4px 10px;
    font-size: 0.78rem;
}

.hr-att-log-bar-date {
    font-weight: 700;
    color: #0369a1;
}

.hr-att-date-header td {
    background: rgba(3, 105, 161, 0.08) !important;
    border-top: 2px solid rgba(3, 105, 161, 0.2);
    border-bottom: 1px solid rgba(3, 105, 161, 0.15);
    padding: 10px 14px !important;
    font-weight: 700;
    font-size: 0.88rem;
    color: #0369a1;
}

.hr-att-date-header td span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.hr-att-date-header-meta {
    margin-inline-start: 12px;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.hr-att-log-notes {
    display: block;
    margin-top: 3px;
    font-size: 0.74rem;
    color: var(--text-muted);
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.hr-att-log-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: center;
    margin-bottom: 12px;
    padding: 10px 14px;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background: rgba(3, 105, 161, 0.05);
    font-size: 0.85rem;
    color: var(--text-muted);
}

.hr-att-log-bar.hidden {
    display: none !important;
}

.hr-att-log-bar-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.hr-att-log-bar-item i {
    color: #0369a1;
    opacity: 0.85;
}

.hr-att-log-bar-total {
    font-weight: 700;
    color: #0369a1;
}

.hr-att-log-wrap {
    overflow-x: auto;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    background: var(--card-bg);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.hr-att-pagination {
    margin-top: 0;
    padding: 14px 8px 4px;
}

.hr-att-page-jump-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.hr-att-page-jump {
    min-width: 72px;
    padding: 4px 8px;
}

.hr-att-log-table {
    width: 100%;
    min-width: 780px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    font-size: 0.88rem;
}

.hr-att-log-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 11px 12px;
    text-align: right;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--text-muted);
    background: rgba(3, 105, 161, 0.08);
    border-bottom: 2px solid rgba(3, 105, 161, 0.2);
    white-space: nowrap;
}

.hr-att-log-table tbody td,
.hr-att-log-table tfoot td {
    padding: 11px 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    vertical-align: middle;
    color: var(--text-main);
}

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

.hr-att-log-row--alt td {
    background: rgba(255, 255, 255, 0.018);
}

.hr-att-log-row:hover td {
    background: rgba(3, 105, 161, 0.05);
}

.hr-att-col-num {
    width: 42px;
    text-align: center !important;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.hr-att-col-date {
    width: 118px;
}

.hr-att-col-emp {
    width: 140px;
}

.hr-att-col-time {
    width: 88px;
    text-align: center !important;
}

.hr-att-col-hours {
    width: 68px;
    text-align: center !important;
}

.hr-att-col-status {
    width: 88px;
    text-align: center !important;
}

.hr-att-col-alert {
    width: 110px;
    text-align: center !important;
}

.hr-att-col-actions {
    width: 88px;
    text-align: center !important;
}

.hr-att-date-main {
    display: block;
    font-weight: 600;
    font-size: 0.86rem;
    line-height: 1.35;
}

.hr-att-date-sub {
    display: block;
    margin-top: 2px;
    font-size: 0.72rem;
    color: var(--text-muted);
    direction: ltr;
    text-align: right;
}

.hr-att-emp-name {
    font-weight: 600;
    line-height: 1.4;
}

.hr-att-hours-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 700;
    background: rgba(3, 105, 161, 0.12);
    color: #0369a1;
    border: 1px solid rgba(3, 105, 161, 0.2);
}

.hr-att-hours-badge--total {
    font-size: 0.95rem;
    padding: 4px 12px;
}

.hr-att-status-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.hr-att-status--present {
    background: rgba(34, 197, 94, 0.12);
    color: #15803d;
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.hr-att-status--absent {
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.hr-att-status--other {
    background: rgba(148, 163, 184, 0.12);
    color: var(--text-muted);
    border: 1px solid rgba(148, 163, 184, 0.22);
}

.hr-att-actions-inline {
    display: inline-flex;
    gap: 4px;
    justify-content: center;
}

.hr-att-actions-inline .btn-sm {
    padding: 4px 8px;
    min-width: 32px;
}

.hr-att-empty-row {
    text-align: center !important;
    padding: 32px 16px !important;
    color: var(--text-muted);
    border-bottom: none !important;
}

.hr-att-empty-row i {
    display: block;
    font-size: 1.5rem;
    margin-bottom: 8px;
    opacity: 0.5;
}

.hr-att-foot-row td {
    background: rgba(3, 105, 161, 0.06) !important;
    border-top: 2px solid rgba(3, 105, 161, 0.18);
    border-bottom: none !important;
    font-weight: 600;
}

.hr-att-foot-label {
    text-align: left !important;
    color: var(--text-muted);
    font-size: 0.84rem;
}

body.light-mode .hr-att-log-row--alt td {
    background: rgba(15, 23, 42, 0.02);
}

body.light-mode .hr-att-log-row:hover td {
    background: rgba(3, 105, 161, 0.06);
}

.hr-att-log-table .hr-att-row--danger {
    background: rgba(220, 38, 38, 0.08);
}

.hr-att-log-table .hr-att-row--warning {
    background: rgba(245, 158, 11, 0.1);
}

.hr-att-log-table .hr-att-row--info {
    background: rgba(59, 130, 246, 0.07);
}

.hr-att-log-table .hr-att-row--danger:hover,
.hr-att-log-table .hr-att-row--warning:hover,
.hr-att-log-table .hr-att-row--info:hover {
    filter: brightness(0.97);
}

.hr-att-alert-col-h,
.hr-att-alert-col {
    white-space: nowrap;
    text-align: center;
}

.hr-att-row-alert {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.hr-att-row-alert--danger {
    background: #fecaca;
    color: #991b1b;
}

.hr-att-row-alert--warning {
    background: #fde68a;
    color: #92400e;
}

.hr-att-row-alert--info {
    background: #bfdbfe;
    color: #1e40af;
}

.hr-att-row-ok {
    color: #16a34a;
    font-size: 1rem;
}

.hr-att-alerts-more {
    margin: 10px 0 0;
    font-size: 0.85rem;
    color: var(--text-muted, #64748b);
    text-align: center;
}

body.light-mode .hr-att-row-alert--danger { background: #fecaca; }
body.light-mode .hr-att-row-alert--warning { background: #fde68a; }
body.light-mode .hr-att-row-alert--info { background: #bfdbfe; }

/* ── Overtime monthly report ── */
.hr-ot-report-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: center;
    margin-bottom: 12px;
    padding: 10px 14px;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background: rgba(37, 99, 235, 0.04);
    font-size: 0.85rem;
    color: var(--text-muted);
}

.hr-ot-report-bar.hidden {
    display: none !important;
}

.hr-ot-report-bar-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.hr-ot-report-bar-item i {
    color: #2563eb;
    opacity: 0.85;
}

.hr-ot-report-bar-total {
    font-weight: 700;
    color: #2563eb;
}

.hr-ot-report-bar-search {
    font-style: italic;
}

.hr-ot-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.hr-ot-summary-empty {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    border: 1px dashed var(--card-border);
    border-radius: 10px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.hr-ot-summary-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background: var(--card-bg);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.hr-ot-summary-card:hover {
    border-color: rgba(37, 99, 235, 0.35);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
}

.hr-ot-summary-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}

.hr-ot-summary-card-head i {
    color: #2563eb;
    opacity: 0.75;
}

.hr-ot-summary-card-head strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hr-ot-summary-card-stats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.hr-ot-hours-badge,
.hr-ot-days-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}

.hr-ot-hours-badge {
    background: rgba(37, 99, 235, 0.12);
    color: #2563eb;
    border: 1px solid rgba(37, 99, 235, 0.2);
}

.hr-ot-hours-badge small,
.hr-ot-days-badge small {
    font-weight: 600;
    font-size: 0.72rem;
    opacity: 0.85;
}

.hr-ot-days-badge {
    background: rgba(148, 163, 184, 0.12);
    color: var(--text-muted);
    border: 1px solid rgba(148, 163, 184, 0.22);
}

.hr-ot-report-wrap {
    overflow-x: auto;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    background: var(--card-bg);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.hr-ot-report-table {
    width: 100%;
    min-width: 720px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    font-size: 0.88rem;
}

.hr-ot-report-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 11px 12px;
    text-align: right;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--text-muted);
    background: rgba(37, 99, 235, 0.08);
    border-bottom: 2px solid rgba(37, 99, 235, 0.2);
    white-space: nowrap;
}

.hr-ot-report-table tbody td,
.hr-ot-report-table tfoot td {
    padding: 11px 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    vertical-align: middle;
    color: var(--text-main);
}

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

.hr-ot-row--alt td {
    background: rgba(255, 255, 255, 0.018);
}

.hr-ot-row:hover td {
    background: rgba(37, 99, 235, 0.05);
}

.hr-ot-col-num {
    width: 42px;
    text-align: center !important;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.hr-ot-col-date {
    width: 118px;
}

.hr-ot-col-emp {
    width: 130px;
}

.hr-ot-col-time {
    width: 88px;
    text-align: center !important;
}

.hr-ot-col-hours {
    width: 72px;
    text-align: center !important;
}

.hr-ot-col-reason {
    width: auto;
    min-width: 160px;
}

.hr-ot-col-op {
    width: 110px;
    font-size: 0.84rem;
    color: var(--text-muted);
}

.hr-ot-col-del {
    width: 52px;
    text-align: center !important;
}

.hr-ot-report-table thead .hr-ot-col-del.hidden {
    display: none;
}

.hr-ot-date-main {
    display: block;
    font-weight: 600;
    font-size: 0.86rem;
    line-height: 1.35;
}

.hr-ot-date-sub {
    display: block;
    margin-top: 2px;
    font-size: 0.72rem;
    color: var(--text-muted);
    direction: ltr;
    text-align: right;
}

.hr-ot-emp-name {
    font-weight: 600;
    line-height: 1.4;
}

.hr-ot-time,
.hr-att-time {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    line-height: 1.25;
    direction: ltr;
}

.hr-ot-time-main,
.hr-att-time .hr-time-cell-main,
.hr-time-cell-main {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text-main);
}

.hr-ot-time-period,
.hr-att-time .hr-time-cell-period,
.hr-time-cell-period {
    font-size: 0.68rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.hr-ot-hours-badge--cell {
    min-width: 36px;
    justify-content: center;
    font-size: 0.9rem;
}

.hr-ot-hours-badge--total {
    font-size: 0.95rem;
    padding: 4px 12px;
}

.hr-ot-reason {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.45;
    word-break: break-word;
    cursor: default;
}

.hr-ot-notes {
    display: block;
    margin-top: 4px;
    font-size: 0.76rem;
    color: var(--text-muted);
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hr-ot-empty-row {
    text-align: center !important;
    padding: 32px 16px !important;
    color: var(--text-muted);
    border-bottom: none !important;
}

.hr-ot-empty-row i {
    display: block;
    font-size: 1.5rem;
    margin-bottom: 8px;
    opacity: 0.5;
}

.hr-ot-foot-row td {
    background: rgba(37, 99, 235, 0.06) !important;
    border-top: 2px solid rgba(37, 99, 235, 0.18);
    border-bottom: none !important;
    font-weight: 600;
}

.hr-ot-foot-label {
    text-align: left !important;
    color: var(--text-muted);
    font-size: 0.84rem;
}

body.light-mode .hr-ot-row--alt td {
    background: rgba(15, 23, 42, 0.02);
}

body.light-mode .hr-ot-row:hover td {
    background: rgba(37, 99, 235, 0.06);
}

body.light-mode .hr-ot-report-table thead th {
    background: rgba(37, 99, 235, 0.07);
}

@media (max-width: 768px) {
    .hr-ot-summary-grid {
        grid-template-columns: 1fr 1fr;
    }

    .hr-ot-col-op {
        width: 90px;
    }
}