/* ══════════════════════════════════════════
   REQUESTS PAGE STYLES
   ══════════════════════════════════════════ */

.req-page { display: flex; flex-direction: column; gap: 16px; }

/* KPI Row */
.req-kpi-row { display: flex; gap: 12px; }
.req-kpi {
    flex: 1; padding: 16px 20px;
    background: var(--glass, rgba(255,255,255,0.02));
    border: 1px solid var(--border, rgba(255,255,255,0.04));
    border-radius: 12px;
    border-left: 3px solid var(--kpi-accent, #3b82f6);
}
.req-kpi-val { font-size: 28px; font-weight: 800; color: var(--kpi-accent); line-height: 1; }
.req-kpi-label { font-size: 12px; color: var(--text-secondary, rgba(255,255,255,0.5)); font-weight: 600; margin-top: 4px; }
.req-kpi-sub { font-size: 11px; color: var(--text-muted, rgba(255,255,255,0.25)); margin-top: 4px; }

/* Filters */
.req-filters {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--glass, rgba(255,255,255,0.02));
    border: 1px solid var(--border, rgba(255,255,255,0.04));
    border-radius: 12px;
}
.req-filter-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; }
.req-filter-right { display: flex; align-items: center; gap: 8px; }
.req-filter-item { min-width: 120px; }
.req-search-wrap { min-width: 180px; flex: 1; }
.req-search-wrap input { width: 100%; }

/* Tabs */
.req-tabs {
    display: flex; gap: 4px;
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.04));
    padding-bottom: 0;
}
.req-tab {
    padding: 10px 20px; border: none; background: none;
    color: var(--text-secondary, rgba(255,255,255,0.4));
    font-size: 13px; font-weight: 600; cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.15s; font-family: inherit;
    display: flex; align-items: center; gap: 8px;
}
.req-tab:hover { color: var(--text-primary, #fff); }
.req-tab.active {
    color: var(--text-primary, #fff);
    border-bottom-color: var(--accent, #3b82f6);
}
.req-tab-count {
    display: inline-flex; min-width: 20px; height: 20px;
    align-items: center; justify-content: center;
    background: var(--glass, rgba(255,255,255,0.04));
    border-radius: 10px; font-size: 11px; font-weight: 700;
    padding: 0 6px;
}
.req-tab.active .req-tab-count {
    background: var(--accent, #3b82f6);
    color: #fff;
}

/* Bulk Actions Bar */
.req-bulk-bar {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px;
    background: rgba(59, 130, 246, 0.06);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 10px;
    font-size: 13px; font-weight: 600;
    color: var(--text-secondary);
}

/* Table */
.req-table-wrap { overflow-x: auto; }
.req-table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    font-size: 13px;
}
.req-table thead th {
    padding: 10px 12px; text-align: left;
    font-size: 10px; font-weight: 700;
    color: var(--text-muted, rgba(255,255,255,0.3));
    text-transform: uppercase; letter-spacing: 1px;
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.04));
    white-space: nowrap; position: sticky; top: 0;
    background: var(--dark-700, #0d0d14);
}
.req-table thead th.sortable { cursor: pointer; }
.req-table thead th.sortable:hover { color: var(--text-primary, #fff); }

.req-table tbody tr {
    transition: background 0.1s;
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.02));
}
.req-table tbody tr:hover { background: rgba(255, 255, 255, 0.015); }
.req-table tbody td { padding: 10px 12px; vertical-align: middle; }

.req-row-resolved { opacity: 0.5; }
.req-row-resolved:hover { opacity: 0.75; }

/* Employee cell */
.req-emp-cell { min-width: 160px; }
.req-emp-name { font-weight: 600; color: var(--text-primary, #fff); font-size: 13px; }
.req-emp-id { font-size: 10px; color: var(--text-muted, rgba(255,255,255,0.2)); }

/* Tags */
.req-project-tag {
    display: inline-block; padding: 2px 8px;
    border-radius: 4px; font-size: 11px; font-weight: 600;
    background: var(--glass, rgba(255,255,255,0.03));
    border: 1px solid var(--border, rgba(255,255,255,0.04));
}

.req-type-badge {
    display: inline-block; padding: 3px 10px;
    border-radius: 6px; font-size: 11px; font-weight: 600;
}
.req-type-vacation, .req-type-casual_vacation {
    background: rgba(59, 130, 246, 0.1); color: #60a5fa;
}
.req-type-payslip {
    background: rgba(245, 158, 11, 0.1); color: #fbbf24;
}
.req-type-overtime {
    background: rgba(139, 92, 246, 0.1); color: #a78bfa;
}
.req-type-sick_leave {
    background: rgba(239, 68, 68, 0.1); color: #f87171;
}

/* Action buttons */
.req-actions { display: flex; gap: 6px; }
.req-act-btn {
    width: 32px; height: 32px; border-radius: 8px;
    border: 1px solid var(--border, rgba(255,255,255,0.06));
    background: var(--glass, rgba(255,255,255,0.02));
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 14px; transition: all 0.15s;
}
.req-act-approve:hover {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.3);
    color: #10b981;
}
.req-act-reject:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

/* Modal info block */
.req-modal-info {
    padding: 12px 16px;
    background: var(--glass, rgba(255,255,255,0.02));
    border: 1px solid var(--border, rgba(255,255,255,0.04));
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.6;
}
.req-modal-info p { margin: 0; }

/* Date grid in approve modal */
.req-date-grid {
    display: flex; flex-wrap: wrap; gap: 6px;
    max-height: 200px; overflow-y: auto;
}
.req-date-item {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 10px; border-radius: 6px;
    background: var(--glass, rgba(255,255,255,0.02));
    border: 1px solid var(--border, rgba(255,255,255,0.04));
    font-size: 12px; cursor: pointer; transition: all 0.1s;
}
.req-date-item:hover { border-color: rgba(59, 130, 246, 0.3); }
.req-date-item input:checked + span { color: #3b82f6; font-weight: 600; }
.req-date-weekend { opacity: 0.4; }

/* Preset buttons in reject modal */
.req-preset-btn {
    padding: 5px 12px; border-radius: 6px;
    background: var(--glass, rgba(255,255,255,0.03));
    border: 1px solid var(--border, rgba(255,255,255,0.06));
    color: var(--text-secondary, rgba(255,255,255,0.5));
    font-size: 11px; cursor: pointer; font-family: inherit;
    transition: all 0.12s;
}
.req-preset-btn:hover {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

/* Responsive */
@media (max-width: 768px) {
    .req-kpi-row { flex-direction: column; }
    .req-filters { flex-direction: column; }
    .req-filter-left { width: 100%; }
}