@media screen and (max-width: 1278px) {
  /* .sidebar {
    width: 40%;
  } */

  .logo {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sidebar .logo-text {
    display: none;
  }
  .logo-icon {
    width: 40px;
    height: 40px;
  }
  .logo-icon img {
    width: 20px;
  }
  .nav ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .nav li {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  li span {
    display: none; /* hides text */
  }
  .quick-actions h3,
  .sidebar-action-label {
    display: none;
  }
  .sidebar-action-btn {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
  }
  .sidebar-action-icon {
    padding: 13px;
  }
  .quick-actions {
    gap: 30px;
  }
  .container {
    grid-template-columns: auto 1fr 1fr 1fr 1fr 1fr 1fr;

    padding-left: 10px;
    gap: 16px;
    grid-template-areas: none;
  }

  /* Reset all grid positioning for tablet */
  .sidebar,
  .header,
  .current-balance-card,
  .income-card,
  .expenses-card,
  .dashboard-widgets,
  .bills-card,
  .income-vs-expenses-card,
  .account-summary-card,
  .payment-methods-card,
  .budget-overview-card,
  .transactions-card {
    grid-column-start: auto;
    grid-column-end: auto;
    grid-row-start: auto;
    grid-row-end: auto;
    grid-area: auto;
  }

  /* EXACT LAYOUT YOU SPECIFIED: */

  /* 1. Header - first row, full width */
  .header {
    grid-column: 2 / 8; /* Span both columns */
    grid-row: 1;
  }

  /* 2. Second row - three divs in three columns */
  .expenses-card {
    grid-column: 2 / 4;
    grid-row: 2;
  }

  .income-card {
    grid-column: 4 / 6;
    grid-row: 2;
  }

  .current-balance-card {
    grid-column: 6 /8; /* Span both columns for balance */
    grid-row: 2;
  }

  /* 3. Third row - two columns: income-vs-expenses-card and dashboard-widgets */
  .income-vs-expenses-card {
    grid-column: 5 / 8;
    grid-row: 3;
    align-self: stretch;
  }

  .dashboard-widgets {
    grid-column: 2 / 5;
    grid-row: 3;
  }

  /* 4. Fourth row - transactions-card takes full width */
  .transactions-card {
    grid-column: 2 / 8;
    grid-row: 4;
  }

  /* 5. Fifth row - two columns: account-summary-card and bills-card */
  .account-summary-card {
    grid-column: 5 / 8;
    grid-row: 5;
  }

  .bills-card {
    grid-column: 2 / 5;
    grid-row: 5;
  }

  /* 6. Sixth row - two columns: payment-methods-card and budget-overview-card */
  .payment-methods-card {
    grid-column: 5 / 8;
    grid-row: 6;
  }

  .budget-overview-card {
    grid-column: 2 / 5;
    grid-row: 6;
  }

  /* Sidebar - right side, full height */
  .sidebar {
    grid-column: 1 / 2; /* Third column (right side) */
    grid-row: 1 / 7; /* Span all rows from 1 to 7 */
    width: 85%;
  }
  .sidebar-inner {
    padding-inline: 10px;
  }
  .income-vs-expenses-card .current-balance-card-inner {
    padding-block: 65px;
  }
  .account-summary-card .current-balance-card-inner {
    padding-block: 70px;
  }
  .amount {
    font-size: 28px;
  }
}
@media screen and (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
    padding: 0 16px;
    gap: 12px;
    grid-template-areas: none;
  }

  /* Reset all grid positioning for mobile */
  .header,
  .current-balance-card,
  .income-card,
  .expenses-card,
  .dashboard-widgets,
  .bills-card,
  .income-vs-expenses-card,
  .account-summary-card,
  .payment-methods-card,
  .budget-overview-card,
  .transactions-card {
    grid-column: 1;
    grid-column-start: auto;
    grid-column-end: auto;
    grid-row-start: auto;
    grid-row-end: auto;
    grid-area: auto;
  }

  /* Hide sidebar completely */
  .sidebar {
    display: none;
  }

  /* Single column order */
  .header {
    grid-row: 1;
  }
  .current-balance-card {
    grid-row: 2;
  }
  .income-card {
    grid-row: 3;
  }
  .expenses-card {
    grid-row: 4;
  }
  .dashboard-widgets {
    grid-row: 5;
  }
  .transactions-card {
    grid-row: 6;
  }
  .bills-card {
    grid-row: 7;
  }
  .budget-overview-card {
    grid-row: 8;
  }
  .income-vs-expenses-card {
    grid-row: 9;
  }
  .account-summary-card {
    grid-row: 10;
  }
  .payment-methods-card {
    grid-row: 11;
  }

  .current-balance-card-inner {
    padding: 20px;
  }
}
/* Extra small screens - less than 500px */
@media screen and (max-width: 640px) {
  .container {
    padding: 0 12px; /* Reduce padding */
    gap: 15px; /* Reduce gap between cards */
  }

  /* Reduce padding for all card containers */
  .account-summary-card .current-balance-card-inner,
  .current-balance-card-inner,
  .header-bar,
  .sidebar-inner,
  .activity,
  .bill,
  .category,
  .account-box,
  .summary {
    padding: 16px;
  }
  .income-vs-expenses-card .current-balance-card-inner {
    padding-block: 20px;
  }
  /* Reduce font sizes */
  .logo-text h1,
  .header .logo-text h1 {
    font-size: 24px;
  }

  .amount {
    font-size: 28px;
  }

  .current-balance-card-inner h3,
  .header-container h3 {
    font-size: 16px;
  }
  /* header display small screen */
  .header-left,
  .header-right {
    display: none;
  }
  .header-bar {
    display: flex;
    flex-direction: column;
  }
  .header-left-sm,
  .header-middle-sm,
  .header-right-sm {
    display: block;
    margin-bottom: 8px;
  }
  .header-left-sm {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
  }
  .header-middle-sm {
    display: flex;
    justify-content: space-between;
  }
  .header-right-sm .status-badge {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  /* Reduce icon sizes */
  .logo-box {
    width: 50px;
    height: 50px;
  }

  .logo-icon img {
    width: 20px;
  }

  .activity-icon,
  .icon-box,
  .bill .icon,
  .avatar,
  .avatar-icon {
    width: 32px;
    height: 32px;
  }

  /* Reduce spacing */
  .header-bar {
    margin-top: 15px;
    padding: 16px;
  }

  .sidebar-inner {
    gap: 10px;
  }

  .nav li,
  .sidebar-action-btn {
    padding: 8px 12px;
    font-size: 13px;
  }

  .quick-actions {
    gap: 10px;
  }
  /* Table adjustments */
  /* Make transactions card properly contain the table */
  .transactions-card {
    overflow: hidden; /* Prevent content from flowing out */
  }
  .table-section {
    overflow-x: auto;
  }
  table {
    min-width: 600px;
  }
  th,
  td {
    padding: 14px 10px;
    font-size: 12px;
  }

  .user-cell .user-row {
    gap: 8px;
  }

  .user-name {
    font-size: 13px;
  }

  .user-sub {
    font-size: 11px;
  }

  /* Budget progress bars */
  .progress-bar,
  .progress-small {
    height: 6px;
  }

  .progress-fill,
  .fill-orange,
  .fill-red,
  .fill-pink,
  .fill-green {
    height: 6px;
  }

  /* Reduce badge sizes */
  .badge,
  .state-badge {
    padding: 3px 8px;
    font-size: 10px;
  }

  /* Profile section */
  .profile {
    padding: 4px 8px;
  }

  .profile img {
    width: 32px;
    height: 32px;
  }

  .profile-info .name {
    font-size: 11px;
  }

  .profile-info .type {
    font-size: 10px;
  }

  /* Icon buttons */
  .icon-btn {
    width: 32px;
    height: 32px;
  }

  .icon-btn i {
    font-size: 14px;
  }

  /* Bills grid */
  .bills-grid {
    gap: 8px;
  }

  .bill {
    padding: 8px;
  }

  .bill .amount {
    font-size: 12px;
  }
  .view-all-bills {
    margin-bottom: 10px;
  }
  /* Account summary */
  .account-parent {
    gap: 12px;
    margin-top: 12px;
  }

  .account-name,
  .account-amount {
    font-size: 13px;
  }

  .account-desc {
    font-size: 11px;
  }

  /* Payment methods */
  .payment-parent {
    gap: 8px;
    margin-top: 12px;
  }
}