/* =============================================
   TechnisoftHRMS — Reusable UI Components
   ============================================= */

/* =================== BUTTONS =================== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 16px; border-radius: var(--radius-sm); font-size: 0.83rem;
    font-weight: 600; font-family: var(--font-sans); border: 1px solid transparent;
    cursor: pointer; transition: all var(--transition-fast); white-space: nowrap; position: relative; overflow: hidden;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn-primary { background: linear-gradient(135deg, #29ABE2, #7B3FA0); color: white; box-shadow: 0 4px 14px rgba(41,171,226,0.25); }
.btn-primary:hover { box-shadow: 0 6px 24px rgba(41,171,226,0.4); transform: translateY(-1px); }
.btn-secondary { background: var(--bg-input); color: var(--text-primary); border-color: var(--border); }
.btn-secondary:hover { background: var(--bg-input-focus); border-color: var(--border-accent); }
.btn-danger { background: var(--danger-bg); color: var(--danger); border-color: rgba(244,63,94,0.3); }
.btn-danger:hover { background: var(--danger); color: white; }
.btn-success { background: var(--success-bg); color: var(--success); border-color: rgba(16,185,129,0.3); }
.btn-success:hover { background: var(--success); color: white; }
.btn-warning { background: var(--warning-bg); color: var(--warning); border-color: rgba(245,158,11,0.3); }
.btn-ghost { background: transparent; color: var(--text-secondary); border-color: var(--border); }
.btn-ghost:hover { background: var(--bg-input); color: var(--text-primary); }
.btn-icon { background: transparent; border: 1px solid var(--border); color: var(--text-secondary); width: 32px; height: 32px; padding: 0; border-radius: var(--radius-sm); }
.btn-icon:hover { color: var(--text-primary); border-color: var(--accent-emerald); background: var(--success-bg); }
.btn-sm { padding: 5px 10px; font-size: 0.75rem; }
.btn-lg { padding: 12px 24px; font-size: 0.9rem; }
.btn-full { width: 100%; }
.btn-loader { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.3); border-top-color: white; border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block; }

/* =================== FORMS =================== */
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
.form-group-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.form-group-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
.form-label { font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.form-label .required { color: var(--danger); margin-left: 2px; }
.form-input, .form-select, .form-textarea {
    background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--text-primary); padding: 9px 12px; font-size: 0.85rem; outline: none; width: 100%;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--text-muted); }
.form-input:focus, .form-select:focus, .form-textarea:focus {
    border-color: #29ABE2; background: var(--bg-input-focus); box-shadow: 0 0 0 3px rgba(41,171,226,0.12);
}
.form-select { cursor: pointer; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; }
.form-select option { background: var(--bg-tertiary); color: var(--text-primary); }
.form-textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.form-hint { font-size: 0.72rem; color: var(--text-muted); }
.input-with-icon { position: relative; display: flex; align-items: center; }
.input-with-icon .form-input { padding-right: 40px; }
.input-icon-btn { position: absolute; right: 10px; background: transparent; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; }
.input-icon-btn:hover { color: var(--text-primary); }
.form-check { display: flex; align-items: center; gap: var(--space-sm); cursor: pointer; }
.form-check-input { width: 16px; height: 16px; accent-color: var(--accent-emerald); cursor: pointer; }

/* =================== SECTION HEADER =================== */
.section-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--space-lg); gap: var(--space-md); }
.section-title { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.5px; }
.section-subtitle { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; }
.section-actions { display: flex; align-items: center; gap: var(--space-sm); flex-shrink: 0; }

/* =================== STAT CARDS =================== */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); margin-bottom: var(--space-lg); }
.stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); transition: all var(--transition-base); position: relative; overflow: hidden; }
.stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; }
.stat-card.emerald::before { background: linear-gradient(90deg, var(--accent-emerald), var(--accent-emerald-light)); }
.stat-card.indigo::before { background: linear-gradient(90deg, var(--accent-indigo), var(--accent-indigo-light)); }
.stat-card.gold::before { background: linear-gradient(90deg, var(--accent-gold), var(--accent-gold-light)); }
.stat-card.rose::before { background: linear-gradient(90deg, var(--accent-rose), #FB7185); }
.stat-card.sky::before { background: linear-gradient(90deg, var(--accent-sky), #38BDF8); }
.stat-card.violet::before { background: linear-gradient(90deg, var(--accent-violet), #A78BFA); }
.stat-card:hover { border-color: var(--border-accent); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-card.dash-card { cursor: pointer; user-select: none; }
.stat-card.dash-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.stat-card.dash-card:active { transform: translateY(-1px); }
.stat-header { display: flex; align-items: center; justify-content: space-between; }
.stat-label { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.stat-icon { width: 36px; height: 36px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; }
.stat-icon.emerald { background: var(--success-bg); color: var(--accent-emerald); }
.stat-icon.indigo { background: rgba(99,102,241,0.12); color: var(--accent-indigo); }
.stat-icon.gold { background: var(--warning-bg); color: var(--accent-gold); }
.stat-icon.rose { background: var(--danger-bg); color: var(--accent-rose); }
.stat-icon.sky { background: var(--info-bg); color: var(--accent-sky); }
.stat-icon.violet { background: rgba(139,92,246,0.12); color: var(--accent-violet); }
.stat-value { font-size: 1.8rem; font-weight: 800; font-family: var(--font-mono); letter-spacing: -1px; line-height: 1; }
.stat-change { font-size: 0.72rem; display: flex; align-items: center; gap: 3px; }
.stat-change.up { color: var(--success); }
.stat-change.down { color: var(--danger); }

/* =================== DATA TABLE =================== */
.table-wrap { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.table-toolbar { display: flex; align-items: center; justify-content: space-between; padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--border); gap: var(--space-md); flex-wrap: wrap; }
.table-search { display: flex; align-items: center; gap: var(--space-sm); background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 12px; flex: 1; max-width: 300px; }
.table-search:focus-within { border-color: var(--accent-emerald); }
.table-search input { background: transparent; border: none; outline: none; color: var(--text-primary); font-size: 0.83rem; width: 100%; }
.table-search input::placeholder { color: var(--text-muted); }
.table-search svg { color: var(--text-muted); flex-shrink: 0; }
.table-filters { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.data-table { width: 100%; font-size: 0.83rem; }
.data-table thead { background: #F8FAFC; position: sticky; top: 0; z-index: 1; }
.data-table th { padding: 10px 16px; text-align: left; font-size: 0.7rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.8px; white-space: nowrap; border-bottom: 1px solid var(--border); }
.data-table th.text-right, .data-table td.text-right { text-align: right; }
.data-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text-secondary); vertical-align: middle; }
.data-table td.amount { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-primary); font-weight: 600; text-align: right; }
.data-table tbody tr:hover td { background: #F1F5F9; }
.data-table tbody tr:last-child td { border-bottom: none; }
.table-empty { text-align: center; padding: var(--space-2xl); color: var(--text-muted); display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); }
.table-footer { display: flex; align-items: center; justify-content: space-between; padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--border); font-size: 0.75rem; color: var(--text-muted); }

/* =================== BADGES =================== */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--radius-full); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
.badge-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.badge-success { background: var(--success-bg); color: var(--success); } .badge-success .badge-dot { background: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); } .badge-warning .badge-dot { background: var(--warning); }
.badge-danger { background: var(--danger-bg); color: var(--danger); } .badge-danger .badge-dot { background: var(--danger); }
.badge-info { background: var(--info-bg); color: var(--info); } .badge-info .badge-dot { background: var(--info); }
.badge-muted { background: rgba(107,114,128,0.12); color: var(--text-muted); }
.badge-emerald { background: var(--success-bg); color: var(--accent-emerald); }
.badge-indigo { background: rgba(99,102,241,0.12); color: var(--accent-indigo); }
.badge-gold { background: var(--warning-bg); color: var(--accent-gold); }
.badge-violet { background: rgba(139,92,246,0.12); color: var(--accent-violet); }

/* =================== AVATAR =================== */
.employee-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-indigo), var(--accent-emerald)); display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; color: white; flex-shrink: 0; overflow: hidden; }
.employee-avatar img { width: 100%; height: 100%; object-fit: cover; }
.employee-avatar-lg { width: 72px; height: 72px; font-size: 1.3rem; }
.employee-avatar-xl { width: 96px; height: 96px; font-size: 1.8rem; }
.employee-cell { display: flex; align-items: center; gap: var(--space-sm); }
.employee-cell-info { display: flex; flex-direction: column; }
.employee-cell-name { font-weight: 600; color: var(--text-primary); font-size: 0.83rem; }
.employee-cell-sub { font-size: 0.72rem; color: var(--text-muted); }

/* =================== PROGRESS =================== */
.progress-bar { height: 6px; background: var(--border); border-radius: var(--radius-full); overflow: hidden; }
.progress-fill { height: 100%; border-radius: var(--radius-full); transition: width 0.6s cubic-bezier(0.4,0,0.2,1); }
.progress-emerald .progress-fill { background: linear-gradient(90deg, var(--accent-emerald), var(--accent-emerald-light)); }
.progress-indigo .progress-fill { background: linear-gradient(90deg, var(--accent-indigo), var(--accent-indigo-light)); }
.progress-gold .progress-fill { background: linear-gradient(90deg, var(--accent-gold), var(--accent-gold-light)); }
.progress-danger .progress-fill { background: linear-gradient(90deg, var(--accent-rose), #FB7185); }

/* =================== TABS =================== */
.tabs { display: flex; gap: 2px; background: var(--bg-input); border-radius: var(--radius-md); padding: 3px; margin-bottom: var(--space-lg); border: 1px solid var(--border); }
.tab-btn { flex: 1; padding: 8px 14px; border: none; background: transparent; color: var(--text-muted); font-size: 0.8rem; font-weight: 600; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-fast); white-space: nowrap; }
.tab-btn:hover { color: var(--text-primary); }
.tab-btn.active { background: var(--bg-card); color: var(--accent-emerald); box-shadow: var(--shadow-sm); }

/* =================== CARDS =================== */
.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.card-header { padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.card-title { font-size: 0.9rem; font-weight: 700; }
.card-body { padding: var(--space-lg); }

/* =================== DETAIL GRID =================== */
.detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
.detail-item { display: flex; flex-direction: column; gap: 3px; }
.detail-label { font-size: 0.7rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.detail-value { font-size: 0.87rem; color: var(--text-primary); font-weight: 500; }
.section-divider { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); padding: var(--space-md) 0 var(--space-sm); border-bottom: 1px solid var(--border); margin-bottom: var(--space-md); }

/* =================== FILTER =================== */
.filters-row { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; padding: var(--space-md) 0; }
.filter-select { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-primary); padding: 7px 28px 7px 10px; border-radius: var(--radius-sm); font-size: 0.8rem; outline: none; cursor: pointer; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; }
.filter-select option { background: var(--bg-tertiary); }

/* =================== PAYSLIP =================== */
.payslip { background: white; color: #111; padding: 32px; border-radius: var(--radius-md); max-width: 680px; margin: 0 auto; }
.payslip-header { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #10B981; padding-bottom: 16px; margin-bottom: 16px; }
.payslip-company-name { font-size: 1.2rem; font-weight: 800; color: #111; }
.payslip-company-addr { font-size: 0.75rem; color: #555; margin-top: 4px; }
.payslip-badge { background: #10B981; color: white; padding: 4px 12px; border-radius: 4px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; }
.payslip-employee { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: #f8f8f8; border-radius: 8px; padding: 12px; margin-bottom: 16px; font-size: 0.8rem; }
.payslip-field { display: flex; gap: 6px; }
.payslip-field-label { color: #666; font-weight: 600; }
.payslip-table { width: 100%; font-size: 0.82rem; margin-bottom: 12px; }
.payslip-table th { background: #10B981; color: white; padding: 8px 12px; text-align: left; font-size: 0.72rem; text-transform: uppercase; }
.payslip-table td { padding: 7px 12px; border-bottom: 1px solid #eee; color: #333; }
.payslip-table td.amount { text-align: right; font-weight: 600; }
.payslip-table tfoot td { font-weight: 800; background: #f0fdf4; color: #059669; border-top: 2px solid #10B981; }
.payslip-net { background: linear-gradient(135deg, #10B981, #6366F1); color: white; text-align: center; padding: 16px; border-radius: 8px; margin-top: 12px; }
.payslip-net-label { font-size: 0.8rem; opacity: 0.9; }
.payslip-net-amount { font-size: 2rem; font-weight: 800; }

/* =================== RESPONSIVE =================== */
@media (max-width: 1200px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .form-group-4 { grid-template-columns: repeat(2, 1fr); }
    .form-group-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .form-group-row { grid-template-columns: 1fr; }
    .form-group-3, .form-group-4 { grid-template-columns: 1fr; }
    .detail-grid { grid-template-columns: 1fr; }
    .section-header { flex-direction: column; }
    .table-toolbar { flex-direction: column; align-items: stretch; }
    .table-search { max-width: 100%; }
}
@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr; }
}
@media print {
    .sidebar, .topbar, .section-actions, .no-print { display: none !important; }
    .main-content { margin-left: 0 !important; }
    body { background: white !important; color: black !important; }
}