/* ========================================
   CASHBOOKSYSTEM THEME CSS VARIABLES
   ======================================== */

:root {
  /* Base Colors */
  --clr-dark-a0: #000000;
  --clr-light-a0: #ffffff;

  /* Primary Colors - Lime/Yellow theme */
  --clr-primary-a0: #d8ed18;
  --clr-primary-a10: #deef45;
  --clr-primary-a20: #e4f162;
  --clr-primary-a30: #e9f37b;
  --clr-primary-a40: #eef592;
  --clr-primary-a50: #f2f7a8;
  --clr-primary-a60: #f6f9be;
  --clr-primary-a70: #fafbd4;
  --clr-primary-a80: #fdfde9;
  --clr-primary-a90: #ffffff;

  /* Surface Colors - Backgrounds and cards */
  --clr-surface-a0: #030303;
  --clr-surface-a10: #1f1f1f;
  --clr-surface-a20: #373737;
  --clr-surface-a30: #505050;
  --clr-surface-a40: #6a6a6a;
  --clr-surface-a50: #868686;
  --clr-surface-a60: #a3a3a3;
  --clr-surface-a70: #c1c1c1;

  /* Tonal Surface Colors */
  --clr-surface-tonal-a0: #1b1c0e;
  --clr-surface-tonal-a10: #303125;
  --clr-surface-tonal-a20: #46473c;
  --clr-surface-tonal-a30: #5e5f55;
  --clr-surface-tonal-a40: #77776f;
  --clr-surface-tonal-a50: #90918a;
  --clr-surface-tonal-a60: #ababa6;
  --clr-surface-tonal-a70: #c6c6c3;

  /* Success Colors */
  --clr-success: #22946e;
  --clr-success-light: #47d5a6;
  --clr-success-bg: rgba(34, 148, 110, 0.1);
  --clr-success-border: #22946e;
  --clr-success-a0: #22946e;
  --clr-success-a10: #47d5a6;
  --clr-success-a20: #9ae8ce;

  /* Warning Colors */
  --clr-warning: #a87a2a;
  --clr-warning-light: #d7ac61;
  --clr-warning-bg: rgba(168, 122, 42, 0.1);
  --clr-warning-border: #a87a2a;
  --clr-warning-a0: #a87a2a;
  --clr-warning-a10: #d7ac61;
  --clr-warning-a20: #ecd7b2;

  /* Error/Danger Colors */
  --clr-error: #9c2121;
  --clr-error-light: #d94a4a;
  --clr-error-bg: rgba(156, 33, 33, 0.1);
  --clr-error-border: #9c2121;
  --clr-danger-a0: #9c2121;
  --clr-danger-a10: #d94a4a;
  --clr-danger-a20: #eb9e9e;

  /* Info Colors */
  --clr-info: #21498a;
  --clr-info-light: #4077d1;
  --clr-info-bg: rgba(33, 73, 138, 0.1);
  --clr-info-border: #21498a;
  --clr-info-a0: #21498a;
  --clr-info-a10: #4077d1;
  --clr-info-a20: #92b2e5;

  /* Income/Expense Colors */
  --clr-income: #22946e;
  --clr-expense: #d94a4a;

  /* Additional Accent Colors */
  --clr-accent-green: #22946e;
  --clr-accent-red: #9c2121;
  --clr-accent-blue: #21498a;
  --clr-accent-yellow: #d8ed18;
  --clr-accent-orange: #a87a2a;
}

/* ========================================
   MOBILE RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
  h1 {
    font-size: 1.5rem !important;
    line-height: 2rem !important;
  }

  h2 {
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
  }

  h3 {
    font-size: 1.125rem !important;
    line-height: 1.5rem !important;
  }
}

/* ========================================
   PAGINATION STYLES
   ======================================== */

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin: 2rem 0 1rem 0;
  flex-wrap: wrap;
}

.pagination-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: var(--clr-surface-a10);
  color: var(--clr-primary-a10);
  border: 1px solid var(--clr-surface-a20);
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
  cursor: pointer;
}

.pagination-btn:hover {
  background-color: var(--clr-surface-a20);
  border-color: var(--clr-primary-a10);
  transform: translateY(-1px);
}

.pagination-btn:active {
  transform: translateY(0);
}

.pagination-pages {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

.pagination-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0.5rem;
  background-color: var(--clr-surface-a10);
  color: var(--clr-surface-a60);
  border: 1px solid var(--clr-surface-a20);
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
  cursor: pointer;
}

.pagination-number:hover {
  background-color: var(--clr-surface-a20);
  color: var(--clr-primary-a10);
  border-color: var(--clr-primary-a10);
}

.pagination-number.active {
  background-color: var(--clr-primary-a0);
  color: var(--clr-surface-a0);
  border-color: var(--clr-primary-a0);
  font-weight: 600;
  cursor: default;
}

.pagination-number.active:hover {
  background-color: var(--clr-primary-a0);
  color: var(--clr-surface-a0);
  border-color: var(--clr-primary-a0);
}

.pagination-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  color: var(--clr-surface-a50);
  font-size: 0.875rem;
  font-weight: 500;
}

.pagination-info {
  text-align: center;
  color: var(--clr-surface-a50);
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

/* Mobile responsive pagination */
@media (max-width: 768px) {
  .pagination {
    gap: 0.25rem;
    margin: 1.5rem 0 0.75rem 0;
  }

  .pagination-btn {
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
  }

  .pagination-number {
    min-width: 2rem;
    height: 2rem;
    padding: 0.4rem;
    font-size: 0.8rem;
  }

  .pagination-ellipsis {
    min-width: 2rem;
    height: 2rem;
    font-size: 0.8rem;
  }

  .pagination-info {
    font-size: 0.8rem;
    padding: 0 0.5rem;
  }

  .pagination-btn i {
    font-size: 0.7rem;
  }
}

/* Tablet responsive pagination */
@media (max-width: 1024px) and (min-width: 769px) {
  .pagination {
    gap: 0.4rem;
  }

  .pagination-btn {
    padding: 0.45rem 0.85rem;
    font-size: 0.85rem;
  }

  .pagination-number {
    min-width: 2.25rem;
    height: 2.25rem;
    font-size: 0.85rem;
  }
}