/* =========================================================================
   GLOBAL UI/UX FIXES - PAGINATION, RESPONSIVENESS, TABLES & BADGES
   ========================================================================= */

/* Pagination Fixes */
.pagination-wrapper {
    background-color: var(--tp-card-bg, #ffffff);
    border-bottom-left-radius: var(--tp-card-radius, 12px);
    border-bottom-right-radius: var(--tp-card-radius, 12px);
    padding: 10px 15px;
}
.pagination {
    margin-bottom: 0;
    align-items: center;
}
.page-item .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 10px !important;
    margin: 0 3px !important;
    border-radius: 6px !important;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 13px;
    background-color: #fff;
    white-space: nowrap !important;
    box-shadow: none !important;
}
.page-item.active .page-link {
    background-color: var(--tp-primary, #42389d) !important;
    border-color: var(--tp-primary, #42389d) !important;
    color: #ffffff !important;
}
.page-item.disabled .page-link {
    background-color: #f8fafc;
    color: #94a3b8;
    border-color: #e2e8f0;
}

/* Dashboard Restored Grids */
.dashboard-top-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.dashboard-mid-grid { display: grid; grid-template-columns: 1fr 1.45fr; gap: 14px; }
.dashboard-chart-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; }

/* Dashboard Top Cards Responsiveness */
.dashboard-card { 
    transition: transform 0.2s, box-shadow 0.2s; 
}
.dashboard-card:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important; 
}
.dashboard-card .card-body {
    padding: 1.25rem !important; /* reduce padding so text fits */
}
.dashboard-card .dashboard-icon i {
    font-size: clamp(28px, 3vw, 42px) !important; /* Scale icon dynamically */
}

/* Base font scaling */
.dashboard-card-amount {
  font-size: clamp(15px, 1.6vw, 24px) !important;
  line-height: 1.2 !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  white-space: nowrap !important;
}
.dashboard-card-title {
  font-size: clamp(10px, 0.8vw, 13px) !important;
  white-space: normal !important;
  line-height: 1.2 !important;
}

/* For laptop screens (1024 - 1366) where columns are tight */
@media (max-width: 1366px) {
  .dashboard-card .card-body {
      padding: 1rem !important;
  }
  .dashboard-card-amount {
      font-size: 16px !important; /* Hardcap the size to ensure it fits */
  }
  .dashboard-card .dashboard-icon i {
      font-size: 28px !important;
  }
}

/* Tablet */
@media (max-width: 991px) {
  .dashboard-top-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-mid-grid, .dashboard-chart-grid { grid-template-columns: 1fr; }
  
  .dashboard-card-amount {
    font-size: 22px !important;
  }
  .dashboard-card .card-body {
      padding: 1.25rem !important;
  }
}

/* Mobile */
@media (max-width: 575px) {
  .dashboard-top-grid { grid-template-columns: 1fr; }
  
  .dashboard-card {
    min-height: auto !important;
  }
  .dashboard-card .card-body {
    padding: 14px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    text-align: right !important;
    justify-content: flex-start !important;
  }
  .dashboard-card .dashboard-icon i {
    font-size: 26px !important;
  }
  .dashboard-card .text-end {
    margin-left: auto;
  }
  .dashboard-card-title {
    font-size: 11px !important;
    margin: 0 !important;
  }
  .dashboard-card-amount {
    font-size: 18px !important;
    margin: 0 !important;
  }
}

/* Dashboard Due Card Amounts & Chart Headings */
.due-card-amount {
    font-size: clamp(13px, 1vw, 16px) !important;
    white-space: nowrap !important;
}
.due-card-link { font-size: 13px; font-weight: 600; color: #42389d; text-decoration: none; }
.chart-card h4 {
    font-size: 14px !important;
}
.chart-card .small, .chart-card .text-muted {
    font-size: 11px !important;
}

/* Dashboard Card Original Fallback Colors */
.tp-card-primary { background: linear-gradient(135deg, var(--tp-primary, #42389d), var(--tp-primary-hover, #241a7f)) !important; }
.tp-card-info { background: linear-gradient(135deg, var(--tp-info, #49a6f5), #2b88d7) !important; }
.tp-card-success { background: linear-gradient(135deg, var(--tp-success, #31c653), #13a835) !important; }
.tp-card-danger { background: linear-gradient(135deg, var(--tp-danger, #ff4747), #e12929) !important; }

.tp-card-primary *, .tp-card-info *, .tp-card-success *, .tp-card-danger * {
    color: #ffffff !important;
}

/* Global Buttons Design */
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: #212529 !important;
    border-color: #212529 !important;
    color: #ffffff !important;
}
.btn, .btn-sm {
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}
.table-action-btn {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid;
    transition: all 0.2s ease;
}
.table-action-btn.view {
    border-color: var(--tp-info, #49a6f5);
    color: var(--tp-info, #49a6f5);
    background: transparent;
}
.table-action-btn.view:hover {
    background: var(--tp-info, #49a6f5);
    color: #fff !important;
}
.table-action-btn.edit {
    border-color: var(--tp-primary, #42389d);
    color: var(--tp-primary, #42389d);
    background: transparent;
}
.table-action-btn.edit:hover {
    background: var(--tp-primary, #42389d);
    color: #fff !important;
}
.table-action-btn.delete {
    border-color: var(--tp-danger, #ff4747);
    color: var(--tp-danger, #ff4747);
    background: transparent;
}
.table-action-btn.delete:hover {
    background: var(--tp-danger, #ff4747);
    color: #fff !important;
}
.table-action-btn.print {
    border-color: var(--tp-text, #374151);
    color: var(--tp-text, #374151);
    background: transparent;
}
.table-action-btn.print:hover {
    background: var(--tp-text, #374151);
    color: #fff !important;
}

/* Table Header Color Fix & Text Size */
.table thead th,
.data-table thead th,
.report-table thead th,
.table thead.bg-light th {
    background: var(--tp-table-header-bg) !important;
    color: var(--tp-table-header-text) !important;
    border-color: var(--tp-table-header-border) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
}

/* Badges Standardization (Exclude rounded circle) */
.badge:not(.rounded-circle) {
    padding: 0.4em 0.75em !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
}
.badge.rounded-circle {
    padding: 4px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10px !important;
}

/* Payment Methods */
.badge.bg-primary { background-color: var(--tp-primary, #42389d) !important; color: #fff !important; }
.badge.bg-success { background-color: var(--tp-success, #31c653) !important; color: #fff !important; }
.badge.bg-warning { background-color: var(--tp-warning, #ffa31a) !important; color: #fff !important; }
.badge.bg-info { background-color: var(--tp-info, #49a6f5) !important; color: #fff !important; }
.badge.bg-secondary { background-color: var(--tp-secondary, #8a45d8) !important; color: #fff !important; }
.badge.bg-danger { background-color: var(--tp-danger, #ff4747) !important; color: #fff !important; }

/* Status Badges */
.status-badge {
    padding: 0.35em 0.65em;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
.status-badge i { font-size: 8px; margin-right: 6px; }
.status-active { background-color: rgba(49, 198, 83, 0.1); color: var(--tp-success, #31c653); border: 1px solid rgba(49, 198, 83, 0.2); }
.status-inactive, .status-stopped { background-color: rgba(255, 71, 71, 0.1); color: var(--tp-danger, #ff4747); border: 1px solid rgba(255, 71, 71, 0.2); }
.status-sold { background-color: rgba(73, 166, 245, 0.1); color: var(--tp-info, #49a6f5); border: 1px solid rgba(73, 166, 245, 0.2); }
.status-pending { background-color: rgba(255, 163, 26, 0.1); color: var(--tp-warning, #ffa31a); border: 1px solid rgba(255, 163, 26, 0.2); }

/* Dashboard empty states */
.empty-chart-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 250px;
    color: var(--tp-muted);
    background: #f8f9fa;
    border-radius: 12px;
}