@import url("theme.css");
@import url("loader-blocker.css");

/* Global Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Manrope", sans-serif;
  background: var(--color-background);
  color: var(--color-text-primary);
  transition:
    background var(--transition-base),
    color var(--transition-base);
}

.app {
  max-width: 1280px;
  margin: auto;
  min-height: 100vh;
  padding-bottom: 80px;
  background: var(--color-surface);
}

/* Header Section */
.header-section {
  padding: var(--spacing-lg) var(--spacing-xl);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background-size: cover;
  background-position: center;
  border: 2px solid var(--color-border);
}

.welcome-text {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.user-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.notification-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: none;
  background: var(--color-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition-base);
}

.notification-btn:hover {
  background: var(--color-gray-200);
}

.notification-btn .material-symbols-outlined {
  font-size: 22px;
  color: var(--color-gray-500);
}

/* Greeting Section */
.greeting-section {
  padding: var(--spacing-2xl) var(--spacing-xl) var(--spacing-xl);
  background: var(--color-surface);
}

.greeting-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--color-text-primary);
  margin: 0 0 4px 0;
  line-height: 1.2;
}

.greeting-date {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0;
}

/* Stats Section */
.stats-section {
  padding: 0 var(--spacing-xl) var(--spacing-2xl);
  background: var(--color-surface);
}

.stats-scroll {
  display: flex;
  gap: var(--spacing-md);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.stats-scroll::-webkit-scrollbar {
  display: none;
}

.stat-card {
  min-width: 160px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  flex-shrink: 0;
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

@media (min-width: 768px) {
  .stats-scroll {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow-x: visible;
  }
  .stat-card {
    min-width: 0;
  }
}

.stat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-lg);
}

.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-icon .material-symbols-outlined {
  font-size: 24px;
}

.stat-icon-blue {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.stat-icon-orange {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

.stat-icon-purple {
  background: var(--color-info-light);
  color: var(--color-info);
}

.stat-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: var(--radius-md);
}

.stat-badge-green {
  background: var(--color-success-light);
  color: var(--color-success-dark);
}

.stat-badge-text {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-muted);
}

.stat-label {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-bottom: 4px;
  font-weight: 500;
}

.stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-primary);
}

/* Services Section */
.services-section {
  padding: var(--spacing-2xl) var(--spacing-xl);
  background: var(--color-surface);
}

.section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-lg) 0;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
}

@media (min-width: 768px) {
  .services-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.service-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl) var(--spacing-lg);
  text-align: left;
  cursor: pointer;
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
}

.service-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.service-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-md);
}

.service-icon .material-symbols-outlined {
  font-size: 26px;
  color: var(--color-surface);
}

.service-icon-blue {
  background: var(--color-primary);
}

.service-icon-green {
  background: var(--color-success);
}

.service-icon-orange {
  background: var(--color-warning);
}

.service-icon-purple {
  background: var(--color-info);
}

.service-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.service-subtitle {
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 500;
}

/* Activity Section */
.activity-section {
  padding: var(--spacing-2xl) var(--spacing-xl);
  background: var(--color-surface);
}

.view-all-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-base);
}

.view-all-link:hover {
  color: var(--color-primary-dark);
}

.activity-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-sm);
  align-items: start;
}

@media (min-width: 768px) {
  .activity-list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
  }
}

.item-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none !important;
  margin-bottom: var(--spacing-sm);
}

.item-card:last-child {
  margin-bottom: 0;
}

.item-card:active {
  transform: scale(0.98);
  background: var(--color-gray-50);
}

.item-card.activity-item {
  margin-bottom: 0; /* Handled by list gap */
}

.activity-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.activity-icon .material-symbols-outlined {
  font-size: 22px;
}

.activity-icon-green {
  background: #ecfdf5;
}

.activity-icon-green .material-symbols-outlined {
  color: #10b981;
}

.activity-icon-blue {
  background: #f0f9ff;
}

.activity-icon-blue .material-symbols-outlined {
  color: #3b82f6;
}

.activity-icon-orange {
  background: #fffbeb;
}

.activity-icon-orange .material-symbols-outlined {
  color: #f59e0b;
}

.activity-content {
  flex: 1;
}

.activity-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 2px;
}

.activity-time {
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 500;
}

.activity-arrow {
  font-size: 18px;
  color: var(--color-gray-300);
}

/* Bottom Navigation */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 430px;
  margin: auto;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--spacing-sm) 0;
  z-index: 1000;
}

@media (min-width: 480px) {
  .bottom-nav {
    max-width: 430px;
    border-radius: 50px;
    border: 1px solid var(--color-border);
    bottom: 20px;
  }
}

.nav-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--spacing-sm) var(--spacing-md);
  cursor: pointer;
  transition: all var(--transition-base);
  color: var(--color-text-muted);
}

.nav-item .material-symbols-outlined {
  font-size: 24px;
}

.nav-label {
  font-size: 11px;
  font-weight: 600;
}

.nav-item-active {
  color: var(--color-primary);
}

.nav-item:hover {
  color: var(--color-primary);
}

/* Material Icons Override */
span.material-symbols-outlined {
  font-variation-settings:
    "FILL" 0,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;
}

/* ============================================ */
/* Payroll Payslip Page Styles */
/* ============================================ */

/* Header */
.payroll-header {
  padding: var(--spacing-lg) var(--spacing-xl);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.back-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: none;
  background: var(--color-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition-base);
}

.back-btn:hover {
  background: var(--color-gray-200);
}

.back-btn .material-symbols-outlined {
  font-size: 22px;
  color: var(--color-gray-700);
}

.page-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
}

.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: none;
  background: var(--color-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition-base);
}

.icon-btn:hover {
  background: var(--color-gray-200);
}

.icon-btn .material-symbols-outlined {
  font-size: 20px;
  color: var(--color-gray-500);
}

/* Latest Payslip Section */
.payslip-section {
  padding: var(--spacing-2xl) var(--spacing-xl);
  background: var(--color-surface);
}

.status-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  letter-spacing: 0.5px;
}

.status-deposited {
  background: var(--color-success-light);
  color: var(--color-success-dark);
}

.payslip-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
}

.payslip-period {
  font-size: 13px;
  color: var(--color-text-muted);
  font-weight: 500;
  margin-bottom: var(--spacing-sm);
}

.payslip-amount {
  font-size: 36px;
  font-weight: 800;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-xl);
  display: flex;
  align-items: baseline;
  gap: var(--spacing-sm);
}

.amount-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.5px;
}

.payslip-details {
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-sm);
}

.detail-row:last-child {
  margin-bottom: 0;
}

.detail-label {
  font-size: 13px;
  color: var(--color-text-secondary);
  font-weight: 500;
}

.detail-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.text-danger {
  color: var(--color-danger) !important;
}

.download-btn,
.submit-btn {
  width: 100%;
  padding: var(--spacing-sm);
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  transition: background var(--transition-base);
}

.download-btn:hover,
.submit-btn:hover {
  background: var(--color-primary-dark);
}

.download-btn .material-symbols-outlined,
.submit-btn .material-symbols-outlined {
  font-size: 20px;
}

/* Year to Date Section */
.ytd-section {
  padding: var(--spacing-2xl) var(--spacing-xl);
  background: var(--color-surface);
}

.ytd-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
}

.ytd-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
}

.ytd-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.5px;
  margin-bottom: var(--spacing-sm);
}

.ytd-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
}

/* Pay Breakdown Section */
.breakdown-section {
  padding: var(--spacing-2xl) var(--spacing-xl);
  background: var(--color-surface);
}

.pay-breakdown {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-sm);
}

@media (min-width: 768px) {
  .pay-breakdown {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
  }
}

.breakdown-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-sm);
}

@media (min-width: 768px) {
  .breakdown-list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
  }
}

.breakdown-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-base);
}

.breakdown-item:hover {
  background: var(--color-gray-50);
  transform: translateY(-2px);
}

.breakdown-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.breakdown-icon .material-symbols-outlined {
  font-size: 20px;
  color: white;
}

.breakdown-icon-green {
  background: var(--color-success);
}

.breakdown-icon-blue {
  background: var(--color-primary);
}

.breakdown-icon-red {
  background: var(--color-danger);
}

.breakdown-content {
  flex: 1;
}

.breakdown-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 2px;
}

.breakdown-subtitle {
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 500;
  letter-spacing: 0.3px;
}

.breakdown-amount {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
}

/* History Section */
.history-section {
  padding: var(--spacing-2xl) var(--spacing-xl);
  background: var(--color-surface);
}

.history-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-sm);
}

@media (min-width: 768px) {
  .history-list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
  }
}

.history-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-base);
}

.history-item:hover {
  background: var(--color-gray-50);
  transform: translateY(-2px);
}

.history-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.history-icon .material-symbols-outlined {
  font-size: 20px;
  color: var(--color-gray-500);
}

.history-content {
  flex: 1;
}

.history-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 2px;
}

.history-subtitle {
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 500;
  letter-spacing: 0.3px;
}

.history-amount {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-right: var(--spacing-sm);
}

.history-arrow {
  font-size: 20px;
  color: var(--color-gray-300);
}

/* Utility Classes */
.gap-2 {
  gap: var(--spacing-sm);
}

.gap-3 {
  gap: var(--spacing-md);
}

/* ============================================ */
/* Offcanvas Menu Styles */
/* ============================================ */

.offcanvas {
  max-width: 280px;
  background: var(--color-surface);
}

.offcanvas-header {
  padding: var(--spacing-lg) var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
}

.offcanvas-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
}

.btn-close {
  background-color: var(--color-gray-100);
  border-radius: var(--radius-full);
  opacity: 1;
  width: 28px;
  height: 28px;
  padding: 0;
}

.offcanvas-header .btn-close {
  padding: calc(var(--bs-offcanvas-padding-y) * 0.1) calc(var(--bs-offcanvas-padding-x) * 0.1);
  margin-top: calc(-0.5 * var(--bs-offcanvas-padding-y));
  margin-right: calc(-0.5 * var(--bs-offcanvas-padding-x));
  margin-bottom: calc(-0.5 * var(--bs-offcanvas-padding-y));
}

.btn-close:hover {
  background-color: var(--color-gray-200);
}

.offcanvas-body {
  padding: var(--spacing-lg);
}

/* User Profile Section */
.offcanvas-user-section {
  text-align: center;
  padding: var(--spacing-md) 0;
}

.offcanvas-user-section .avatar {
  width: 48px;
  height: 48px;
  margin: 0 auto;
}

.offcanvas-user-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 2px;
}

.offcanvas-user-email {
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 500;
}

/* Menu List */
.offcanvas-menu-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.offcanvas-menu-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-base);
}

.offcanvas-menu-item:hover {
  background: var(--color-gray-50);
  transform: translateX(4px);
  border-color: var(--color-primary);
}

.offcanvas-menu-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--color-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.offcanvas-menu-icon .material-symbols-outlined {
  font-size: 18px;
  color: var(--color-gray-600);
}

.offcanvas-menu-item:hover .offcanvas-menu-icon {
  background: var(--color-primary-light);
}

.offcanvas-menu-item:hover .offcanvas-menu-icon .material-symbols-outlined {
  color: var(--color-primary);
}

.offcanvas-menu-content {
  flex: 1;
}

.offcanvas-menu-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 1px;
}

.offcanvas-menu-subtitle {
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 500;
}

.offcanvas-menu-arrow {
  font-size: 18px;
  color: var(--color-gray-300);
  transition: color var(--transition-base);
}

.offcanvas-menu-item:hover .offcanvas-menu-arrow {
  color: var(--color-primary);
}

/* Logout Button */
.offcanvas-logout-btn {
  width: 100%;
  padding: var(--spacing-sm);
  background: var(--color-danger-light);
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  cursor: pointer;
  transition: all var(--transition-base);
}

.offcanvas-logout-btn:hover {
  background: var(--color-danger);
  color: white;
}

.offcanvas-logout-btn .material-symbols-outlined {
  font-size: 18px;
}

/* Contributions Page Specific Styles */
.contributions-total-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-lg);
}

.contributions-total-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.5px;
  margin-bottom: var(--spacing-sm);
}

.contributions-total-amount {
  font-size: 36px;
  font-weight: 800;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-sm);
}

.contributions-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: var(--radius-md);
  background: var(--color-success-light);
  color: var(--color-success-dark);
}

.chart-container {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-lg);
  height: 220px;
}

.filter-tabs {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.filter-tabs::-webkit-scrollbar {
  display: none;
}

.filter-btn {
  padding: 8px 16px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
}

.filter-btn:hover {
  background: var(--color-gray-50);
}

.filter-btn.active {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

.breakdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-lg);
}

.filter-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  cursor: pointer;
}

.month-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-md);
  overflow: hidden;
}

.month-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  cursor: pointer;
  transition: background var(--transition-base);
}

.month-header:hover {
  background: var(--color-gray-50);
}

.month-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.month-icon .material-symbols-outlined {
  font-size: 20px;
  color: var(--color-primary);
}

.month-content {
  flex: 1;
}

.month-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 2px;
}

.month-subtitle {
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 500;
}

.month-amount {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-right: var(--spacing-sm);
}

.month-status {
  font-size: 10px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: var(--color-success-light);
  color: var(--color-success-dark);
  letter-spacing: 0.5px;
}

.month-arrow {
  font-size: 20px;
  color: var(--color-gray-300);
  transition: transform var(--transition-base);
}

.month-item.expanded .month-arrow {
  transform: rotate(90deg);
}

.month-details {
  display: none;
  padding: 0 var(--spacing-lg) var(--spacing-lg);
  border-top: 1px solid var(--color-border);
}

.month-item.expanded .month-details {
  display: block;
}

.contribution-detail {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) 0;
}

.contribution-detail:not(:last-child) {
  border-bottom: 1px solid var(--color-border);
}

.contribution-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contribution-icon .material-symbols-outlined {
  font-size: 18px;
}

.contribution-icon-pension {
  background: #fef3c7;
  color: #f59e0b;
}

.contribution-icon-health {
  background: #fecaca;
  color: #ef4444;
}

.contribution-icon-social {
  background: #dbeafe;
  color: #3b82f6;
}

.contribution-label {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.contribution-amount {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.limit-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-2xl);
}

.limit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-sm);
}

.limit-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.limit-percentage {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-primary);
}

.limit-subtitle {
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 500;
  margin-bottom: var(--spacing-lg);
}

.progress-bar-container {
  height: 8px;
  background: var(--color-gray-100);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: var(--spacing-md);
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark));
  border-radius: var(--radius-full);
  transition: width 0.5s ease;
}

.limit-text {
  font-size: 12px;
  color: var(--color-text-muted);
  text-align: center;
}

.limit-text strong {
  color: var(--color-text-primary);
  font-weight: 700;
}

/* ============================================ */
/* Attendance Page Styles */
/* ============================================ */

/* Attendance Status Card */
.attendance-status-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-lg);
}

.attendance-status-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.5px;
  margin-bottom: var(--spacing-sm);
}

.attendance-status-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-lg);
}

.attendance-duty-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  background: var(--color-gray-100);
  color: var(--color-text-muted);
  letter-spacing: 0.5px;
}

.attendance-info-label {
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 500;
  margin-bottom: 4px;
}

.attendance-info-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.attendance-clock-btn {
  width: 100%;
  padding: var(--spacing-md);
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius-lg);
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  transition: all var(--transition-base);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.attendance-clock-btn:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

.attendance-clock-btn .material-symbols-outlined {
  font-size: 22px;
}

.attendance-current-time {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 500;
}

.attendance-current-time .material-symbols-outlined {
  font-size: 16px;
  color: var(--color-gray-400);
}

/* Status Indicators */
.attendance-indicators {
  display: flex;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-md) 0;
}

.attendance-indicator {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.indicator-success {
  background: var(--color-success);
}

.indicator-warning {
  background: var(--color-warning);
}

.indicator-danger {
  background: var(--color-danger);
}

.indicator-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
}

/* Calendar Section - FullCalendar Overrides */
.attendance-calendar-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

/* FullCalendar Custom Styling */
#attendanceCalendar {
  font-family: "Manrope", sans-serif;
}

/* Header */
#attendanceCalendar .fc-header-toolbar {
  margin-bottom: var(--spacing-lg) !important;
  padding: 0 !important;
}

#attendanceCalendar .fc-toolbar-chunk {
  display: flex;
  align-items: center;
}

/* Title */
#attendanceCalendar .fc-toolbar-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
}

/* Navigation Buttons */
#attendanceCalendar .fc-button {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: var(--radius-md) !important;
  border: none !important;
  background: var(--color-gray-100) !important;
  color: var(--color-gray-600) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background var(--transition-base) !important;
  box-shadow: none !important;
}

#attendanceCalendar .fc-button:hover {
  background: var(--color-gray-200) !important;
}

#attendanceCalendar .fc-button:focus {
  box-shadow: none !important;
}

#attendanceCalendar .fc-button:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

#attendanceCalendar .fc-button .fc-icon {
  font-size: 20px !important;
  line-height: 1 !important;
}

/* Remove button text, keep only icons */
#attendanceCalendar .fc-button-primary {
  font-size: 0 !important;
}

/* Calendar Grid */
#attendanceCalendar .fc-scrollgrid {
  border: none !important;
}

#attendanceCalendar .fc-theme-standard td,
#attendanceCalendar .fc-theme-standard th {
  border: none !important;
}

/* Day Headers (Weekdays) */
#attendanceCalendar .fc-col-header-cell {
  padding: var(--spacing-sm) 0 !important;
  background: transparent !important;
  border: none !important;
}

#attendanceCalendar .fc-col-header-cell-cushion {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--color-text-muted) !important;
  text-decoration: none !important;
  padding: 0 !important;
  display: block !important;
  text-align: center !important;
}

/* Day Cells */
#attendanceCalendar .fc-daygrid-day {
  background: transparent !important;
  cursor: pointer !important;
  transition: all var(--transition-base) !important;
  margin: 2px !important;
}

#attendanceCalendar .fc-daygrid-day-frame {
  height: 50px;
  min-height: 17px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--radius-md) !important;
  padding: var(--spacing-sm) !important;
  margin: 2px;
}

/* #attendanceCalendar .fc-daygrid-day:hover .fc-daygrid-day-frame {
  background: var(--color-gray-50) !important;
} */

/* Day Numbers */
#attendanceCalendar .fc-daygrid-day-number {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--color-text-primary) !important;
  padding: 0 !important;
  text-decoration: none !important;
  width: 100% !important;
  text-align: center !important;
}

/* Other Month Days */
#attendanceCalendar .fc-day-other .fc-daygrid-day-number {
  color: var(--color-text-muted) !important;
  opacity: 0.3 !important;
}

/* Today */
#attendanceCalendar .fc-day-today .fc-daygrid-day-frame {
  background: var(--color-primary) !important;
}

#attendanceCalendar .fc-day-today .fc-daygrid-day-number {
  color: white !important;
  font-weight: 700 !important;
}

/* Custom Attendance Status Classes */
#attendanceCalendar .fc-day-present .fc-daygrid-day-frame {
  background: var(--color-success-light) !important;
}

#attendanceCalendar .fc-day-present .fc-daygrid-day-number {
  color: var(--color-success-dark) !important;
}

#attendanceCalendar .fc-day-late .fc-daygrid-day-frame {
  background: var(--color-warning-light) !important;
}

#attendanceCalendar .fc-day-late .fc-daygrid-day-number {
  color: var(--color-warning-dark) !important;
}

#attendanceCalendar .fc-day-absent .fc-daygrid-day-frame {
  background: var(--color-danger-light) !important;
}

#attendanceCalendar .fc-day-absent .fc-daygrid-day-number {
  color: var(--color-danger-dark) !important;
}

/* Override today when it has other status */
#attendanceCalendar .fc-day-today.fc-day-present .fc-daygrid-day-frame,
#attendanceCalendar .fc-day-today.fc-day-late .fc-daygrid-day-frame,
#attendanceCalendar .fc-day-today.fc-day-absent .fc-daygrid-day-frame {
  background: var(--color-primary) !important;
}

#attendanceCalendar .fc-day-today.fc-day-present .fc-daygrid-day-number,
#attendanceCalendar .fc-day-today.fc-day-late .fc-daygrid-day-number,
#attendanceCalendar .fc-day-today.fc-day-absent .fc-daygrid-day-number {
  color: white !important;
}

/* Hide events (we're using background colors instead) */
#attendanceCalendar .fc-event {
  display: none !important;
}

/* Remove any default borders and backgrounds */
#attendanceCalendar .fc-scrollgrid-sync-table {
  background: transparent !important;
}

#attendanceCalendar .fc-daygrid-body {
  background: transparent !important;
}

/* Adjust spacing */
#attendanceCalendar .fc-daygrid-day-top {
  flex-direction: row !important;
  justify-content: center !important;
}

.fc-theme-standard td,
.fc-theme-standard th {
  border: none !important;
}

/* Attendance Logs */
.attendance-logs-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.attendance-log-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: all var(--transition-base);
}

.attendance-log-item:hover {
  background: var(--color-gray-50);
  transform: translateX(4px);
}

.log-date-badge {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-primary);
  flex-shrink: 0;
}

.log-content {
  flex: 1;
}

.log-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.log-time {
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 500;
}

.log-status {
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  display: inline-block;
}

.log-status-ontime {
  background: var(--color-success-light);
  color: var(--color-success-dark);
}

.log-status-late {
  background: var(--color-warning-light);
  color: var(--color-warning-dark);
}

.log-status-absent {
  background: var(--color-danger-light);
  color: var(--color-danger-dark);
}

.log-duration {
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 500;
}
/* Profile Page Styles */
.profile-header-section {
  padding: var(--spacing-2xl) var(--spacing-xl);
  text-align: center;
  background: var(--color-surface);
}

.profile-avatar-container {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto var(--spacing-lg);
}

.profile-avatar {
  width: 120px;
  height: 120px;
  border-radius: var(--radius-full);
  border: 4px solid var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.avatar-edit-btn {
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 32px;
  height: 32px;
  background: var(--color-primary);
  color: white;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-surface);
  cursor: pointer;
}

.avatar-edit-btn .material-symbols-outlined {
  font-size: 18px;
}

.profile-name {
  font-size: 24px;
  font-weight: 800;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.profile-role {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
  padding: 0 var(--spacing-sm);
}

.section-label {
  font-size: 13px;
  font-weight: 800;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.edit-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
}

.info-cards-group {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
  margin-bottom: var(--spacing-xl);
}

.info-card-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition-fast);
}

.info-card-item:last-child {
  border-bottom: none;
}

.info-card-item:hover {
  background: var(--color-gray-50);
}

.info-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.info-icon.bg-success-light {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.info-icon.bg-primary-light {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.info-content {
  flex: 1;
}

.info-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  margin-bottom: 2px;
}

.info-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.doc-metadata {
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 500;
}

.action-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.action-icon-btn:hover {
  background: var(--color-primary);
  color: white;
}

.action-icon-btn.eye-btn {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}
.profile-content-bg {
  background: var(--color-background);
  min-height: 100vh;
}

/* Leave Request Page Styles */
.leave-section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--spacing-lg);
  padding: 0 var(--spacing-sm);
}

.leave-balance-scroll {
  display: flex;
  gap: var(--spacing-md);
  overflow-x: auto;
  padding: 4px var(--spacing-sm) var(--spacing-xl);
  scrollbar-width: none;
}

@media (min-width: 768px) {
  .leave-balance-scroll {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow-x: visible;
    align-items: start;
  }
  .balance-card {
    min-width: 0;
  }
}

.leave-balance-scroll::-webkit-scrollbar {
  display: none;
}

.balance-card {
  min-width: 110px;
  flex: 1;
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.balance-card-blue {
  background: #eff6ff;
  border-color: #dbeafe;
}

.balance-card-blue .balance-icon {
  color: var(--color-primary);
}

.balance-card-green {
  background: #f0fdf4;
  border-color: #dcfce7;
}

.balance-card-green .balance-icon {
  color: var(--color-success);
}

.balance-card-orange {
  background: #fffaf0;
  border-color: #ffedd5;
}

.balance-card-orange .balance-icon {
  color: var(--color-warning);
}

.balance-icon {
  font-size: 20px;
}

.balance-label {
  font-size: 9px;
  font-weight: 800;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.balance-value-group {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.balance-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-text-primary);
}

.balance-unit {
  font-size: 9px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.status-badge-pending {
  background: #fffbeb;
  color: #d97706;
}

.status-badge-approved {
  background: #f0fdf4;
  color: #16a34a;
}

.status-badge-rejected {
  background: #fef2f2;
  color: #dc2626;
}

.utilization-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  padding: var(--spacing-xl);
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.utilization-info {
  flex: 1;
}

.utilization-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.utilization-text {
  font-size: 11px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.circular-progress {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: conic-gradient(var(--color-primary) 45%, var(--color-gray-100) 0);
}

.circular-progress::before {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
}

.progress-value {
  position: relative;
  font-size: 13px;
  font-weight: 800;
  color: var(--color-text-primary);
}

.leave-fab {
  position: fixed;
  bottom: 100px;
  right: var(--spacing-xl);
  padding: var(--spacing-md) var(--spacing-xl);
  background: var(--color-primary);
  color: white;
  border-radius: var(--radius-full);
  border: none;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  box-shadow: 0 4px 12px rgba(47, 111, 237, 0.3);
  z-index: 100;
  cursor: pointer;
}

.leave-fab .material-symbols-outlined {
  font-size: 20px;
}

/* Apply Leave Form Styles */
.apply-leave-balance-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.balance-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--color-primary);
}

.apply-leave-balance-card .balance-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
  padding: 0;
}

.apply-leave-balance-card .balance-value-group {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-sm);
}

.apply-leave-balance-card .balance-value {
  font-size: 32px;
  font-weight: 800;
  color: var(--color-text-primary);
}

.apply-leave-balance-card .balance-unit {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-muted);
}

.form-section-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  padding: 0 var(--spacing-sm);
}

.form-section-header .material-symbols-outlined {
  font-size: 24px;
  color: var(--color-text-secondary);
}

.form-section-header .section-label {
  font-size: 13px;
  font-weight: 800;
  color: var(--color-text-primary);
  text-transform: none;
  letter-spacing: normal;
}

.form-group {
  margin-bottom: var(--spacing-xl);
}

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-sm);
  padding-left: var(--spacing-sm);
}

.form-control-custom {
  width: 100%;
  padding: var(--spacing-lg) var(--spacing-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: 14px;
  color: var(--color-text-primary);
  transition: all var(--transition-base);
  appearance: none;
}

.form-control-custom:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.1);
}

.form-control-custom::placeholder {
  color: var(--color-text-muted);
}

.select-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.dropdown-icon {
  position: absolute;
  right: var(--spacing-lg);
  pointer-events: none;
  width: 24px;
  height: 24px;
  background: #f59e0b; /* From the image, the icon has some color */
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dropdown-icon .material-symbols-outlined {
  color: white;
  font-size: 18px;
}

.date-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.date-input-wrapper .material-symbols-outlined {
  position: absolute;
  right: var(--spacing-lg);
  pointer-events: none;
  color: var(--color-text-muted);
}

.upload-container {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-2xl) var(--spacing-xl);
  text-align: center;
  background: var(--color-gray-50);
  cursor: pointer;
  transition: all var(--transition-base);
}

.upload-container:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.upload-icon-wrapper {
  width: 48px;
  height: 48px;
  background: white;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--spacing-lg);
  box-shadow: var(--shadow-sm);
}

.upload-icon-wrapper .material-symbols-outlined {
  color: var(--color-primary);
  font-size: 24px;
}

.upload-text {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.upload-hint {
  font-size: 11px;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.submit-btn-wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 430px;
  margin: auto;
  padding: var(--spacing-lg) var(--spacing-xl);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  z-index: 101;
}

.submit-btn {
  width: 100%;
  padding: var(--spacing-lg);
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius-lg);
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  box-shadow: 0 4px 12px rgba(47, 111, 237, 0.3);
}

.submit-btn:active {
  transform: scale(0.98);
}

/* Loan Page Styles */
.loan-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

.loan-summary-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.loan-summary-card .material-symbols-outlined {
  font-size: 20px;
  color: var(--color-primary);
}

.loan-summary-label {
  font-size: 9px;
  font-weight: 800;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.loan-summary-value {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-text-primary);
}

.loan-summary-subtext {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.active-loan-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--spacing-2xl);
}

.loan-card-header {
  height: 120px;
  background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
  position: relative;
}

.loan-card-body {
  padding: var(--spacing-xl);
}

.loan-status-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
}

.loan-status-badge {
  background: #d1fae5;
  color: #065f46;
  font-size: 10px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}

.loan-id {
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 500;
}

.loan-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-xl);
}

.loan-progress-section {
  margin-bottom: var(--spacing-xl);
}

.progress-labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--spacing-sm);
}

.progress-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.progress-value {
  font-size: 11px;
  font-weight: 800;
  color: var(--color-primary);
}

.loan-progress-bar {
  height: 8px;
  background: var(--color-gray-100);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.loan-progress-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-full);
}

.loan-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: var(--spacing-xl);
  border-top: 1px solid var(--color-border);
}

.loan-meta-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.loan-meta-main {
  font-size: 13px;
  font-weight: 800;
  color: var(--color-text-primary);
}

.loan-meta-sub {
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 500;
}

.details-btn {
  background: #111827;
  color: white;
  border: none;
  border-radius: var(--radius-md);
  padding: 8px 24px;
  font-size: 13px;
  font-weight: 700;
  transition: opacity var(--transition-base);
}

.details-btn:active {
  opacity: 0.8;
}

.installment-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.installment-item:last-child {
  border-bottom: none;
}

.installment-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-success {
  background: #ecfdf5;
  color: #10b981;
}

.icon-pending {
  background: #f0f9ff;
  color: #3b82f6;
}

.installment-content {
  flex: 1;
}

.installment-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--color-text-primary);
  margin-bottom: 2px;
}

.installment-meta {
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 500;
}

.installment-amount {
  font-size: 14px;
  font-weight: 800;
  color: var(--color-text-primary);
}

/* History Page Styles */
.history-tabs-container {
  padding: var(--spacing-md) var(--spacing-xl);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 73px; /* Below header */
  z-index: 100;
  overflow-x: auto;
  scrollbar-width: none;
}

.history-tabs-container::-webkit-scrollbar {
  display: none;
}

.history-tabs {
  display: flex;
  gap: var(--spacing-sm);
  min-width: max-content;
}

.history-tab {
  padding: 8px 16px;
  border-radius: var(--radius-full);
  background: var(--color-gray-100);
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-base);
  border: 1px solid transparent;
}

.history-tab.active {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-color: var(--color-primary-light);
}

.history-content-section {
  display: none;
}

.history-content-section.active {
  display: block;
}

.history-empty-state {
  padding: 60px 20px;
  text-align: center;
}

.history-empty-icon {
  font-size: 64px;
  color: var(--color-gray-200);
  margin-bottom: var(--spacing-lg);
}

.history-empty-text {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-secondary);
  margin-bottom: 4px;
}

.history-empty-subtext {
  font-size: 13px;
  color: var(--color-text-muted);
}
.detail-hero {
  padding: var(--spacing-3xl) var(--spacing-xl);
  text-align: center;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.detail-icon-wrapper {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--spacing-xl);
}

.detail-icon-wrapper .material-symbols-outlined {
  font-size: 40px;
}

.detail-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-sm);
}

.detail-status-badge {
  display: inline-flex;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.detail-info-group {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin: var(--spacing-xl) 0;
  overflow: hidden;
}

.detail-info-item {
  padding: var(--spacing-lg) var(--spacing-xl);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
}

.detail-info-item:last-child {
  border-bottom: none;
}

.detail-info-label {
  font-size: 13px;
  color: var(--color-text-muted);
  font-weight: 600;
}

.detail-info-value {
  font-size: 14px;
  color: var(--color-text-primary);
  font-weight: 700;
}

.detail-message-box {
  padding: var(--spacing-xl);
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
  margin-top: var(--spacing-xl);
}

.detail-message-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-sm);
  text-transform: uppercase;
}

.detail-message-content {
  font-size: 14px;
  color: var(--color-text-primary);
  line-height: 1.6;
}

.tab-nav-sticky {
  position: sticky;
  top: 60px;
  z-index: 90;

  padding: var(--spacing-md) var(--spacing-xl);
  border-bottom: 1px solid var(--color-border);
}

.announcement-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
}

@media (min-width: 768px) {
  .announcement-list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xl);
  }
}

/* Announcement Styles */
.announcement-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--spacing-xl);
  transition: all var(--transition-base);
}

.announcement-card:active {
  transform: scale(0.98);
}

.announcement-image {
  width: 100%;
  height: 160px;
  background-size: cover;
  background-position: center;
  background-color: var(--color-gray-100);
}

.announcement-body {
  padding: var(--spacing-xl);
}

.announcement-tag {
  display: inline-block;
  padding: 4px 10px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 10px;
  font-weight: 800;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  margin-bottom: var(--spacing-sm);
  letter-spacing: 0.5px;
}

.announcement-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-xs);
  line-height: 1.4;
}

.announcement-excerpt {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--spacing-lg);
}

.announcement-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 600;
}

.notification-unread-dot {
  width: 8px;
  height: 8px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  position: absolute;
  top: 14px;
  right: 14px;
}

.announcement-detail-hero {
  width: 100%;
  height: 240px;
  background-size: cover;
  background-position: center;
  position: relative;
  background-color: var(--color-gray-100);
}

.announcement-detail-hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
}

.announcement-detail-tag {
  position: absolute;
  bottom: var(--spacing-xl);
  left: var(--spacing-xl);
  z-index: 10;
}

.detail-content-area {
  background: var(--color-surface);
  border-radius: 24px 24px 0 0;
  margin-top: -24px;
  position: relative;
  z-index: 20;
  padding: var(--spacing-2xl) var(--spacing-xl);
  min-height: 100vh;
}

.announcement-full-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--color-text-primary);
  line-height: 1.3;
  margin-bottom: var(--spacing-lg);
}

.announcement-full-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding-bottom: var(--spacing-xl);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--spacing-xl);
}

.author-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.author-avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
}

.author-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.announcement-date {
  font-size: 13px;
  color: var(--color-text-muted);
  font-weight: 600;
}

.announcement-rich-text {
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text-secondary);
}

.announcement-rich-text p {
  margin-bottom: var(--spacing-xl);
}

.announcement-rich-text h4 {
  color: var(--color-text-primary);
  font-weight: 800;
  margin-top: var(--spacing-3xl);
  margin-bottom: var(--spacing-lg);
}

/* Target only the leave breakdown table */
#leave_breakdown_table {
  min-width: 650px;
  width: 100%;
  margin-bottom: 0;
}

#leave_breakdown_table thead th {
  white-space: nowrap;
  background-color: #f8f9fa;
}

#leave_breakdown_table tbody td {
  white-space: nowrap;
  vertical-align: middle;
  padding: 10px 8px;
}

/* Target the parent responsive wrapper for this table only */
#leave_breakdown_table.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Mobile view - only for this table */
@media (max-width: 768px) {
  #leave_breakdown_table {
    min-width: 550px;
  }

  #leave_breakdown_table thead th {
    font-size: 13px;
    padding: 10px 8px;
  }

  #leave_breakdown_table tbody td {
    padding: 8px 6px;
  }

  /* Form controls inside this table only */
  #leave_breakdown_table .form-control-custom {
    min-width: 100px;
    font-size: 13px;
    padding: 6px 8px;
  }

  #leave_breakdown_table input[type="date"] {
    min-width: 130px;
  }

  #leave_breakdown_table select {
    min-width: 110px;
  }

  #leave_breakdown_table input[type="number"] {
    min-width: 80px;
  }
}

/* For very small screens */
@media (max-width: 480px) {
  #leave_breakdown_table {
    min-width: 500px;
  }
}

.approval-section {
  padding: var(--spacing-2xl) var(--spacing-xl);
  background: var(--color-surface);
}

.view-all-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-base);
}

.view-all-link:hover {
  color: var(--color-primary-dark);
}

.approval-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-sm);
  align-items: start;
}

@media (min-width: 768px) {
  .approval-list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
  }
}

.approval-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none !important;
  margin-bottom: var(--spacing-sm);
}

.approval-card:last-child {
  margin-bottom: 0;
}

.approval-card:active {
  transform: scale(0.98);
  background: var(--color-gray-50);
}

.approval-card.approval-item {
  margin-bottom: 0; /* Handled by list gap */
}

.approval-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.approval-icon .material-symbols-outlined {
  font-size: 22px;
}

.approval-icon-green {
  background: #ecfdf5;
}

.approval-icon-green .material-symbols-outlined {
  color: #10b981;
}

.approval-icon-blue {
  background: #f0f9ff;
}

.approval-icon-blue .material-symbols-outlined {
  color: #3b82f6;
}

.approval-icon-orange {
  background: #fffbeb;
}

.approval-icon-orange .material-symbols-outlined {
  color: #f59e0b;
}

.approval-content {
  flex: 1;
}

.approval-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 2px;
}

.approval-time {
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 500;
}

.approval-more-icon {
  font-size: 20px;
  color: var(--color-gray-400);
  cursor: pointer;
  transition: color var(--transition-base);
}

.approval-more-icon:hover {
  color: var(--color-gray-600);
}

/* Status Badge Styles */
.approval-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.approval-status-pending {
  background: #fef3c7;
  color: #d97706;
}

.approval-status-approved {
  background: #d1fae5;
  color: #059669;
}

.approval-status-rejected {
  background: #fee2e2;
  color: #dc2626;
}

.approval-menu {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 5px 0;
  min-width: 140px;
}

.menu-item {
  padding: 10px 15px;
  cursor: pointer;
  font-size: 14px;
}

.menu-item:hover {
  background: #f3f4f6;
}

/* Overtime specific section label */
.overtime-section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--spacing-lg);
  padding: 0 var(--spacing-sm);
}

/* Overtime balance scroll container */
.overtime-balance-scroll {
  display: flex;
  gap: var(--spacing-md);
  overflow-x: auto;
  padding: 4px var(--spacing-sm) var(--spacing-xl);
  scrollbar-width: none;
}

@media (min-width: 768px) {
  .overtime-balance-scroll {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow-x: visible;
    align-items: start;
  }
  .overtime-balance-scroll .balance-card {
    min-width: 0;
  }
}

.overtime-balance-scroll::-webkit-scrollbar {
  display: none;
}

/* Overtime FAB button */
.overtime-fab {
  position: fixed;
  bottom: 100px;
  right: var(--spacing-xl);
  padding: var(--spacing-md) var(--spacing-xl);
  background: var(--color-primary);
  color: white;
  border-radius: var(--radius-full);
  border: none;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  box-shadow: 0 4px 12px rgba(47, 111, 237, 0.3);
  z-index: 100;
  cursor: pointer;
}

.overtime-fab .material-symbols-outlined {
  font-size: 20px;
}

/* Overtime specific balance card variations (optional - if you want different colors) */
.balance-card-purple {
  background: #f5f3ff;
  border-color: #ede9fe;
}

.balance-card-purple .balance-icon {
  color: #8b5cf6;
}

.balance-card-teal {
  background: #f0fdfa;
  border-color: #ccfbf1;
}

.balance-card-teal .balance-icon {
  color: #14b8a6;
}

/* Overtime utilization bar (reuses .utilization-bar) */
/* Overtime specific text */
.utilization-percent-text {
  font-weight: 800;
  color: var(--color-primary);
}

/* Inputs, textarea, and select (match your card style) */
#timeInRequestForm input,
#timeInRequestForm textarea,
#timeInRequestForm select {
  font-size: 13px;
  border-radius: 10px;
  padding: 8px 10px;
  border: 1px solid #e0e0e0;
  transition: all 0.2s ease;
  background-color: #fff;
}

/* Dropdown options font size */
#timeInRequestForm select option {
  font-size: 13px;
}

/* Placeholder styling (clean + subtle) */
#timeInRequestForm input::placeholder,
#timeInRequestForm textarea::placeholder {
  font-size: 12px;
  color: #9e9e9e;
  opacity: 1;
}

/* Focus effect (matches modern UI feel) */
#timeInRequestForm input:focus,
#timeInRequestForm textarea:focus,
#timeInRequestForm select:focus {
  border-color: #4a90e2;
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.1);
  outline: none;
}

/* Labels slightly smaller + cleaner */
#timeInRequestForm .attendance-info-label {
  font-size: 12px;
  font-weight: 500;
  color: #666;
  margin-bottom: 4px;
  display: block;
}

/* Button polish */
#btnSubmitRequest {
  border-radius: 10px;
  padding: 8px 16px;
  font-size: 13px;
}