*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}
body {
  margin: 0;
}
header{
  padding: 50px;
  display: flex;
  justify-content: space-between;
}
.theme-toggle img {
  display: block;
}

nav {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 16px 0;
}

.buttons {
  display: flex;
  background: #f2f2f2;
  padding: 6px;
  border-radius: 30px;
  width: 95%;
  max-width: 420px;
}

.buttons button {
  flex: 1;
  border: none;
  background: transparent;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 500;
  color: #444;
  border-radius: 24px;
  cursor: pointer;
  transition: all 0.2s ease;
  
}
/* Desktop spacing */
.buttons {
  max-width: 600px;          /* wider pill */
}

.buttons button {
  padding: 12px 28px;        /* more space left & right */
  font-size: 15px;
}


/* Active tab */
.buttons button.active {
  background: white;
  color: #000;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .buttons {
    padding: 4px;
  }

  .buttons button {
    font-size: 12px;
    padding: 8px 0;
  }
}

main {
  max-width: 1100px;
  width: 70%;
  margin: 0 auto;
}

/* Main balance card */
.balance-card {
  background-color: #1f6bff;
  color: white;
  padding: 20px;
  border-radius: 14px;
  width: 100%;
  margin-top: 24px;
}

/* Header */
.balance-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  margin-bottom: 20px;
}

/* Big balance amount */
.balance-amount {
  margin: 16px 0;
  font-size: 28px;
  font-weight: bold;
  margin-top: 50px;
}

/* Income & expense row */
.balance-records {
  display: flex;
  justify-content: flex-start;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  padding-top: 12px;
}

/* Each record */
.record {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 20px;
}

/* Icon + label */
.record-label {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Amount */
.record-amount {
  font-size: 20px;
  font-weight: 600;
}

.record.expense, .record.friend-owe {
  margin: 0 auto;
}

.transaction-card {
  width: 50%;
  background-color: #ffffff;
  padding: 24px;
  border-radius: 16px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Title */
.transaction-card h3, .friends-transactions h3{
  margin-bottom: 8px;
  font-size: 20px;
}

/* Labels */
.transaction-card label {
  font-size: 17px;
  font-weight: 500;
}

/* Inputs & selects */
.transaction-card input,
.transaction-card select {
  width: 100%;
  padding: 14px;
  border-radius: 10px;
  border: none;
  background-color: #f4f4f4;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
}
.transaction-card select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-image: url("data:image/svg+xml;utf8,<svg fill='%23333' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center; /* padding from right */
  background-size: 18px;
}

/* Placeholder text */
.transaction-card input::placeholder {
  color: #999;
}

/* Button */
.transaction-card button {
  margin-top: 16px;
  padding: 14px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(to right, #0f0f1f, #000);
  color: white;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

/* Button hover (optional) */
.transaction-card button:hover {
  opacity: 0.9;
}

.expenses-transactions-list, .transactions-list{
  max-height: 400px;        /* area allocated for scrolling */
  overflow-y: auto;         /* enable vertical scroll */
  padding-right: 6px; 
}

.category-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0;   /* no extra spacing inside */
}

.recent-transaction-card {
  width: 50%;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 16px;
  margin-top: 20px;
  border: 1px solid #e4e4e7;
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 11px;
}

#note{
  width: 100%;
  height: 100px;
}

.friends-transactions .transaction-card {
  width: 100%;
}

/* Card title */
.recent-transaction-card h3 {
  font-size: 20px;
  margin-bottom: 20px;
  margin-top: -5.5px;
}

/* Transaction row */
.transaction-info {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 12px;
  border-radius: 12px;
  background-color: #f4f4f4;
}

.transaction-area{
  display: flex;
  gap: 15px;
}

@media (max-width: 768px){
  .transaction-area{
    display: flex;
    flex-direction: column;
    gap: 0px;
  }
  .transaction-card{
    width: 100%;
  }
  .recent-transaction-card{
    width: 100%;
    margin-top:5px;
    margin-bottom: 25px;
  }
}

/* Left side text */
.info {
  font-size: 14px;
  color: #333;
}

/* Amount */
.balance-status {
  font-size: 14px;
  font-weight: 600;
}

/* Textarea */
textarea {
  width: 95%;
  min-height: 50px;
  padding: 14px 16px;

  font-size: 14px;
  font-family: inherit;
  color: #333;

  background-color: #f5f5f5;
  border: none;
  border-radius: 10px;

  resize: none;
  outline: none;
}

/* Placeholder */
textarea::placeholder {
  color: #8b8b8b;
  font-size: 16px;
}

.friends-transactions {
  max-width: 600px;
  padding: 16px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e6e6e6;
  width: 50%;
  margin-top: 20px;
  margin-bottom: 11px;
}
@media (max-width: 768px){
  .friends-transactions{
    width: 100%;
    margin-top: 5px;
  }
}

/* Tabs */
.tabs {
  display: flex;
  background: #efeff2;
  padding: 6px;
  border-radius: 20px;
  margin-bottom: 12px;
  margin-top: 20px;
}

.tab {
  flex: 1;
  border: none;
  background: transparent;
  padding: 8px 0;
  border-radius: 16px;
  font-weight: 600;
  cursor: pointer;
}

.tab.active {
  background: #fff;
}

/* Transaction Card */
.transaction-card {
  display: flex;
  justify-content: space-between;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid #e4e4e7;
  margin-bottom: 16px;
}

.card-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.name {
  font-weight: 600;
  font-size: 16px;
}

/* Badges */
.badge {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
}

.badge.owe {
  background: #ffe8d9;
  color: #ff6b00;
}

.badge.owed {
  background: #e8f0ff;
  color: #2563eb;
}

/* -------- STATUS BADGE -------- */
.badge.status {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  margin-left: 6px;
  background-color: #ffe5e5;
  color: #d32f2f;
}

/* Paid badge */
.badge.status.paid {
  background-color: #e6f7ee;
  color: #1b8f5a;
}

/* -------- TRANSACTION CARD WHEN PAID -------- */
.transaction-card.paid-card {
  background: #f6fff9;
  border: 1px solid #c7ecd9;
  opacity: 0.9;
}

/* -------- CHECKBOX -------- */
.check-box {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #555;
  background-color: transparent; 
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
}

/* Checked = Paid */
.check-box:checked {
  background-color: #1b8f5a;
  border-color: #1b8f5a;
}

/* Tick mark */
.check-box:checked::after {
  content: "✔";
  position: absolute;
  color: white;
  font-size: 25px;
  left: 4px;
  bottom: -1px;
}

/* Hover feel */
.check-box:hover {
  transform: scale(1.05);
}

/* Align right side nicely */
.card-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Amounts */
.amount {
  font-size: 20px;
  font-weight: 700;
}

.owe-amount {
  color: #ff6b00;
}

.owed-amount {
  color: #2563eb;
}

.desc {
  color: #444;
  font-size: 14px;
}

.date {
  color: #888;
  font-size: 13px;
}

/* Icons */
.card-right {
  display: flex;
  align-items: flex-start;   /* stick to top */
  gap: 14px;
}

.icon {
  font-size: 18px;
  cursor: pointer;
  color: #6b7280;
}

.dashboard {
  padding: 24px;
  font-family: system-ui, sans-serif;
  background: #f7f8fa;
}

/* Top Stats */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: #fff;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
}

.stat-title {
  font-size: 14px;
  color: #555;
}

.stat-card h3 {
  margin: 6px 0;
  font-size: 22px;
}

.stat-card span {
  font-size: 13px;
  color: #888;
}

/* Colors */
.green { color: #16a34a; }
.red { color: #dc2626; }
.orange { color: #ea580c; }

/* Grid Sections */
.grid-2 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

/* Cards */
.card {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  border: 1px solid #e5e7eb;
}

.card h4 {
  margin-bottom: 12px;
}

/* Chart placeholder */
.chart-placeholder {
  height: 220px;
  background: #f3f4f6;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-weight: 600;
}

/* Friend summary */
.summary-item {
  padding: 12px;
  border-radius: 10px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  font-weight: 600;
}

.summary-item.blue {
  background: #eff6ff;
  color: #2563eb;
}

.summary-item.orange {
  background: #fff7ed;
  color: #ea580c;
}

.summary-item.neutral {
  background: #f4f4f5;
  color: #333;
}

.summary-footer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}
/* =======================
   RESPONSIVE DESIGN
   ======================= */

/* Tablets (≤ 1024px) */
@media (max-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-2 {
    grid-template-columns: 1fr;
  }
}

/* Mobile (≤ 768px) */
@media (max-width: 768px) {
  .dashboard {
    padding: 16px;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .stat-card h3 {
    font-size: 20px;
  }

  .chart-placeholder {
    height: 180px;
  }

  .summary-item {
    font-size: 14px;
  }

  .summary-footer {
    flex-direction: column;
    gap: 6px;
  }
}

/* Small mobile (≤ 480px) */
@media (max-width: 480px) {
  .stat-card {
    padding: 14px;
  }

  .card {
    padding: 14px;
  }

  .chart-placeholder {
    height: 150px;
  }

  .summary-item {
    padding: 10px;
  }
}

.transaction-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  font-family: system-ui, sans-serif;
  margin-bottom: 12px;
}

/* LEFT SIDE */
.left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #dcfce7;
  color: #16a34a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.details {
  display: flex;
  flex-direction: column;
}

.title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.title {
  font-weight: 600;
  font-size: 15px;
}

.category {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #374151;
}

.date {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}

/* RIGHT SIDE */
.right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.amount {
  font-weight: 600;
  color: #16a34a;
}

.delete {
  cursor: pointer;
  font-size: 16px;
  color: #9ca3af;
}

.delete:hover {
  color: #ef4444;
}

/* INCOME / EXPENSE VARIANTS */
.transaction-item.income .icon {
  background: #dcfce7;
  color: #16a34a;
}

.transaction-item.expense .icon {
  background: #fee2e2;
  color: #dc2626;
}

.transaction-item.expense .amount {
  color: #dc2626;
}

.delete, .edit {
  cursor: pointer;
}

.delete-icon, .edit-icon, .check-box {
  width: 25px;
  height: 25px;
}

.check-box {
  width: 25px;
  height: 25px;
}

.delete:hover, .edit:hover {
  transform: scale(1.1);
}

/* overlay */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* hide modal */
.modal.hidden {
  display: none;
}

/* popup card */
.modal-card {
  background: #fff;
  width: 320px;
  max-width: 90%;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  position: relative;
  animation: pop 0.25s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* close button */
.modal .close {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 22px;
  cursor: pointer;
}

/* animation */
@keyframes pop {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

footer {
  width: 100%;
  padding: 16px 0;
  margin-top: 30px;
  background:  #2563eb;
  color: #ffffff;
  text-align: center;
  font-size: 15px;
  letter-spacing: 0.3px;
}

footer span {
  color: #ffffff;
  font-weight: 500;
}

.transactions-list .transaction-card{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 0;
}

.form-card{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.transaction-item .right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.transaction-item .actions {
  display: flex;
  gap: 8px;
}

/* Mobile */
@media (max-width: 768px) {
  .transaction-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .transaction-item .right {
    width: 100%;
    justify-content: space-between;
  }

  .transaction-item .actions {
    justify-content: flex-end;
  }
}

/* Left side */
.transactions-list .card-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Name row (name + badges + paid) */
.transactions-list .name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Right side (checkbox + actions) */
.transactions-list .card-right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;   /* pushes icons to the right */
}

/* Group edit + delete */
.transactions-list .actions {
  display: flex;
  gap: 8px;
}
.transactions-list .check-box {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  flex-shrink: 0;       /* prevents stretching */
  align-self: center;  /* keeps it centered vertically */
}

/* Mobile behavior */
@media (max-width: 768px) {
  
  .transactions-list .transaction-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .transactions-list .card-right {
    width: 100%;
    justify-content: space-between;
  }

  .transactions-list .actions {
    justify-content: flex-end;
  }

  #expenses-section, #ledger-section, #stats-section{
    margin: -33px;
    margin-top: 5px;
  }
}

.empty-state {
  text-align: center;
  color: #292626;
  font-size: 20px;
  padding: 30px 10px;
  opacity: 0.8;
}

.card canvas {
  width: 100%;
  height: 250px;
  margin: auto;
}


/* Mobile layout */
@media (max-width: 768px) {

  /* Stats cards become single column */
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Chart sections stack vertically */
  .grid-2 {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* Reduce card padding for mobile */
  .card {
    padding: 12px;
  }

  /* Charts slightly smaller in height */
  .card canvas {
    height: 200px !important;
  }

  /* Summary footer spacing */
  .summary-footer {
    flex-direction: column;
    gap: 6px;
    text-align: left;
  }

  /* Improve stat card text sizing */
  .stat-card h3 {
    font-size: 18px;
  }

  .stat-title {
    font-size: 12px;
  }
  #stats-section .dashboard {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}
}
/* Wrapper behavior for pie charts */
#expenseCategoryChart {
  max-width: 100%;
  max-height: 100%;
}

/* Center pie chart inside its card */
.card {
  display: flex;
  flex-direction: column;
}

/* Dark mode UI */
body.dark {
  background-color: #121212;
  color: white;
}
body.dark .buttons{
  background: #2b2b2b;
}
/* All nav buttons in dark mode */
body.dark .buttons button{
  background: #2b2b2b;   /* dark grey */
  color: #bdbdbd;        /* light grey text */
}

/* Active nav button in dark mode */
body.dark .buttons button.active{
  background: #3a3a3a;   /* slightly lighter grey */
  color: #ffffff;        /* white text */
}
body.dark .card,
body.dark .transaction-card,
body.dark .modal-card {
  background: #1e1e1e;
  color: #f5f5f5;
  border: 1px solid #444;
}
body.dark input,
body.dark select {
  background: #2a2a2a;
  color: #fff;
  border: 1px solid #444;
}

body.dark .transaction-card select {
  background: #2a2a2a 
    url("data:image/svg+xml;utf8,<svg fill='%23e5e5e5' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>")
    no-repeat right 14px center;
  background-size: 18px;
  color: #fff;
  border: 1px solid #444;
}
/* Dark mode number input */
body.dark input[type="number"] {
  background: #2a2a2a;
  color: #ffffff;
  border: 1px solid #444;
}

/* Spinner buttons */
body.dark input[type="number"]::-webkit-inner-spin-button,
body.dark input[type="number"]::-webkit-outer-spin-button {
  filter: invert(1) brightness(0.8); 
}
body.dark .transaction-card textarea,
body.dark .transaction-card input {
  background: #2a2a2a;
  color: #ffffff;
  border: 1px solid #444;
}
/* Dark mode for cards inside expenses-transactions-list */
body.dark .expenses-transactions-list .transaction-item {
  background: #1e1e1e;
  color: #e5e5e5;
  border: 1px solid #333;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
body.dark .recent-transaction-card{
  background: #1e1e1e;
  color: #e5e5e5;
  border: 1px solid #444;;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
body.dark .expenses-transactions-list {
  scrollbar-color: #2b2b2b #151515; /* Firefox */
}

/* ================= FRIENDS TRANSACTIONS – DARK MODE ================= */

body.dark .friends-transactions{
  background: #1e1e1e;
  color: #e5e5e5;
  border: 1px solid #444;;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

/* Heading */
body.dark .friends-transactions h3{
  color: #ffffff;
}

/* ---------------- TABS ---------------- */
body.dark .friends-transactions .tab{
  background: #2b2b2b;
  color: #bdbdbd;
  border: none;
}

body.dark .friends-transactions .tabs{
  background: #2b2b2b;
  color: #bdbdbd;
  border: none;
}

body.dark .friends-transactions .tab.active{
  background: #3a3a3a;
  color: #ffffff;
}

/* ---------------- TRANSACTION CARD ---------------- */
body.dark .friends-transactions .transaction-card{
  background: #1e1e1e;
  color: #e5e5e5;
  border: 1px solid #333;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

/* Paid card */
body.dark .friends-transactions .transaction-card.paid-card{
  background: #182018;
  border-color: #2f5f2f;
}

/* ---------------- LEFT SIDE ---------------- */
body.dark .friends-transactions .transaction-card .name{
  color: #ffffff;
}

body.dark .friends-transactions .transaction-card .desc,
body.dark .friends-transactions .transaction-card .date{
  color: #bdbdbd;
}

/* Amount */
body.dark .friends-transactions .transaction-card .amount{
  color: #facc15;
}

/* ---------------- BADGES ---------------- */
body.dark .friends-transactions .badge{
  background: #2b2b2b;
  color: #e5e5e5;
  border: 1px solid #444;
}

body.dark .friends-transactions .badge.paid{
  background: #14532d;
  color: #4ade80;
}

body.dark .friends-transactions .badge.status:not(.paid){
  background: rgb(204, 17, 33)
}

body.dark .friends-transactions {
  scrollbar-color: #2b2b2b #151515; /* Firefox */
}

body.dark .empty-state{
  color: #e5e5e5;
}
/* ================= STATS SECTION – DARK MODE ================= */

body.dark #stats-section{
  background: #121212;
  color: #e5e5e5;
}

/* Dashboard wrapper */
body.dark #stats-section .dashboard{
  background: #121212;
}

/* ---------------- TOP STATS ---------------- */
body.dark #stats-section .stat-card{
  background: #1e1e1e;
  color: #e5e5e5;
  border: 1px solid #333;
}

body.dark #stats-section .stat-title{
  color: #bdbdbd;
}

body.dark #stats-section .stat-card span{
  color: #9ca3af;
}

/* Keep your amount colors */
body.dark #stats-section .green{
  color: #4ade80;
}

body.dark #stats-section .red{
  color: #f87171;
}

/* ---------------- ALL CHART CARDS ---------------- */
body.dark #stats-section .card{
  background: #1e1e1e;
  color: #ffffff;
  border: 1px solid #333;
}

body.dark #stats-section .card h4{
  color: #ffffff;
}

/* ---------------- CANVAS AREA ---------------- */
body.dark #stats-section canvas{
  background: #181818;
  border-radius: 6px;
}

/* ---------------- SUMMARY ITEMS ---------------- */
body.dark #stats-section .summary-item{
  background: #2a2a2a;
  color: #ffffff;
  border: 1px solid #444;
}

/* Individual summary color accents */
body.dark #stats-section .summary-item.blue{
  background: #1e3a8a;
  color: #bfdbfe;
}

body.dark #stats-section .summary-item.orange{
  background: #7c2d12;
  color: #fed7aa;
}

/* ---------------- SUMMARY FOOTER ---------------- */
body.dark #stats-section .summary-footer{
  color: #e5e5e5;
}

body.dark #stats-section .summary-footer span{
  color: #e5e5e5;
}

body.dark #stats-section .summary-footer b{
  color: #ffffff;
}

/* ---------------- GRID CONTAINERS (OPTIONAL SOFT BG) ---------------- */
body.dark #stats-section .stats-grid,
body.dark #stats-section .grid-2{
  background: transparent;
}
body.dark footer{
  background-color: #444;
}

/* Toggle button */
.theme-toggle{
  display: flex;
  gap: 10px;
}

.theme-toggle button{
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  opacity: 0.6;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.theme-toggle button:hover{
  opacity: 1;
  transform: scale(1.1);
}

.theme-toggle img{
  width: 22px;
  height: 22px;
}
body.dark{
  background-color: #121212;
  color: #eaeaea;
}
/* Same color for both sun & moon in dark mode */
body.dark .theme-toggle img {
  filter: brightness(0) saturate(100%) invert(1);
}
/* Dark icon in light mode */
body:not(.dark) .theme-toggle img {
  filter: brightness(0) saturate(100%);
}
/* Mobile */
@media (max-width: 600px){
  header{
    flex-direction: column;
    gap: 12px;
    text-align: center;
    padding-bottom: 5px;
    padding-top: 40px;
  }

  /* Keep icons side by side but center them */
  .theme-toggle{
    justify-content: center;
    align-items: center;
    gap: 12px;
  }

  .theme-toggle img{
    width: 22px;
    height: 22px;
  }
  
}