/* ═══════════════════════════════════════════════════════════════════════════
   LEGACY DESIGN MATCH — CSS Overrides
   Matches the legacy WebForms visual design exactly.
   Loads AFTER app.css in _Layout.cshtml.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Breadcrumb Nav ────────────────────────────────────────────────────── */
.breadcrumb-nav { background: transparent; }
.breadcrumb-nav .breadcrumb-item a { color: var(--primary-color, #6366f1); text-decoration: none; font-weight: 500; }
.breadcrumb-nav .breadcrumb-item a:hover { text-decoration: underline; }
.breadcrumb-nav .breadcrumb-item.active { color: var(--text-secondary, #64748b); }
.breadcrumb-nav .breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted, #94a3b8); }
[data-theme="dark"] .breadcrumb-nav .breadcrumb-item a { color: var(--primary-light, #a5b4fc); }
[data-theme="dark"] .breadcrumb-nav .breadcrumb-item.active { color: var(--text-secondary, #cbd5e1); }
@media print { .breadcrumb-nav { display: none; } }

/* ── Status Badges — Transparent fill (matching legacy) ────────────────── */
.badge.bg-success { background: rgba(16,185,129,0.12) !important; color: #059669 !important; }
.badge.bg-danger  { background: rgba(239,68,68,0.12) !important; color: #dc2626 !important; }
.badge.bg-warning { background: rgba(245,158,11,0.12) !important; color: #d97706 !important; }
.badge.bg-info    { background: rgba(99,102,241,0.12) !important; color: var(--primary-color, #6366f1) !important; }
.badge.bg-secondary { background: rgba(100,116,139,0.12) !important; color: #334155 !important; }
.badge.bg-primary { background: var(--primary-light, rgba(99,102,241,0.12)) !important; color: var(--primary-color, #6366f1) !important; }
.badge.bg-dark    { background: rgba(30,41,59,0.12) !important; color: #1e293b !important; }

.badge {
    font-weight: 600;
    font-size: 0.72rem;
    padding: 4px 10px;
    border-radius: 12px;
    letter-spacing: 0.02em;
}

/* ── Table Body — Row striping + hover (matching legacy gridview) ──────── */
.table tbody tr:nth-child(even) { background: #f8fafc; }
.table tbody tr:hover { background: #f0f9ff !important; }
.table tbody td {
    color: #334155;
    padding: 9px 8px;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: middle;
    font-size: 0.82rem;
}

/* ── Page Header — Gradient (matching legacy) ──────────────────────────── */
.page-header {
    background: linear-gradient(135deg, var(--primary-color, #6366f1), var(--secondary-color, #8b5cf6)) !important;
    padding: 18px 24px !important;
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    color: #fff !important;
}
.page-header h4, .page-header h5 { color: #fff !important; font-weight: 700; margin: 0; }
.page-header small { color: rgba(255,255,255,0.8) !important; }
.page-header .btn-outline-light { border-color: rgba(255,255,255,0.5); color: #fff; }
.page-header .btn-outline-light:hover { background: rgba(255,255,255,0.15); border-color: #fff; }

/* ── Card Headers — Gradient with white text ───────────────────────────── */
.card-header {
    background: var(--section-header-bg, linear-gradient(135deg, #6366f1, #8b5cf6)) !important;
    color: #fff !important;
    font-weight: 600;
    font-size: 0.875rem;
    border-bottom: none !important;
}
.card-header i { color: #fff !important; }

/* ── Form Labels — Darker ──────────────────────────────────────────────── */
.form-label {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.8rem;
    margin-bottom: 3px;
}

/* ── Form Inputs — Compact height + focus ring ─────────────────────────── */
.form-control, .form-select {
    padding: 5px 10px;
    font-size: 0.82rem;
    min-height: unset;
    height: 34px;
}
textarea.form-control { height: auto; }
.form-control:focus, .form-select:focus {
    border-color: var(--primary-color, #6366f1);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}

/* ── Buttons — Compact sizing (matching legacy) ──────────────────────── */
.btn {
    padding: 5px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 6px;
}
.btn-sm {
    padding: 4px 10px;
    font-size: 0.78rem;
}
.btn-lg {
    padding: 8px 20px;
    font-size: 0.88rem;
}

/* ── Empty States (full legacy pattern) ────────────────────────────────── */
.empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: var(--space-12, 3rem) var(--space-6, 1.5rem);
    text-align: center; min-height: 300px;
}
.empty-state-icon {
    width: 80px; height: 80px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-full, 9999px);
    background: var(--primary-light, #eef2ff); color: var(--primary-color, #6366f1);
    font-size: 32px; margin-bottom: var(--space-5, 1.25rem);
}
.empty-state-icon.success { background: var(--success-light, #ecfdf5); color: var(--success-color, #10b981); }
.empty-state-icon.warning { background: var(--warning-light, #fffbeb); color: var(--warning-color, #f59e0b); }
.empty-state-icon.danger  { background: var(--danger-light, #fef2f2); color: var(--danger-color, #ef4444); }
.empty-state-icon.info    { background: var(--info-light, #ecfeff); color: var(--info-color, #06b6d4); }
.empty-state-title {
    font-family: var(--font-heading, 'Poppins', sans-serif);
    font-size: var(--text-lg, 1.125rem); font-weight: var(--font-semibold, 600);
    color: var(--text-primary, #1e293b); margin-bottom: var(--space-2, 0.5rem);
}
.empty-state-description {
    font-size: var(--text-sm, 0.875rem); color: var(--text-secondary, #64748b);
    max-width: 400px; margin-bottom: var(--space-6, 1.5rem);
    line-height: var(--leading-relaxed, 1.6);
}
.empty-state-action { display: inline-flex; align-items: center; gap: 8px; }
.table-empty-state { padding: var(--space-8, 2rem); text-align: center; }
.table-empty-state td { border: none !important; }
.empty-state-compact { padding: var(--space-6, 1.5rem); min-height: auto; }
.empty-state-compact .empty-state-icon { width: 48px; height: 48px; font-size: 20px; margin-bottom: var(--space-3, 0.75rem); }
.empty-state-compact .empty-state-title { font-size: var(--text-base, 1rem); }
/* Empty state — legacy simple fallback */
.empty-state i { font-size: 3rem; color: #e2e8f0; margin-bottom: 12px; display: block; }
.empty-state h3 { font-size: 1rem; color: #334155; margin-bottom: 4px; }
.empty-state p { font-size: 0.85rem; color: #64748b; }
/* Empty state — dark mode */
[data-theme="dark"] .empty-state-icon { background: var(--primary-light, #1e1b4b); }
[data-theme="dark"] .empty-state-icon.success { background: var(--success-light, #064e3b); }
[data-theme="dark"] .empty-state-icon.warning { background: var(--warning-light, #451a03); }
[data-theme="dark"] .empty-state-icon.danger  { background: var(--danger-light, #450a0a); }
[data-theme="dark"] .empty-state-icon.info    { background: var(--info-light, #083344); }
[data-theme="dark"] .empty-state-title { color: var(--text-primary, #f1f5f9); }
[data-theme="dark"] .empty-state-description { color: var(--text-secondary, #cbd5e1); }

/* ── Stat/KPI Cards ────────────────────────────────────────────────────── */
.stat-icon {
    width: 50px; height: 50px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
}
.stat-icon.total    { background: var(--primary-light, #eef2ff); color: var(--primary-color, #6366f1); }
.stat-icon.sent     { background: #d1fae5; color: #059669; }
.stat-icon.scheduled { background: #fef3c7; color: #d97706; }
.stat-icon.today    { background: var(--primary-light, #eef2ff); color: var(--primary-color, #6366f1); }

/* ── Status-specific classes (legacy pattern) ──────────────────────────── */
.status-active     { background: rgba(16,185,129,0.12); color: #059669; padding: 3px 8px; border-radius: 12px; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; }
.status-inactive   { background: rgba(239,68,68,0.12); color: #dc2626; padding: 3px 8px; border-radius: 12px; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; }
.status-transferred { background: rgba(245,158,11,0.12); color: #d97706; padding: 3px 8px; border-radius: 12px; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; }
.status-graduated  { background: rgba(99,102,241,0.12); color: #6366f1; padding: 3px 8px; border-radius: 12px; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; }
.status-dropped    { background: rgba(156,163,175,0.12); color: #6b7280; padding: 3px 8px; border-radius: 12px; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; }
.status-resigned   { background: rgba(245,158,11,0.12); color: #d97706; padding: 3px 8px; border-radius: 12px; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; }
.status-terminated { background: rgba(239,68,68,0.12); color: #dc2626; padding: 3px 8px; border-radius: 12px; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; }
.status-onleave    { background: rgba(99,102,241,0.12); color: #6366f1; padding: 3px 8px; border-radius: 12px; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; }
.status-pending    { background: rgba(245,158,11,0.12); color: #d97706; padding: 3px 8px; border-radius: 12px; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; }
.status-approved   { background: rgba(16,185,129,0.12); color: #059669; padding: 3px 8px; border-radius: 12px; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; }
.status-rejected   { background: rgba(239,68,68,0.12); color: #dc2626; padding: 3px 8px; border-radius: 12px; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; }
.status-cancelled  { background: rgba(156,163,175,0.12); color: #6b7280; padding: 3px 8px; border-radius: 12px; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; }

/* ── Badge variants for class/section/designation/experience ──────────── */
.badge-class       { background: var(--primary-light, #eef2ff); color: var(--primary-dark, #4338ca); padding: 3px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: 600; }
.badge-section     { background: rgba(100,116,139,0.12); color: #334155; padding: 3px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: 600; }
.badge-designation { background: rgba(139,92,246,0.12); color: #7c3aed; padding: 3px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: 600; }
.badge-exp         { background: rgba(245,158,11,0.12); color: #d97706; padding: 3px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: 600; }

/* ── Filter Card layout ────────────────────────────────────────────────── */
.filter-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
    padding: 18px 20px;
    margin-bottom: 18px;
}
.filter-card .card-title {
    font-size: 0.95rem; font-weight: 600; color: #1e293b;
    margin-bottom: 14px; display: flex; align-items: center; gap: 8px;
}
.filter-card .card-title i { color: var(--primary-color, #6366f1); }

/* ── Grid Card wrapper (matching legacy .grid-card) ────────────────────── */
.grid-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
    overflow: hidden;
}
.grid-header {
    padding: 14px 18px;
    border-bottom: 1px solid #e2e8f0;
    display: flex; justify-content: space-between; align-items: center;
    background: #f8fafc;
}
.grid-header h2 {
    font-size: 0.95rem; font-weight: 600; color: #1e293b;
    margin: 0; display: flex; align-items: center; gap: 8px;
}
.grid-header h2 i { color: var(--primary-color, #6366f1); }
.grid-header h2 .badge { background: var(--primary-color, #6366f1) !important; color: #fff !important; }

/* ── Print Styles ──────────────────────────────────────────────────────── */
@media print {
    .filter-card, .grid-header, .page-header, .sidebar, .module-tabs { display: none !important; }
    .table thead th { background: #333 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .badge { border: 1px solid #ccc; }
}