/*
 * demo-pages.css
 * Shared styles for all Demo Preview pages.
 * These are copies of the inline <style> blocks from the real pages so the
 * demo pages (which have no service/auth code) still render correctly.
 */

/* ================================================================
   PORTAL PAGE (EmployeeDashboard)
   ================================================================ */
.portal-page {
    min-height: 100vh;
    background: var(--theme-bg-dark, #f0f2f5);
    padding-bottom: 100px;
}
.portal-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 16px;
}
@media (min-width: 768px) {
    .portal-container { padding: 24px; }
}
.portal-mobile-header {
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0,86,179,0.1);
    z-index: 1000;
}
.mobile-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
}
.mobile-header-content h5 {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--theme-text-main, #212529);
    margin: 0;
}
.profile-btn {
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(0,86,179,0.1);
    display: flex; align-items: center; justify-content: center;
    color: var(--bs-primary, #0056b3);
    text-decoration: none; transition: all 0.2s;
}
.profile-btn:hover { background: rgba(0,86,179,0.15); }

/* Welcome Card */
.welcome-card {
    position: relative;
    background: linear-gradient(135deg, var(--bs-primary, #0056b3) 0%, #004494 100%);
    border-radius: 20px; padding: 28px; margin-bottom: 20px;
    overflow: hidden; color: white;
}
.welcome-content {
    position: relative; z-index: 2;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.welcome-greeting { font-size: 0.9rem; opacity: 0.9; }
.welcome-name { font-size: 1.5rem; font-weight: 700; margin: 4px 0 8px; line-height: 1.2; }
.welcome-date { display: flex; align-items: center; font-size: 0.85rem; opacity: 0.85; }
.scan-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 20px; background: white; color: var(--bs-primary, #0056b3);
    border-radius: 12px; text-decoration: none; font-weight: 600; font-size: 0.9rem;
    transition: all 0.2s; flex-shrink: 0; border: none; cursor: pointer;
}
.scan-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.2); }
.scan-btn i { font-size: 1.1rem; }
.welcome-decoration { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; z-index: 1; }
.decoration-circle { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.1); }
.decoration-circle.c1 { width: 150px; height: 150px; top: -30px; right: -30px; }
.decoration-circle.c2 { width: 100px; height: 100px; bottom: -20px; right: 60px; }

/* Stats Grid */
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 24px; }
.stat-card {
    background: white; border-radius: 14px; padding: 16px 12px;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    border: 1px solid rgba(0,0,0,0.04); transition: all 0.2s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.stat-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.stat-card.on-time .stat-icon { background: rgba(25,135,84,0.12); color: var(--bs-success,#198754); }
.stat-card.late .stat-icon { background: rgba(251,192,45,0.15); color: #d4a017; }
.stat-card.points .stat-icon { background: rgba(0,86,179,0.1); color: var(--bs-primary,#0056b3); }
.stat-card.sessions .stat-icon { background: rgba(13,202,240,0.12); color: #0aa2c0; }
.stat-info { display: flex; flex-direction: column; align-items: center; text-align: center; }
.stat-value { font-size: 1.25rem; font-weight: 700; color: var(--theme-text-main,#212529); line-height: 1.2; }
.stat-label { font-size: 0.7rem; color: var(--theme-text-muted,#6c757d); text-transform: uppercase; letter-spacing: 0.3px; }

/* Section Block */
.section-block { background: white; border-radius: 16px; padding: 20px; margin-bottom: 16px; border: 1px solid rgba(0,0,0,0.04); }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.section-title { font-size: 0.85rem; font-weight: 600; color: var(--theme-text-main,#212529); margin: 0; display: flex; align-items: center; }
.section-link { font-size: 0.8rem; font-weight: 600; color: var(--bs-primary,#0056b3); text-decoration: none; }
.section-link:hover { text-decoration: underline; }

/* Quick Actions */
.actions-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.action-item {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 16px 8px; background: var(--theme-bg-dark,#f8f9fa);
    border-radius: 12px; text-decoration: none; transition: all 0.2s;
    cursor: pointer; border: none; color: inherit; position: relative;
}
.action-item:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.action-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.action-item.scan .action-icon { background: linear-gradient(135deg,rgba(0,86,179,0.15) 0%,rgba(0,86,179,0.08) 100%); color: var(--bs-primary,#0056b3); }
.action-item.kudos .action-icon { background: linear-gradient(135deg,rgba(255,193,7,0.2) 0%,rgba(255,193,7,0.1) 100%); color: #d4a017; }
.action-item.rewards .action-icon { background: linear-gradient(135deg,rgba(25,135,84,0.15) 0%,rgba(25,135,84,0.08) 100%); color: var(--bs-success,#198754); }
.action-item.sessions .action-icon { background: linear-gradient(135deg,rgba(13,202,240,0.15) 0%,rgba(13,202,240,0.08) 100%); color: #0aa2c0; }
.action-label { font-size: 0.75rem; font-weight: 600; color: var(--theme-text-main,#212529); text-align: center; }

/* Activity List */
.activity-list { display: flex; flex-direction: column; gap: 8px; }
.activity-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--theme-bg-dark,#f8f9fa); border-radius: 12px; transition: all 0.2s; }
.activity-item:hover { background: rgba(0,86,179,0.05); }
.activity-indicator { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.activity-indicator.on-time { background: rgba(25,135,84,0.12); color: var(--bs-success,#198754); }
.activity-indicator.late { background: rgba(251,192,45,0.15); color: #d4a017; }
.activity-content { flex: 1; min-width: 0; }
.activity-title { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--theme-text-main,#212529); font-size: 0.9rem; }
.activity-badge { font-size: 0.65rem; font-weight: 600; padding: 2px 8px; border-radius: 10px; text-transform: uppercase; }
.activity-badge.on-time { background: rgba(25,135,84,0.12); color: var(--bs-success,#198754); }
.activity-badge.late { background: rgba(251,192,45,0.15); color: #9a7b00; }
.activity-time { font-size: 0.8rem; color: var(--theme-text-muted,#6c757d); }
.activity-arrow { color: var(--theme-text-muted,#6c757d); font-size: 0.9rem; }

/* Options Grid */
.options-grid { display: flex; flex-direction: column; gap: 8px; }
.option-item { display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--theme-bg-dark,#f8f9fa); border-radius: 12px; text-decoration: none; transition: all 0.2s; cursor: pointer; border: none; color: inherit; width: 100%; }
.option-item:hover { background: rgba(0,86,179,0.05); transform: translateX(4px); }
.option-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.option-icon.calendar { background: rgba(13,202,240,0.12); color: #0aa2c0; }
.option-icon.recognition { background: rgba(255,193,7,0.15); color: #d4a017; }
.option-icon.history { background: rgba(25,135,84,0.12); color: var(--bs-success,#198754); }
.option-icon.notifications { background: rgba(0,86,179,0.1); color: var(--bs-primary,#0056b3); }
.option-icon.export { background: rgba(111,66,193,0.1); color: #6f42c1; }
.option-icon.profile { background: rgba(108,117,125,0.1); color: var(--bs-secondary,#6c757d); }
.option-content { flex: 1; min-width: 0; }
.option-title { display: block; font-weight: 600; color: var(--theme-text-main,#212529); font-size: 0.9rem; }
.option-desc { font-size: 0.8rem; color: var(--theme-text-muted,#6c757d); }

/* Portal Responsive */
@media (max-width: 575.98px) {
    .stats-grid { grid-template-columns: repeat(2,1fr); }
    .actions-grid { grid-template-columns: repeat(2,1fr); }
    .welcome-name { font-size: 1.25rem; }
    .scan-btn span { display: none; }
    .scan-btn { padding: 12px; }
}
@media (min-width: 768px) {
    .portal-container { padding-top: 32px; }
    .welcome-card { padding: 36px; }
    .welcome-name { font-size: 1.75rem; }
}


/* ================================================================
   HISTORY PAGE (AttendanceHistory)
   ================================================================ */
.history-page {
    min-height: 100vh;
    background: var(--theme-bg-dark, #f0f2f5);
    padding-bottom: 100px;
}
.history-container { max-width: 800px; margin: 0 auto; padding: 16px; }
@media (min-width: 768px) { .history-container { padding: 24px; } }

.history-mobile-header {
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0,86,179,0.1);
    z-index: 1000;
}

.back-btn {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--theme-text-main,#212529); text-decoration: none; transition: all 0.2s;
}
.back-btn:hover { background: rgba(0,86,179,0.1); color: var(--bs-primary,#0056b3); }

/* Mobile Stats Bar (shared with leave) */
.mobile-stats-bar {
    display: flex; align-items: center; justify-content: space-around;
    padding: 12px 16px;
    background: linear-gradient(135deg,rgba(0,86,179,0.03) 0%,rgba(0,86,179,0.06) 100%);
}
.mobile-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mobile-stat-value { font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.mobile-stat-label { font-size: 0.65rem; color: var(--theme-text-muted,#6c757d); text-transform: uppercase; letter-spacing: 0.5px; }
.stat-divider { width: 1px; height: 30px; background: rgba(0,0,0,0.1); }

/* Desktop Header */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.page-title { font-size: 1.5rem; font-weight: 700; color: var(--theme-text-main,#212529); margin-bottom: 4px; display: flex; align-items: center; }
.page-subtitle { color: var(--theme-text-muted,#6c757d); margin: 0; }
.header-actions { display: flex; align-items: center; gap: 16px; }

/* Stats Badges */
.stats-badges { display: flex; gap: 8px; }
.stat-badge { display: flex; flex-direction: column; align-items: center; padding: 8px 16px; border-radius: 10px; min-width: 70px; }
.stat-badge.on-time { background: rgba(25,135,84,0.12); }
.stat-badge.late { background: rgba(251,192,45,0.15); }
.stat-badge.no-out { background: rgba(220,53,69,0.1); }
.stat-badge.pending { background: rgba(251,192,45,0.15); }
.stat-badge.approved { background: rgba(25,135,84,0.12); }
.stat-badge.total { background: rgba(0,86,179,0.1); }
.stat-badge .badge-value { font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.stat-badge.on-time .badge-value { color: var(--bs-success,#198754); }
.stat-badge.late .badge-value { color: #d4a017; }
.stat-badge.no-out .badge-value { color: var(--bs-danger,#dc3545); }
.stat-badge.pending .badge-value { color: #d4a017; }
.stat-badge.approved .badge-value { color: var(--bs-success,#198754); }
.stat-badge.total .badge-value { color: var(--bs-primary,#0056b3); }
.stat-badge .badge-label { font-size: 0.65rem; color: var(--theme-text-muted,#6c757d); text-transform: uppercase; letter-spacing: 0.3px; }

/* View Toggle */
.view-toggle { display: flex; background: white; border-radius: 10px; padding: 4px; border: 1px solid rgba(0,0,0,0.08); }
.toggle-btn {
    display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px;
    font-size: 0.85rem; font-weight: 500; color: var(--theme-text-muted,#6c757d);
    text-decoration: none; transition: all 0.2s; background: transparent; border: none; cursor: pointer;
}
.toggle-btn:hover { color: var(--bs-primary,#0056b3); }
.toggle-btn.active { background: var(--bs-primary,#0056b3); color: white; }

/* Filters */
.filters-card { background: white; border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; border: 1px solid rgba(0,0,0,0.04); box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.filters-row { display: flex; gap: 10px; flex-wrap: wrap; }
.filter-dropdown { position: relative; }
.filter-btn {
    display: flex; align-items: center; gap: 8px; padding: 8px 14px;
    background: var(--theme-bg-dark,#f8f9fa); border: 1px solid rgba(0,0,0,0.08);
    border-radius: 8px; font-size: 0.85rem; font-weight: 500;
    color: var(--theme-text-main,#212529); cursor: pointer; transition: all 0.2s;
}
.filter-btn:hover { background: #e9ecef; border-color: rgba(0,0,0,0.12); }
.filter-btn i:first-child { color: var(--bs-primary,#0056b3); }
.filter-btn .bi-chevron-down { font-size: 0.7rem; opacity: 0.6; }

/* Timeline */
.timeline { display: flex; flex-direction: column; gap: 24px; }
.timeline-month { display: flex; flex-direction: column; gap: 12px; }
.month-header { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
.month-name { font-size: 0.85rem; font-weight: 700; color: var(--theme-text-main,#212529); text-transform: uppercase; letter-spacing: 0.5px; }
.month-count { font-size: 0.75rem; color: var(--theme-text-muted,#6c757d); }

/* Records List */
.records-list { display: flex; flex-direction: column; gap: 8px; }
.record-card {
    display: flex; gap: 14px; padding: 14px; background: white;
    border-radius: 14px; border: 1px solid rgba(0,0,0,0.04); transition: all 0.2s;
}
.record-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-1px); }
.record-card.is-on-time { border-left: 3px solid var(--bs-success,#198754); }
.record-card.is-late { border-left: 3px solid var(--bs-warning,#fbc02d); }
.record-card.missing-checkout { border-left-color: var(--bs-danger,#dc3545); }

.record-date {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 48px; padding: 8px; background: var(--theme-bg-dark,#f8f9fa); border-radius: 10px;
}
.date-day { font-size: 1.25rem; font-weight: 700; color: var(--theme-text-main,#212529); line-height: 1.2; }
.date-weekday { font-size: 0.65rem; color: var(--theme-text-muted,#6c757d); text-transform: uppercase; letter-spacing: 0.3px; }

.record-content { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.record-session { display: flex; align-items: center; font-size: 0.85rem; margin-bottom: 2px; }
.record-session i { font-size: 0.8rem; }
.session-title { font-weight: 600; color: var(--theme-text-main,#212529); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.record-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.record-info { display: flex; flex-direction: column; gap: 2px; }
.record-time { font-size: 0.8rem; color: var(--theme-text-muted,#6c757d); display: flex; align-items: center; }

.record-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.record-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 20px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; }
.record-badge.on-time { background: rgba(25,135,84,0.12); color: var(--bs-success,#198754); }
.record-badge.late { background: rgba(251,192,45,0.15); color: #9a7b00; }
.record-badge.no-checkout { background: rgba(220,53,69,0.1); color: var(--bs-danger,#dc3545); }

.record-checkout {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 10px; background: rgba(0,86,179,0.04); border-radius: 8px; font-size: 0.8rem;
}
.checkout-label { color: var(--theme-text-muted,#6c757d); display: flex; align-items: center; }
.checkout-hours { font-weight: 600; color: var(--bs-primary,#0056b3); }

/* History Responsive */
@media (max-width: 575.98px) {
    .history-container { padding: 12px; }
    .filters-card { padding: 10px; margin-bottom: 12px; }
    .filter-btn { padding: 6px 10px; font-size: 0.8rem; }
    .record-card { padding: 12px; }
    .record-date { min-width: 44px; padding: 6px; }
    .date-day { font-size: 1.1rem; }
    .record-main { flex-wrap: wrap; gap: 8px; }
    .record-badges { width: 100%; justify-content: flex-start; }
}


/* ================================================================
   LEAVE PAGE (LeaveRequestList)
   ================================================================ */
.leave-page {
    min-height: 100vh;
    background: var(--theme-bg-dark, #f0f2f5);
    padding-bottom: 100px;
}
.leave-container { max-width: 800px; margin: 0 auto; padding: 16px; }
@media (min-width: 768px) { .leave-container { padding: 24px; } }

.leave-mobile-header {
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0,86,179,0.1);
    z-index: 1000;
}

.new-request-btn {
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--bs-primary,#0056b3);
    display: flex; align-items: center; justify-content: center;
    color: white; text-decoration: none; border: none; cursor: pointer;
}
.btn-new-request {
    display: inline-flex; align-items: center; padding: 10px 20px;
    background: var(--bs-primary,#0056b3); color: white; border-radius: 10px;
    text-decoration: none; font-weight: 600; font-size: 0.9rem;
    transition: all 0.2s; border: none; cursor: pointer;
}
.btn-new-request:hover { background: #004494; color: white; transform: translateY(-1px); }

/* Request Cards */
.requests-list { display: flex; flex-direction: column; gap: 12px; }
.request-card {
    background: white; border-radius: 14px; padding: 16px;
    border: 1px solid rgba(0,0,0,0.04); border-left: 4px solid var(--theme-text-muted,#6c757d);
    transition: all 0.2s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    cursor: pointer;
}
.request-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-1px); }
.request-card.status-pending { border-left-color: var(--bs-warning,#ffc107); }
.request-card.status-approved { border-left-color: var(--bs-success,#198754); }
.request-card.status-rejected { border-left-color: var(--bs-danger,#dc3545); }

.request-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; }
.request-type { display: flex; align-items: center; gap: 12px; }
.type-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.type-icon.sick { background: rgba(220,53,69,0.12); color: var(--bs-danger,#dc3545); }
.type-icon.vacation { background: rgba(13,202,240,0.12); color: #0aa2c0; }
.type-icon.emergency { background: rgba(255,152,0,0.12); color: #ff9800; }
.type-icon.personal { background: rgba(111,66,193,0.12); color: #6f42c1; }

.type-info { display: flex; flex-direction: column; gap: 3px; }
.type-name { font-weight: 600; color: var(--theme-text-main,#212529); text-transform: capitalize; }
.request-status { font-size: 0.65rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.3px; color: var(--theme-text-muted,#6c757d); }
.request-status.pending { color: #b38600; }
.request-status.approved { color: #157347; }
.request-status.rejected { color: #b02a37; }

.request-dates { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.date-range { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--theme-text-main,#212529); }
.date-range i { color: var(--theme-text-muted,#6c757d); }
.duration-badge { padding: 4px 10px; background: rgba(0,86,179,0.1); color: var(--bs-primary,#0056b3); border-radius: 20px; font-size: 0.75rem; font-weight: 600; }
.half-day-indicator { font-size: 0.65rem; font-weight: 500; opacity: 0.8; margin-left: 2px; }

.request-reason {
    display: flex; gap: 10px; padding: 10px 12px;
    background: var(--theme-bg-dark,#f8f9fa); border-radius: 8px;
    font-size: 0.85rem; color: var(--theme-text-muted,#6c757d); font-style: italic;
}
.request-reason i { color: var(--bs-primary,#0056b3); flex-shrink: 0; margin-top: 2px; }

.admin-response {
    margin-top: 12px; padding: 12px;
    background: linear-gradient(135deg,rgba(0,86,179,0.05) 0%,rgba(0,86,179,0.02) 100%);
    border-radius: 8px; border-left: 3px solid var(--bs-primary,#0056b3);
}
.response-header { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 600; color: var(--bs-primary,#0056b3); text-transform: uppercase; margin-bottom: 6px; }
.admin-response p { margin: 0; font-size: 0.85rem; color: var(--theme-text-main,#212529); }

/* Leave Responsive */
@media (max-width: 575.98px) {
    .leave-container { padding: 12px; }
    .request-card { padding: 14px; }
}


/* ================================================================
   RECOGNITION PAGE (RecognitionFeed)
   ================================================================ */
.recognition-page {
    min-height: 100vh;
    background: var(--theme-bg-dark, #f0f2f5);
    padding-bottom: 100px;
}
.recognition-container { max-width: 1200px; margin: 0 auto; padding: 16px; }
@media (min-width: 768px) { .recognition-container { padding: 24px; } }

.recognition-mobile-header {
    background: rgba(255,255,255,0.98);
    border-bottom: 1px solid rgba(0,86,179,0.1);
    z-index: 1000;
}

/* Mobile Recognition Stats */
.mobile-stat-item { display: flex; align-items: center; gap: 8px; }
.mobile-stat-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mobile-stat-icon.balance { background: linear-gradient(135deg,#ffc107 0%,#ffca2c 100%); box-shadow: 0 3px 8px rgba(255,193,7,0.35); }
.mobile-stat-icon.balance i { color: white; font-size: 1rem; }
.mobile-stat-content { display: flex; align-items: baseline; gap: 3px; }

.mobile-budget-item {
    display: flex; flex-direction: column; align-items: center;
    padding: 6px 12px; background: white; border-radius: 10px; border: 1px solid #e9ecef;
}
.mobile-budget-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.5px; color: #6c757d; font-weight: 600; margin-bottom: 2px; }
.mobile-budget-progress { display: flex; align-items: baseline; }
.mobile-budget-value { font-size: 0.95rem; font-weight: 700; color: #0d6efd; }
.mobile-budget-total { font-size: 0.8rem; color: #adb5bd; font-weight: 500; }

/* Utility */
.min-width-0 { min-width: 0; }


/* ================================================================
   REWARDS PAGE
   ================================================================ */
.rewards-page {
    min-height: 100vh;
    background: var(--theme-bg-dark, #f0f2f5);
    padding-bottom: 100px;
}


/* ================================================================
   SHARED: Loading / Empty States
   ================================================================ */
.loading-state { text-align: center; padding: 60px 20px; }
.empty-state { text-align: center; padding: 60px 20px; background: white; border-radius: 16px; border: 1px solid rgba(0,0,0,0.04); }
.empty-icon { width: 80px; height: 80px; margin: 0 auto 20px; border-radius: 50%; background: linear-gradient(135deg,rgba(0,86,179,0.1) 0%,rgba(0,86,179,0.05) 100%); display: flex; align-items: center; justify-content: center; }
.empty-icon i { font-size: 2.5rem; color: var(--bs-primary,#0056b3); opacity: 0.5; }
.btn-empty { display: inline-flex; align-items: center; padding: 10px 20px; background: var(--bs-primary,#0056b3); color: white; border-radius: 10px; text-decoration: none; font-size: 0.9rem; font-weight: 600; transition: all 0.2s; }
.btn-empty:hover { background: #004494; color: white; }


/* ================================================================
   MOBILE BOTTOM NAV (from EmployeeMobileNav)
   ================================================================ */
.mobile-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 1100;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0,86,179,0.1);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.nav-container {
    display: flex;
    justify-content: space-evenly;
    align-items: flex-end;
    padding: 6px 8px 8px;
    max-width: 500px;
    margin: 0 auto;
}
.mobile-nav .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 8px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
    position: relative;
    background: none; border: none; cursor: pointer;
    flex: 1; max-width: 64px;
}
.mobile-nav .nav-item i {
    font-size: 1.25rem;
    color: var(--theme-text-muted, #6c757d);
    transition: all 0.2s ease;
}
.mobile-nav .nav-item span {
    font-size: 0.6rem; font-weight: 500;
    color: var(--theme-text-muted, #6c757d);
    transition: all 0.2s ease; white-space: nowrap;
}
.mobile-nav .nav-item:hover i,
.mobile-nav .nav-item:hover span { color: var(--bs-primary, #0056b3); }
.mobile-nav .nav-item.active { background: rgba(0,86,179,0.1); }
.mobile-nav .nav-item.active i,
.mobile-nav .nav-item.active span { color: var(--bs-primary, #0056b3); }

/* Scan / Center button (elevated) */
.mobile-nav .scan-item { position: relative; padding-top: 0; }
.mobile-nav .scan-icon {
    width: 48px; height: 48px; border-radius: 14px;
    background: linear-gradient(135deg, var(--bs-primary,#0056b3) 0%, #004494 100%);
    display: flex; align-items: center; justify-content: center;
    margin-top: -12px;
    box-shadow: 0 4px 12px rgba(0,86,179,0.3);
    transition: all 0.2s ease;
}
.mobile-nav .scan-icon i { font-size: 1.4rem; color: white !important; }
.mobile-nav .scan-item.active .scan-icon,
.mobile-nav .scan-item:hover .scan-icon { box-shadow: 0 4px 16px rgba(0,86,179,0.4); transform: translateY(-2px); }
.mobile-nav .scan-item span { margin-top: 4px; }