/* ===== Modern Redesign Base ===== */
* { box-sizing: border-box; }
:root{
  /* Enhanced Color Palette */
  --bg:#080c11;
  --bg-secondary:#0d1218;
  --card:#141c26;
  --card-elevated:#1a2430;
  --line:#1e2b38;
  --line-2:#293744;
  --text:#e8f0f8;
  --text-secondary:#b8c5d3;
  --muted:#7a8fa3;
  --accent:#3dd68c;
  --accent-hover:#35c67d;
  --accent-light:rgba(61,214,140,.12);
  --accent-glow:rgba(61,214,140,.25);
  --warn:#ffb84d;
  --danger:#ff5757;
  --danger-light:rgba(255,87,87,.12);
  --info:#4d9fff;
  --success:#3dd68c;
  --group-gap: 1.2rem;
  
  /* Enhanced Shadows */
  --shadow-sm:0 2px 8px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.1);
  --shadow-md:0 4px 16px rgba(0,0,0,.2), 0 2px 6px rgba(0,0,0,.15);
  --shadow-lg:0 8px 24px rgba(0,0,0,.25), 0 4px 12px rgba(0,0,0,.2);
  --shadow-xl:0 16px 40px rgba(0,0,0,.3), 0 8px 16px rgba(0,0,0,.25);
  
  /* Border Radius System */
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:18px;
  --radius-xl:24px;
  
  /* Spacing System */
  --space-xs:0.5rem;
  --space-sm:0.75rem;
  --space-md:1rem;
  --space-lg:1.5rem;
  --space-xl:2rem;

  /* Mobile viewport fix: set by JS to window.innerHeight * 1% */
  --vh: 1vh;
}

/* Light Theme */
body.light-theme {
  --bg:#f5f7fa;
  --bg-secondary:#edf1f5;
  --card:#ffffff;
  --card-elevated:#ffffff;
  --line:#e0e5eb;
  --line-2:#d1d8e0;
  --text:#1a2332;
  --text-secondary:#3d4f66;
  --muted:#6b7c93;
  --accent:#28a745;
  --accent-hover:#218838;
  --accent-light:rgba(40,167,69,.1);
  --accent-glow:rgba(40,167,69,.2);
  --warn:#f59e0b;
  --danger:#dc3545;
  --danger-light:rgba(220,53,69,.1);
  --info:#0066cc;
  --success:#28a745;
  
  /* Adjusted shadows for light theme */
  --shadow-sm:0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 4px 6px rgba(0,0,0,.1), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg:0 10px 15px rgba(0,0,0,.12), 0 4px 6px rgba(0,0,0,.08);
  --shadow-xl:0 20px 25px rgba(0,0,0,.15), 0 8px 10px rgba(0,0,0,.1);
}

html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Inter','Roboto','Helvetica Neue',Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  min-height:calc(var(--vh) * 100); /* iOS 100vh fix */
  font-size:15px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3{
  margin:0 0 .8rem;
  font-weight:700;
  letter-spacing:-0.02em;
  color:var(--text);
}
h1{font-size:clamp(1.4rem, 1.2rem + 0.6vw, 1.75rem)}
h2{font-size:clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem)}
h3{font-size:1.05rem}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.link{color:var(--accent)}
.brand{color:var(--accent)}
.tiny{
  font-size:.85rem;
  font-weight:500;
  letter-spacing:0.01em;
}
.muted{color:var(--muted)}
label.tiny{
  display:block;
  margin-bottom:.4rem;
  color:#9fb0bd;
}
.right{text-align:right}
.hidden{display:none}
.spacer{height:.4rem}
.flex{display:flex;align-items:center;gap:.6rem}
.grow{flex:1 1 auto}

/* ===== Modern Layout ===== */
header{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:var(--space-lg);
  padding:calc(1.2rem + env(safe-area-inset-top)) calc(1.5rem + env(safe-area-inset-right)) 1.2rem calc(1.5rem + env(safe-area-inset-left));
  background:linear-gradient(135deg, var(--card-elevated) 0%, var(--card) 100%);
  border-bottom:2px solid var(--line);
  backdrop-filter:blur(16px);
  box-shadow:var(--shadow-sm);
  position:sticky;
  top:0;
  z-index:100;
}
header h1{
  margin:0;
  background:linear-gradient(135deg, var(--accent) 0%, #2ab876 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  font-weight:800;
  letter-spacing:-0.03em;
}
header .controls{
  display:flex;
  align-items:center;
  gap:.8rem;
  flex-wrap:wrap;
}

.wrap{padding:var(--space-md)}

/* App layout - Enhanced Grid */
.layout{
  display:grid;
  grid-template-columns:360px 1fr;
  gap:var(--space-lg);
  padding:var(--space-lg);
  max-width:1920px;
  margin:0 auto;
}
.sidebar{
  display:flex;
  flex-direction:column;
  gap:var(--space-lg);
  position:relative;
}

/* Hide mobile sidebar elements on desktop */
.sidebar-brand,
.mobile-side-menu {
  display: none;
}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  display:flex;
  flex-direction:column;
  min-height:0;
  box-shadow:var(--shadow-md);
  transition: all .3s cubic-bezier(.4,0,.2,1);
  position:relative;
  overflow:hidden;
}
.card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg, var(--accent) 0%, #2ab876 50%, var(--accent) 100%);
  opacity:0;
  transition:opacity .3s ease;
}
.card:hover{
  box-shadow:var(--shadow-lg);
  transform:translateY(-2px);
  border-color:var(--line-2);
}
.card:hover::before{
  opacity:1;
}
main.card{
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
.section{
  padding:var(--space-lg) var(--space-xl);
  border-bottom:1px solid var(--line);
}
.section:last-child{border-bottom:none}
.section h2{
  margin:0 0 var(--space-md);
  font-size:1.2rem;
  font-weight:700;
  color:var(--text);
  letter-spacing:-0.02em;
}
.section-subtitle{
  font-size:0.95rem;
  font-weight:600;
  color:var(--text-secondary);
  margin:0 0 var(--space-sm);
  padding-bottom:var(--space-sm);
  border-bottom:2px solid var(--line);
  letter-spacing:0.01em;
}
.footer{text-align:center}

/* ===== Controls & Inputs ===== */
.controls{
  display:flex;
  flex-direction:column;
  gap:.8rem;
}
.row{
  display:flex;
  gap:.8rem;
  align-items:center;
}
.controls .row > *{min-width:0}
.controls .row input,
.controls .row select,
.controls .row textarea{flex:1 1 0}

input,select,textarea,button{
  font:16px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI','Inter','Roboto',Arial,sans-serif; /* >=16px to avoid iOS zoom */
  padding:.8rem 1rem;
  border-radius:var(--radius-md);
  border:1.5px solid var(--line-2);
  background:var(--bg-secondary);
  color:var(--text);
  transition: all .25s cubic-bezier(.4,0,.2,1);
}
textarea{
  resize:vertical;
  width:100%;
  min-height:80px;
}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-light), 0 4px 12px rgba(0,0,0,.15);
  background:var(--card);
  transform:translateY(-1px);
}
input:hover:not(:focus),select:hover:not(:focus),textarea:hover:not(:focus){
  border-color:var(--line-2);
  background:var(--card);
}
input::placeholder,textarea::placeholder{
  color:var(--muted);
  opacity:0.7;
}
select{
  cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%237a8fa3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  padding-right:2.8rem;
}

/* Ensure dropdown options are readable in dark theme */
select option{
  background: var(--bg-secondary);
  color: var(--text);
}

.sidebar select option{
  background: var(--bg);
  color: var(--text);
}
button{
  cursor:pointer;
  border:none;
  font-weight:600;
  letter-spacing:0.01em;
  transition: all .2s cubic-bezier(.4,0,.2,1);
  position:relative;
  overflow:hidden;
}
button:active{
  transform: scale(.97);
}
button::before{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:0;
  height:0;
  border-radius:50%;
  background:rgba(255,255,255,.2);
  transform:translate(-50%,-50%);
  transition:width .3s ease, height .3s ease;
}
button:active::before{
  width:300px;
  height:300px;
}
.btn-primary{
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  color:#052010;
  font-weight:700;
  box-shadow:0 4px 12px rgba(61,214,140,.3), 0 2px 6px rgba(61,214,140,.2);
  border:1px solid rgba(61,214,140,.4);
}
.btn-primary:hover{
  box-shadow:0 6px 16px rgba(61,214,140,.35), 0 3px 8px rgba(61,214,140,.25);
  transform:translateY(-1px);
}
.btn-primary:active{
  box-shadow:0 2px 8px rgba(61,214,140,.3);
  transform:translateY(0);
}
.btn-ghost{
  background:transparent;
  border:1.5px solid var(--line-2);
  color:var(--text);
  backdrop-filter:blur(8px);
}
.btn-ghost:hover{
  background:var(--card-elevated);
  border-color:var(--accent);
  color:var(--accent);
}
.btn-ghost:active{
  background:var(--card);
}
.btn-danger{
  background:linear-gradient(135deg, var(--danger) 0%, #ff3d3d 100%);
  color:#fff;
  font-weight:700;
  box-shadow:0 4px 12px rgba(255,87,87,.3), 0 2px 6px rgba(255,87,87,.2);
  border:1px solid rgba(255,87,87,.4);
}
.btn-danger:hover{
  box-shadow:0 6px 16px rgba(255,87,87,.35), 0 3px 8px rgba(255,87,87,.25);
  transform:translateY(-1px);
}
.btn-danger:active{
  box-shadow:0 2px 8px rgba(255,87,87,.3);
  transform:translateY(0);
}
button,.btn-primary,.btn-ghost,.btn-danger{
  min-height:46px;
  padding:.8rem 1.2rem;
  border-radius:var(--radius-md);
}

label.pill{display:inline-flex;align-items:center;gap:.5rem;padding:.25rem .5rem;border:1px solid #26323e;border-radius:999px}
label.pill span{color:var(--muted);font-size:.85rem}
label.pill input{border:none;background:transparent;padding:.25rem .4rem;width:7ch}
label.pill input[type="month"]{width:10ch}

/* Button group */
.btn-group{display:inline-flex;border:1px solid #26323e;border-radius:10px;overflow:hidden}
.btn-group .btn-ghost{border:none;border-right:1px solid #26323e}
.btn-group .btn-ghost:last-child{border-right:none}

/* Filter Toggle Button */
.filter-toggle {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  width:100%;
  background:var(--card-elevated);
  border:1.5px solid var(--line-2);
  color:var(--text-secondary);
  font-size:0.9rem;
  font-weight:600;
  padding:0.75rem 1rem;
  border-radius:var(--radius-md);
  cursor:pointer;
  transition:all 0.2s ease;
  margin-bottom:1rem;
}
.filter-toggle:hover {
  background:var(--card);
  border-color:var(--accent);
  color:var(--accent);
  transform:translateY(-1px);
  box-shadow:var(--shadow-sm);
}
.filter-toggle:active {
  transform:translateY(0);
}
.toggle-icon {
  display:inline-block;
  transition:transform 0.3s ease;
  font-size:1.1rem;
}
.filter-content {
  animation:slideDown 0.3s ease-out;
}
@keyframes slideDown {
  from {
    opacity:0;
    transform:translateY(-10px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}

/* ===== Modern Tabs ===== */
.tabbar{
  display:flex;
  gap:var(--space-xs);
  padding:var(--space-sm) var(--space-lg);
  border-bottom:2px solid var(--line);
  background:linear-gradient(135deg, var(--card-elevated) 0%, var(--card) 100%);
  position:sticky;
  top:0;
  z-index:50;
  box-shadow:var(--shadow-sm);
  backdrop-filter:blur(16px);
}
.tab{
  padding:.8rem 1.3rem;
  border-radius:var(--radius-md) var(--radius-md) 0 0;
  background:transparent;
  color:var(--text-secondary);
  border:none;
  font-weight:600;
  font-size:0.95rem;
  letter-spacing:0.01em;
  transition: all .3s cubic-bezier(.4,0,.2,1);
  cursor:pointer;
  position:relative;
  overflow:hidden;
}
.tab::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg, var(--accent) 0%, var(--accent-hover) 100%);
  transform:scaleX(0);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.tab:hover{
  background:var(--card-elevated);
  color:var(--text);
  transform:translateY(-2px);
}
.tab:hover::before{
  transform:scaleX(0.5);
}
.tab.active{
  background:linear-gradient(135deg, var(--card) 0%, var(--bg-secondary) 100%);
  color:var(--accent);
  font-weight:700;
  box-shadow:inset 0 -2px 0 0 var(--accent), var(--shadow-sm);
}
.tab.active::before{
  transform:scaleX(1);
}
.tab.active::after {
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg, var(--accent) 0%, var(--accent-hover) 100%);
  box-shadow:0 0 12px var(--accent-glow);
}

/* ===== Modern Tables ===== */
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
thead{
  background:linear-gradient(135deg, var(--card-elevated) 0%, var(--card) 100%);
  position:sticky;
  top:0;
  z-index:4;
  box-shadow:0 2px 8px rgba(0,0,0,.1);
}
th,td{
  padding:.9rem 1rem;
  border-bottom:1px solid var(--line);
  vertical-align:middle;
}
th{
  text-align:left;
  font-weight:700;
  font-size:0.9rem;
  color:var(--text-secondary);
  letter-spacing:0.05em;
  text-transform:uppercase;
}
tbody tr{
  transition:all .2s ease;
}
tbody tr:hover{
  background:var(--card-elevated);
  transform:scale(1.01);
}
tbody tr:hover td{
  border-color:var(--line-2);
}
/* ===== By category: filter toolbar ===== */
.bycat-filter-bar{
  position: sticky;
  top: 0;
  z-index: 4;
  background: #131a23;
  border: 1px solid #25313b;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
}

/* By Category Filter Bar - Matches Transaction Filters */
.bycat-filter-bar .filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0;
}

.bycat-filter-bar .filter-header h3 {
  margin: 0;
  color: #e1e7ef;
  font-size: 1rem;
  font-weight: 600;
}

.bycat-filter-bar .filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.2rem;
  padding: 0.5rem 0;
}

@media (min-width: 1024px) {
  .bycat-filter-bar .filter-grid {
    grid-template-columns: 2fr 1fr;
  }
  
  .bycat-filter-bar .date-range-group {
    grid-column: span 1;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .bycat-filter-bar .filter-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile-optimized By category filters */
@media (max-width: 767px){
  .bycat-filter-bar .filter-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .bycat-filter-bar .date-range-group {
    grid-column: span 1;
  }
  
  .bycat-filter-bar .filter-header {
    flex-direction: column;
    align-items: stretch;
  }
  
  .bycat-filter-bar .filter-toggle {
    width: 100%;
  }
  
  .bycat-filter-bar .date-inputs {
    flex-direction: row;
    gap: 0.5rem;
  }
  
  .bycat-filter-bar .date-separator {
    font-size: 0.9rem;
  }
  
  .bycat-filter-bar .bank-selects {
    gap: 0.6rem;
  }
}
@media (max-width:680px){
  th,td{padding:.5rem .55rem}
  table{font-size:.95rem}
}

/* ===== Summary tiles ===== */
.summary{display:flex;gap:1rem;flex-wrap:wrap}
.tile{flex:1 1 220px;background:#17212b;border:1px solid var(--line);border-radius:12px;padding:1rem}
.tile h3{font-size:.92rem;margin:0 0 .35rem;color:#b8c2cc}
.tile p{font-size:1.2rem;font-weight:700;margin:0}

/* ===== Mobile Summary Cards ===== */
.mobile-summary-cards {
  display: none;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem;
  padding: 0 0 1rem 0;
  margin: 0;
}

.mobile-summary-card {
  background: linear-gradient(135deg, var(--card-elevated) 0%, var(--card) 100%);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
  min-height: 90px;
}

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

.mobile-summary-card .card-icon {
  font-size: 1.8rem;
  line-height: 1;
  opacity: 0.9;
}

.mobile-summary-card .card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mobile-summary-card .card-content h4 {
  margin: 0 0 0.2rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

.mobile-summary-card .card-content p {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.mobile-summary-card.income-card {
  border-color: rgba(61, 214, 140, 0.3);
  background: linear-gradient(135deg, rgba(61, 214, 140, 0.08) 0%, var(--card) 100%);
}

.mobile-summary-card.income-card .card-content p {
  color: var(--accent);
}

.mobile-summary-card.expense-card {
  border-color: rgba(255, 87, 87, 0.3);
  background: linear-gradient(135deg, rgba(255, 87, 87, 0.08) 0%, var(--card) 100%);
}

.mobile-summary-card.expense-card .card-content p {
  color: var(--danger);
}

.mobile-summary-card.net-card {
  border-color: rgba(77, 159, 255, 0.3);
  background: linear-gradient(135deg, rgba(77, 159, 255, 0.08) 0%, var(--card) 100%);
}

.mobile-summary-card.net-card .card-content p {
  color: var(--info);
}

.mobile-summary-card.investment-card {
  border-color: rgba(255, 184, 77, 0.3);
  background: linear-gradient(135deg, rgba(255, 184, 77, 0.08) 0%, var(--card) 100%);
}

.mobile-summary-card.investment-card .card-content p {
  color: var(--warn);
}

/* ===== Mobile Bottom Navigation ===== */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--card);
  border-top: 1px solid var(--line);
  padding: 0.4rem 0.5rem calc(0.4rem + env(safe-area-inset-bottom));
  z-index: 1000;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
}

.mobile-bottom-nav::-webkit-scrollbar {
  display: none;
}

.mobile-bottom-nav {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.nav-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.4rem 0.8rem;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 64px;
  -webkit-tap-highlight-color: transparent;
  vertical-align: top;
  /* Prevent crowding/overlap in flex container */
  flex: 0 0 auto;
  margin: 0 0.15rem;
}

.nav-item:active {
  transform: scale(0.95);
}

.nav-item .nav-icon {
  font-size: 1.3rem;
  line-height: 1;
  transition: transform 0.2s ease;
}

.nav-item .nav-label {
  font-size: 0.62rem;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1;
}

.nav-item.active {
  color: var(--accent);
  background: var(--accent-light);
}

.nav-item.active .nav-icon {
  transform: scale(1.05);
}

/* Desktop tabbar - hide on mobile */
.desktop-tabbar {
  display: block;
}

.desktop-summary {
  display: block;
}

/* Mobile menu toggle */
.mobile-menu-toggle {
  display: none;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 1.5rem;
  padding: 0.5rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  margin-right: 0.5rem;
}

.mobile-menu-toggle .menu-icon {
  display: block;
  line-height: 1;
}

/* Mobile overlay */
.mobile-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9998;
  opacity: 0;
  transition: opacity 0.3s ease;
  /* Prevent blocking clicks when hidden */
  pointer-events: none;
}

.mobile-overlay.active {
  opacity: 1;
  display: block;
  /* Allow closing by tapping the backdrop */
  pointer-events: auto;
}

@media (max-width: 768px) {
  /* Show mobile menu toggle */
  .mobile-menu-toggle {
    display: block;
  }
  
  /* Overlay visibility is controlled by the .active class */
  
  /* Hide desktop elements on mobile */
  .desktop-tabbar {
    display: none !important;
  }
  
  .desktop-summary {
    display: none !important;
  }
  
  /* Show mobile elements */
  .mobile-summary-cards {
    display: grid;
  }
  
  .mobile-bottom-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    align-items: center;
    gap: 0.35rem;
  }
  
  /* Add padding to main content to prevent bottom nav overlap */
  main.card {
    padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important;
    margin-bottom: 0 !important;
  }
  
  /* Ensure sections don't get hidden incorrectly */
  main.card > section {
    display: block !important;
  }
  
  main.card > section.hidden {
    display: none !important;
  }
  
  /* Prevent scroll jumping when switching tabs on mobile */
  main.card {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scroll-behavior: auto !important;
    overscroll-behavior: contain;
    overflow-anchor: none !important;
  }
  
  /* Prevent sections from auto-scrolling into view when shown */
  main.card > section {
    overflow-anchor: none;
  }
  
  /* Adjust card padding for mobile */
  .card {
    padding: 1rem;
  }
  
  /* Make section headings more compact */
  .section h3 {
    font-size: 1rem;
    margin-bottom: 0.6rem;
  }
  
  /* Adjust sidebar for mobile - slide in from left */
  .sidebar {
    position: fixed;
    left: -100%;
    top: 0;
    bottom: 0;
    width: 88%;
    max-width: 360px;
    background: var(--bg-secondary);
    z-index: 9999;
    transition: left 0.3s ease;
    overflow-y: auto;
    padding: 0;
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
    box-shadow: 0 0 0 1px rgba(255,255,255,0.05);
  }
  
  .sidebar.mobile-open {
    left: 0;
    box-shadow: var(--shadow-xl);
  }
  
  /* Sidebar header */
  .sidebar::before {
    content: '';
    display: block;
    position: sticky;
    top: 0;
    background: var(--bg);
    color: var(--accent);
    font-size: 1.1rem;
    font-weight: 700;
    padding: 0;
    border-bottom: 1px solid var(--line);
    z-index: 10;
    letter-spacing: 0.02em;
  }

  .sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
  }
  .brand-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #0d1b22; border: 1px solid #20313c; }
  .brand-title { font-weight: 700; }
  .brand-sub { font-size: .75rem; color: var(--muted); margin-top: 2px; }

  .mobile-side-menu { 
    display: block;
    padding: 0.5rem 0; 
  }
  .menu-section { font-size: .7rem; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; padding: .5rem 1.25rem; }
  .menu-divider { height: 1px; background: var(--line); margin: .4rem 0; }
  .menu-item {
    width: 100%; display: flex; align-items: center; gap: .75rem;
    padding: .8rem 1.25rem; background: transparent; border: none; color: var(--text);
    border-radius: 0; border-top: 1px solid transparent; border-bottom: 1px solid transparent;
    transition: all 0.15s ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .menu-item:active { background: var(--card); }
  .menu-item.active { background: var(--card); border-left: 3px solid var(--accent); padding-left: calc(1.25rem - 3px); }
  .mi-icon { width: 22px; text-align: center; opacity: .9; font-size: 1.1rem; }
  .mi-label { flex: 1; text-align: left; font-weight: 500; font-size: 0.9rem; }
  .mi-chevron { color: var(--muted); font-size: 1.2rem; transition: transform 0.2s ease; }
  .menu-item.active .mi-chevron { transform: rotate(90deg); }
  
  /* Mobile sidebar: hide cards by default, show accordion content when open */
  .sidebar .card {
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
  }
  
  .sidebar .card:hover {
    box-shadow: none !important;
    transform: none !important;
  }
  
  .sidebar .card::before {
    display: none !important;
  }
  
  .sidebar .accordion {
    border: none !important;
  }
  
  .sidebar .accordion summary {
    display: none !important; /* Hide the summary on mobile since we're using menu items instead */
  }
  
  /* CRITICAL: Force hide closed accordions */
  .sidebar .accordion:not([open]) {
    height: 0 !important;
    overflow: hidden !important;
  }
  
  .sidebar .accordion:not([open]) * {
    display: none !important;
  }
  
  /* CRITICAL: Force show open accordion content */
  .sidebar .accordion[open] {
    height: auto !important;
    overflow: visible !important;
    border-top: 1px solid var(--line);
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  
  .sidebar .accordion[open] .section {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    padding: 1rem 1.25rem 1.5rem !important;
    background: var(--card) !important;
    border-radius: 0 0 12px 12px !important;
    margin: 0 !important;
    border-bottom: none !important;
  }
  
  /* Mobile-specific styling for sidebar dropdown content */
  .sidebar .accordion[open] .section * {
    display: revert !important;
  }
  
  .sidebar .accordion[open] .section .controls {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  
  .sidebar .accordion[open] .section .row {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  
  .sidebar .accordion[open] .section input,
  .sidebar .accordion[open] .section select,
  .sidebar .accordion[open] .section button {
    display: block !important;
    width: 100% !important;
    font-size: 15px !important;
  }
  
  .sidebar .accordion[open] .section label.tiny {
    display: block !important;
    margin-bottom: 0.25rem !important;
    font-size: 0.8rem !important;
  }
  
  .sidebar .accordion[open] .section .btn-primary,
  .sidebar .accordion[open] .section .btn-ghost,
  .sidebar .accordion[open] .section .btn-danger {
    display: block !important;
    width: 100% !important;
    margin-top: 0.5rem !important;
  }
  
  /* Ensure cards are visible on desktop */
  @media (min-width: 769px) {
    .sidebar .accordion summary {
      display: block !important; /* Show accordion summary on desktop */
    }
    
    .sidebar .card {
      margin: 0;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      overflow: hidden;
    }
    
    .sidebar .accordion[open] {
      border-top: none;
    }
    
    .sidebar .accordion[open] .section {
      padding: var(--space-lg) var(--space-xl);
      background: transparent;
    }
  }
  
  /* Card spacing in sidebar */
  .sidebar .card {
    margin: 0.75rem 1rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
  }
  
  /* Accordion summary styling */
  .sidebar .accordion summary {
    padding: 0.875rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    background: var(--card);
    border-radius: 12px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    -webkit-tap-highlight-color: transparent;
  }
  
  .sidebar .accordion summary:active {
    background: var(--card-elevated);
    transform: scale(0.98);
  }
  
  .sidebar .accordion[open] summary {
    background: var(--card-elevated);
    border-bottom: 1px solid var(--line);
    border-radius: 12px 12px 0 0;
  }
  
  /* Section content */
  .sidebar .section {
    padding: 1rem;
    border-bottom: none;
  }
  
  /* Form controls */
  .sidebar .controls {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .sidebar .controls .row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .sidebar .controls label.tiny {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  
  .sidebar input,
  .sidebar select {
    min-height: 44px;
    font-size: 16px;
    padding: 0.625rem 0.875rem;
    border-radius: 10px;
    border: 1px solid var(--line-2);
    background: var(--bg);
    color: var(--text);
    width: 100%;
  }
  
  .sidebar input:focus,
  .sidebar select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
  }
  
  .sidebar button {
    min-height: 44px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 10px;
    padding: 0.625rem 1rem;
    width: 100%;
    transition: all 0.2s ease;
  }
  
  .sidebar .btn-primary {
    background: var(--accent);
    color: #052010;
    border: none;
  }
  
  .sidebar .btn-primary:active {
    transform: scale(0.98);
    background: var(--accent-hover);
  }
  
  .sidebar .btn-danger {
    background: var(--danger);
    color: white;
    border: none;
  }
  
  .sidebar .btn-danger:active {
    transform: scale(0.98);
    filter: brightness(0.9);
  }
  
  .sidebar .btn-ghost {
    background: transparent;
    border: 1px solid var(--line-2);
    color: var(--text-secondary);
  }
  
  .sidebar .btn-ghost:active {
    transform: scale(0.98);
    background: var(--card);
  }
  
  /* Compact status text */
  .sidebar .tiny.muted {
    font-size: 0.75rem;
    color: var(--muted);
    line-height: 1.4;
  }
  
  /* Mobile header adjustments */
  .page-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 0.8rem 1rem;
  }
  
  .page-header .brand h1 {
    font-size: 1.1rem;
  }
  
  /* Improve touch targets for buttons */
  button, .btn, .btn-primary, .btn-ghost {
    min-height: 44px;
    padding: 0.6rem 1rem;
  }
  
  /* Better spacing for filter bars */
  .bycat-filter-bar, .tx-filter-bar {
    padding: 0.8rem;
    margin-bottom: 1rem;
  }
  
  /* Adjust group cards for mobile */
  #byCatGrouped, #budgetsGrouped {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0;
  }
}

/* ===== Progress bars ===== */
.progress{position:relative;height:10px;border-radius:6px;background:#202a33;overflow:hidden;border:1px solid #25313b}
.progress .fill{height:100%;background:var(--accent);transition:width .35s ease}
.progress .fill.warn{background:var(--warn)}
.progress .fill.danger{background:var(--danger)}
.progress .fill.success{background:var(--accent)}   /* ✅ NEW: green when spent == budget */

/* overall (auto) budget */
#autoBudgetFill{height:12px}
#autoBudgetOverWrap{color:#ff9da0}


/* ===== Badges / tags ===== */
.badge{
  display:inline-block;padding:.15rem .5rem;border-radius:999px;font-size:.75rem;font-weight:700;
  border:1px solid transparent
}
.badge-over{background:#3b1116;color:#ffd9dc;border-color:#5c1c22}
.badge-ok{background:#0f2b20;color:#bff1d4;border-color:#173f2f}

.tag{
  display:inline-block;padding:.15rem .5rem;border-radius:999px;font-size:.75rem;font-weight:700;
  background:#1a2530;border:1px solid #24313d;color:#c9d6e2
}
.tag.income{background:#0f2b20;border-color:#173f2f;color:#bff1d4}
.tag.expense{background:#2a1820;border-color:#3a212a;color:#ffd9dc}

/* ===== Budgets / Category — Unified Grouped Layout ===== */
/* Make group/category grid columns stretch cards to fill height */
#byCatGrouped,
#budgetsGrouped,
.group-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--group-gap);
  padding-inline:var(--group-gap);
  padding-block:var(--group-gap);
  align-items: stretch;
}
/* Make group-block fill the grid cell vertically */
.group-block{
  background:#121a22;
  border:1px solid var(--line);
  border-radius:12px;
  padding:.9rem;
  height:100%;
  display:flex;
  flex-direction:column;
}
.group-block h3{
  margin:0 0 .6rem;color:#d7dee6;display:flex;align-items:center
}
.group-block h3 .btn-ghost{margin-left:auto}

/* Enhanced Budget Cards */
.budget-card {
  background: linear-gradient(135deg, #1a242e 0%, #151f28 100%);
  border: 1px solid #2a3740;
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 1.2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.budget-card:hover {
  border-color: #3a4750;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.budget-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid #2a3740;
}

.budget-group-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #e2e9f0;
  margin: 0;
}

.budget-group-total {
  background: var(--accent);
  color: #ffffff;
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
}

.budget-category-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.budget-category-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 0.8rem;
  background: #0f1821;
  border-radius: 10px;
  border: 1px solid #1f2937;
  transition: all 0.2s ease;
}

.budget-category-row:hover {
  background: #151f28;
  border-color: #374151;
}

.budget-category-info {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.budget-category-name {
  font-size: 0.95rem;
  font-weight: 500;
  color: #d7dee6;
}

.budget-category-spent {
  font-size: 0.8rem;
  color: #9ca3af;
}

.budget-input-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Budget input sits where the bar is */
input.budget-input{
  width: 120px;
  text-align: right;
  flex: 0 0 120px;
  background: #0f1619;
  border: 1px solid #374151;
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  color: #e2e9f0;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

input.budget-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
}

input.budget-input:hover {
  border-color: #4b5563;
}

/* Enhanced Category Cards */
.category-card {
  background: linear-gradient(135deg, #1a242e 0%, #151f28 100%);
  border: 1px solid #2a3740;
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 1.2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.category-card:hover {
  border-color: #3a4750;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.category-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid #2a3740;
}

.category-group-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #e2e9f0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.group-drag-handle {
  color: #6b7280;
  font-size: 1.2rem;
  cursor: grab;
  user-select: none;
  padding: 0.25rem 0.5rem;
  margin-right: 0.5rem;
  transition: all 0.2s ease;
  opacity: 0.7;
  border-radius: 4px;
}

.group-drag-handle:hover {
  color: #3dd68c;
  opacity: 1;
  background: rgba(61, 214, 140, 0.1);
}

.group-drag-handle:active {
  cursor: grabbing;
  background: rgba(61, 214, 140, 0.2);
}

.category-card[draggable="true"] {
  cursor: move;
  transition: transform 0.2s ease;
}

.category-card.dragging {
  opacity: 0.5;
  transform: scale(0.98);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.category-group-summary {
  background: #0f1619;
  border: 1px solid #374151;
  border-radius: 8px;
  padding: 0.5rem 0.8rem;
  font-size: 0.9rem;
  color: #d1d5db;
}

.category-item-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.category-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  background: #0f1821;
  border-radius: 10px;
  border: 1px solid #1f2937;
  transition: all 0.2s ease;
  cursor: grab;
}

.category-item:active {
  cursor: grabbing;
}

.category-item:hover {
  background: #151f28;
  border-color: #374151;
}

.category-name-drag {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.drag-handle {
  color: #6b7280;
  font-size: 1.1rem;
  cursor: grab;
  user-select: none;
  padding: 0 0.25rem;
  transition: color 0.2s ease;
}

.drag-handle:hover {
  color: #9ca3af;
}

.category-item:active .drag-handle {
  cursor: grabbing;
}

.edit-category-btn {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.category-item:hover .edit-category-btn {
  opacity: 1;
}

.edit-category-btn:hover {
  background: var(--card-elevated);
  transform: scale(1.1);
}

.category-info {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.category-name {
  font-size: 0.95rem;
  font-weight: 500;
  color: #d7dee6;
  cursor: pointer;
  transition: color 0.2s ease;
}

.category-name:hover {
  color: var(--accent);
}

.category-amount {
  font-size: 0.85rem;
  color: #9ca3af;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.category-badge {
  background: #dc2626;
  color: white;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
}

.category-progress-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 200px;
}

.category-progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: #9ca3af;
}

.category-remaining {
  color: #10b981;
  font-weight: 500;
}

.delete-button {
  opacity: 0.6;
  transition: opacity 0.2s ease;
  font-size: 0.8rem;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
}

.delete-button:hover {
  opacity: 1;
  background: #dc2626;
  color: white;
}

/* Row inside a group */
.group-row{
  display:grid;
  grid-template-columns: 1fr auto minmax(160px,1fr); /* name | numbers | bar/input */
  gap:.8rem;align-items:center;
  padding:.5rem .3rem;border-radius:8px
}
.group-row:hover{background:#151f28}
.group-cat{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.group-nums{display:grid;grid-template-columns:repeat(3,auto);gap:1.1rem;justify-content:end}
.group-nums span{display:inline-block;min-width:72px;text-align:right;color:#dbe3eb}
.group-bar{display:flex;align-items:center;gap:.6rem}
.group-bar .progress{height:8px;min-width:160px;flex:1}

/* Stack rows nicely on phones */
@media (max-width:720px){
  #byCatGrouped,
  #budgetsGrouped,
  .group-grid{grid-template-columns:1fr}

  .group-row{
    grid-template-columns: 1fr;
    gap:.45rem;
  }
  .group-nums{justify-content:flex-start}
  .group-nums span{min-width:auto;text-align:left}
  .group-bar{justify-content:flex-start}
  .group-bar .progress{min-width:0;width:100%}

  /* Enhanced Budget Cards Mobile */
  .budget-card {
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 12px;
  }

  .budget-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
    margin-bottom: 1rem;
  }

  .budget-group-title {
    font-size: 1rem;
  }

  .budget-group-total {
    align-self: flex-end;
    font-size: 0.85rem;
    padding: 0.3rem 0.6rem;
  }

  .budget-category-row {
    grid-template-columns: 1fr;
    gap: 0.8rem;
    padding: 0.8rem;
  }

  .budget-input-wrapper {
    justify-content: flex-end;
  }

  input.budget-input {
    width: 100%;
    max-width: 150px;
  }

  .budget-category-info {
    gap: 0.2rem;
  }

  .budget-category-name {
    font-size: 0.9rem;
  }

  .budget-category-spent {
    font-size: 0.75rem;
  }

  /* Enhanced Category Cards Mobile */
  .category-card {
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 12px;
  }

  .category-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
    margin-bottom: 1rem;
  }

  .category-group-title {
    font-size: 1rem;
  }

  .category-group-summary {
    align-self: flex-end;
    font-size: 0.85rem;
    padding: 0.3rem 0.6rem;
  }

  .category-item {
    grid-template-columns: 1fr;
    gap: 0.8rem;
    padding: 0.8rem;
  }

  .category-info {
    gap: 0.2rem;
  }

  .category-name {
    font-size: 0.9rem;
  }

  .category-amount {
    font-size: 0.75rem;
  }

  .category-progress-section {
    gap: 0.3rem;
  }
}

/* ===== Import + misc ===== */
#skipDuplicates{width:auto}
#cloudStatus{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== Charts (Overview & Reports) ===== */
/* IDs kept for legacy, but visuals now come from .chart-area to avoid double borders */
#overviewChart,#trendChart,#networthChart{border:none;background:transparent;border-radius:8px}

/* ===== Enhanced Overview Tab ===== */
.overview-header-section {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
}

.overview-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.overview-title {
  color: #e2e9f0;
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0;
}

.overview-description {
  color: #9ca3af;
  font-size: 0.95rem;
  margin: 0;
}

.overview-mode-selector {
  display: flex;
  gap: 4px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.mode-btn {
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: #9ca3af;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.mode-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #e2e9f0;
}

.mode-btn.active {
  background: #4285f4;
  color: white;
  box-shadow: 0 2px 4px rgba(66, 133, 244, 0.3);
}

.overview-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.overview-card {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 24px;
  transition: all 0.3s ease;
}

.overview-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  border-color: #475569;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.25rem;
  font-weight: 600;
  color: #e2e9f0;
}

.card-title svg {
  color: #4285f4;
}

.card-subtitle {
  font-size: 0.875rem;
  color: #9ca3af;
}

.chart-container {
  margin-bottom: 16px;
}

.chart-area {
  height: 260px;
  position: relative;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

.chart-legend {
  font-size: 0.8rem;
  color: #9ca3af;
  line-height: 1.4;
  padding: 8px 0;
}

/* ===== Overview KPIs and Quick Actions ===== */
.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:8px 0 20px}
.kpi-card{background:linear-gradient(135deg,#1f2a37,#0f172a);border:1px solid #2b3946;border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:4px;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.kpi-card:active{transform:scale(.98)}
.kpi-card .kpi-label{font-size:.75rem;letter-spacing:.4px;text-transform:uppercase;color:#98a6b5}
.kpi-card .kpi-value{font-size:1.25rem;font-weight:700;color:#e2e9f0}
.kpi-card.income{border-color:rgba(61,214,140,.35)}
.kpi-card.expense{border-color:rgba(255,87,87,.35)}
.kpi-card.net{border-color:rgba(77,159,255,.35)}

.quick-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.quick-actions .qa-btn{flex:1 1 160px;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1rem;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--text);cursor:pointer;transition:transform .12s ease, background .12s ease}
.quick-actions .qa-btn:active{transform:scale(.98)}
.quick-actions .qa-btn.income{border-color:rgba(61,214,140,.35);background:rgba(61,214,140,.06)}
.quick-actions .qa-btn.expense{border-color:rgba(255,87,87,.35);background:rgba(255,87,87,.06)}
.quick-actions .qa-btn.debt{border-color:rgba(255,184,77,.35);background:rgba(255,184,77,.06)}

.net-range{display:flex;gap:6px}
.net-range .nr-btn{padding:6px 10px;border:1px solid #2b3946;border-radius:8px;background:transparent;color:#b8c2cc;font-size:.8rem;cursor:pointer}
.net-range .nr-btn.active{background:#334155;color:#fff;border-color:#475569}

@media (max-width:768px){
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
}

/* Mobile Overview Adjustments */
@media (max-width: 768px) {
  .overview-header-section {
    padding: 16px;
    margin-bottom: 16px;
  }
  
  .overview-title {
    font-size: 1.5rem;
  }
  
  .overview-title-row {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  
  .overview-cards-grid {
    gap: 16px;
  }
  
  .overview-card {
    padding: 16px;
  }
  
  .card-title {
    font-size: 1.1rem;
  }
  
  .chart-area {
    height: 200px;
  }
  
  .mode-btn {
    padding: 6px 12px;
    font-size: 0.8rem;
  }
}

/* ===== Enhanced Goals Tab ===== */
.goals-header-section {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
}

.goals-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.goals-title-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.goals-title {
  color: #e2e9f0;
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0;
}

.goals-description {
  color: #9ca3af;
  font-size: 0.95rem;
  margin: 0;
}

.add-goal-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: #4285f4;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(66, 133, 244, 0.3);
}

.add-goal-btn:hover {
  background: #3367d6;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(66, 133, 244, 0.4);
}

.goals-content {
  display: flex;
  flex-direction: column;
}

.goals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
}

.empty-goals-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  border: 2px dashed #475569;
  border-radius: 12px;
}

.empty-goals-icon {
  margin-bottom: 16px;
  opacity: 0.6;
}

.empty-goals-icon svg {
  color: #9ca3af;
}

.empty-goals-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #e2e9f0;
  margin-bottom: 8px;
}

.empty-goals-subtitle {
  font-size: 0.9rem;
  color: #9ca3af;
  max-width: 300px;
}

.goal-card {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.goal-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #4285f4;
  transition: all 0.3s ease;
}

.goal-card.completed::before {
  background: #10b981;
}

.goal-card.on-track::before {
  background: #22c55e;
}

.goal-card.moderate::before {
  background: #f59e0b;
}

.goal-card.behind::before {
  background: #ef4444;
}

.goal-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  border-color: #475569;
}

.goal-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.goal-title-section {
  flex: 1;
}

.goal-name {
  font-size: 1.25rem;
  font-weight: 600;
  color: #e2e9f0;
  margin-bottom: 8px;
}

.goal-status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.goal-status-badge.completed {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.goal-status-badge.on-track {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.goal-status-badge.moderate {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.goal-status-badge.behind {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

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

.goal-action-btn {
  padding: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #9ca3af;
  cursor: pointer;
  transition: all 0.2s;
}

.goal-action-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #e2e9f0;
}

.goal-action-btn.delete:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3);
}

.goal-progress-section {
  margin-bottom: 20px;
}

.progress-amount-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.progress-amount {
  display: flex;
  align-items: center;
  gap: 8px;
}

.current-amount {
  font-size: 1.5rem;
  font-weight: 700;
  color: #e2e9f0;
}

.separator {
  font-size: 0.9rem;
  color: #9ca3af;
}

.target-amount {
  font-size: 1.2rem;
  font-weight: 600;
  color: #9ca3af;
}

.remaining-amount {
  font-size: 0.9rem;
  color: #9ca3af;
  font-weight: 500;
}

.progress-bar-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.goal-progress-bar {
  flex: 1;
  height: 12px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.goal-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4285f4 0%, #34a853 100%);
  border-radius: 6px;
  transition: width 0.6s ease;
  position: relative;
}

.goal-progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.progress-percentage {
  font-size: 0.875rem;
  font-weight: 600;
  color: #e2e9f0;
  min-width: 50px;
  text-align: right;
}

.goal-details-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.goal-detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

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

.detail-label {
  font-size: 0.875rem;
  color: #9ca3af;
  font-weight: 500;
}

.detail-value {
  font-size: 0.875rem;
  color: #e2e9f0;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.detail-subtext {
  font-size: 0.75rem;
  color: #9ca3af;
}

/* Mobile Goals Adjustments */
@media (max-width: 768px) {
  .goals-header-section {
    padding: 16px;
    margin-bottom: 16px;
  }
  
  .goals-title-row {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .goals-title {
    font-size: 1.5rem;
  }
  
  .goals-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .goal-card {
    padding: 16px;
  }
  
  .goal-name {
    font-size: 1.1rem;
  }
  
  .current-amount {
    font-size: 1.25rem;
  }
  
  .target-amount {
    font-size: 1rem;
  }
  
  .progress-amount-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .goal-details-section {
    gap: 8px;
  }
  
  .goal-detail-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .detail-value {
    align-items: flex-start;
  }
  
  .empty-goals-state {
    padding: 40px 16px;
  }
}

/* ===== Banks tab ===== */
.bank-title:hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  transition: background-color 0.2s;
}

/* Bank Logo Styles */
.bank-logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #ffffff;
  padding: 4px;
  border: 1px solid #e5e7eb;
}

.bank-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 4px;
}

/* Explicit image class for bank cards to avoid conflict with modal .bank-logo container */
.bank-logo-img {
  width: 32px;
  height: 32px;
  max-width: 32px;
  max-height: 32px;
  object-fit: contain;
  border-radius: 4px;
  display: block;
}

.bank-logo-text, .bank-logo-fallback {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: linear-gradient(135deg, #4285f4 0%, #34a853 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
}

.bank-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.bank-name {
  font-weight: 600;
  color: #e2e9f0;
  font-size: 0.95rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bank-owner {
  font-size: 0.8rem;
  color: #9ca3af;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Mobile Bank Logo Adjustments */
@media (max-width: 768px) {
  .bank-logo-container {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    display: flex !important;
    flex-shrink: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: #ffffff !important;
    border-radius: 8px !important;
    padding: 4px !important;
    overflow: visible !important;
  }
  
  .bank-logo {
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    object-fit: contain !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    border-radius: 4px !important;
  }

  .bank-logo-img {
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    object-fit: contain !important;
    display: block !important;
    border-radius: 4px !important;
  }
  
  .bank-logo-text, .bank-logo-fallback {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  .bank-name {
    font-size: 0.95rem;
    font-weight: 600;
  }
  
  .bank-owner {
    font-size: 0.8rem;
  }
  
  .bank-title-section {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 1 !important;
  }
  
  .bank-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }
  
  /* Ensure bank card header displays properly */
  .bank-card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
}

@media (max-width: 480px) {
  .bank-logo-container {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
  
  .bank-logo {
    width: 36px !important;
    height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
  }

  .bank-logo-img {
    width: 36px !important;
    height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
  }
  
  .bank-logo-text, .bank-logo-fallback {
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
  }
}

/* Enhanced Bank Card Styles */
.bank-card {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.bank-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  border-color: #475569;
}

.bank-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.bank-title-section {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
  padding: 4px;
  border-radius: 8px;
  transition: background-color 0.2s;
}

.bank-title-section:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

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

.bank-delete-btn {
  padding: 6px;
  border-radius: 6px;
  color: #ef4444;
  transition: all 0.2s;
}

.bank-delete-btn:hover {
  background-color: rgba(239, 68, 68, 0.1);
  color: #f87171;
}

.bank-balance-section {
  margin-bottom: 16px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.current-balance {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.balance-label {
  font-size: 0.85rem;
  color: #9ca3af;
}

.balance-amount {
  font-size: 1.25rem;
  font-weight: 700;
  color: #e2e9f0;
}

.balance-change {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
  font-weight: 600;
}

.balance-change.positive {
  color: #10b981;
}

.balance-change.negative {
  color: #ef4444;
}

.change-icon {
  font-size: 1rem;
}

.bank-stats-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-label {
  font-size: 0.75rem;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: #e2e9f0;
}

.stat-value.positive {
  color: #10b981;
}

.stat-value.negative {
  color: #ef4444;
}

.bank-period-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: #6b7280;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Actions bar for connected bank integration */
.bank-actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 12px;
  padding: 8px 10px;
  background: transparent;
  width: 100%;
}

.bank-actions-bar .bank-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.bank-actions-bar select#syncDaysBack {
  height: 32px;
  padding: 2px 8px;
  font-size: 0.9rem;
  border-radius: 8px;
}

.bank-actions-bar .btn-sm {
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
}

.bank-sync-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #9ca3af;
  font-size: 0.8rem;
}

.bank-sync-badge .count {
  background: rgba(16,185,129,.15);
  color: #10b981;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
}

/* Mobile Bank Card Adjustments */
@media (max-width: 768px) {
  .bank-card {
    padding: 16px;
    display: block !important;
    visibility: visible !important;
  }
  
  .bank-card-header {
    margin-bottom: 12px;
    display: flex !important;
  }
  
  .bank-title-section {
    gap: 10px;
    display: flex !important;
    flex: 1;
  }
  
  .bank-balance-section {
    padding: 12px;
    margin-bottom: 12px;
    display: flex !important;
  }
  
  .balance-amount {
    font-size: 1.1rem;
  }
  
  .bank-stats-section {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 12px;
    display: grid !important;
  }
  
  .stat-value {
    font-size: 0.85rem;
  }
  
  .bank-period-info {
    font-size: 0.7rem;
    display: flex !important;
  }
  
  /* Ensure bank grid shows properly on mobile */
  #banksGrid, .summary {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* ===== Enhanced Transactions Tab ===== */
/* Filter Bar */
#txFilterBar {
  background: #131a23;
  border: 1px solid #25313b;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #25313b;
}

.filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0;
}

.filter-header h3 {
  margin: 0;
  color: #e1e7ef;
  font-size: 1rem;
}

/* Responsive Filter Grid */
.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.2rem;
  padding: 0.5rem 0;
}

/* Desktop: 3 columns for most, date range spans 2 */
@media (min-width: 1024px) {
  .filter-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .date-range-group {
    grid-column: span 2;
  }
}

/* Tablet: 2 columns */
@media (min-width: 768px) and (max-width: 1023px) {
  .filter-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .date-range-group {
    grid-column: span 2;
  }
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.filter-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.date-inputs {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: nowrap;
}

.date-inputs input[type="date"] {
  flex: 1;
  min-width: 0;
}

.date-separator {
  font-size: 1rem;
  color: var(--accent);
  font-weight: 600;
  flex-shrink: 0;
}

.bank-selects {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.type-select,
.transfer-select,
.group-select,
.category-select {
  width: 100%;
}

/* Active Filter Chip */
.active-filter-chip {
  margin-bottom: 1rem;
  display: flex;
  justify-content: flex-start;
}

.chip-content {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #2a4158;
  border: 1px solid #3e5c7a;
  border-radius: 20px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  color: #e1e7ef;
}

.chip-icon {
  font-size: 1rem;
}

.chip-close {
  background: none;
  border: none;
  color: #bcc6d1;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0;
  margin-left: 0.25rem;
}

.chip-close:hover {
  color: #ff6b6b;
}

/* Enhanced Table */
.transactions-table {
  background: #131a23;
  border: 1px solid #25313b;
  border-radius: 8px;
  overflow: hidden;
}

.transactions-table thead {
  background: #18232e;
}

.transactions-table th {
  font-weight: 600;
  color: #e1e7ef;
  padding: 1rem 0.875rem;
  border-bottom: 2px solid #25313b;
}

/* Column Widths */
.date-col { width: 8%; }
.type-col { width: 12%; }
.category-col { width: 25%; }
.sub-col { width: 15%; }
.amount-col { width: 12%; }
.note-col { width: 18%; }
.actions-col { width: 10%; }

/* Transaction Rows */
.transaction-row {
  border-bottom: 1px solid #1a2530;
  transition: background-color 0.2s ease;
}

.transaction-row:hover {
  background: #151f28;
}

.transaction-row.income {
  border-left: 3px solid #0f8c5a;
}

.transaction-row.expense {
  border-left: 3px solid #b34d4d;
}

.transaction-row td {
  padding: 0.875rem;
  vertical-align: middle;
}

/* Cell Styling */
.date-cell {
  font-family: 'SF Mono', Consolas, monospace;
}

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

.date-main {
  font-weight: 500;
  color: #e1e7ef;
  font-size: 0.875rem;
}

.type-cell {
  padding: 0.5rem 0.875rem;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.375rem 0.75rem;
  border-radius: 16px;
  border: 1px solid transparent;
}

.tag.income {
  background: #0f2b20;
  border-color: #173f2f;
  color: #bff1d4;
}

.tag.expense {
  background: #2a1820;
  border-color: #3a212a;
  color: #ffd9dc;
}

.transfer-badge {
  display: inline-block;
  font-size: 0.625rem;
  color: #9fb0bd;
  background: #1a2530;
  padding: 0.125rem 0.375rem;
  border-radius: 8px;
  margin-left: 0.5rem;
  border: 1px solid #25313b;
}

.debt-badge {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.125rem 0.375rem;
  border-radius: 8px;
  margin-left: 0.5rem;
  background: var(--accent-light);
  border: 1px solid var(--accent);
  color: var(--accent);
  cursor: help;
}

.category-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.category-name {
  font-weight: 500;
  color: #e1e7ef;
}

.bank-tag {
  font-size: 0.75rem;
  color: #9fb0bd;
  background: #1a2530;
  padding: 0.125rem 0.5rem;
  border-radius: 12px;
  border: 1px solid #25313b;
}

.subcategory {
  color: #bcc6d1;
  font-size: 0.875rem;
}

.amount-cell {
  text-align: right;
}

.amount-display {
  display: inline-flex;
  align-items: baseline;
  gap: 0.125rem;
  font-family: 'SF Mono', Consolas, monospace;
  font-weight: 600;
}

.amount-display.income {
  color: #3dd68c;
}

.amount-display.expense {
  color: #ff6b6b;
}

.currency {
  font-size: 0.875rem;
  opacity: 0.8;
}

.amount-value {
  font-size: 1rem;
}

.note-cell {
  max-width: 200px;
}

.note-text {
  color: #9fb0bd;
  font-size: 0.875rem;
  line-height: 1.3;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Action Buttons */
.actions-cell {
  text-align: center;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
}

.action-btn {
  background: none;
  border: 1px solid #25313b;
  border-radius: 6px;
  padding: 0.375rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
}

.action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.action-btn.edit {
  border-color: #3e5c7a;
  color: #74a9d8;
}

.action-btn.edit:hover {
  background: #2a4158;
  border-color: #4a6b8a;
}

.action-btn.duplicate {
  border-color: #4a5d2f;
  color: #9db365;
}

.action-btn.duplicate:hover {
  background: #3a4a25;
  border-color: #5a6d3f;
}

.action-btn.delete {
  border-color: #5d2f2f;
  color: #d67474;
}

.action-btn.delete:hover {
  background: #4a2525;
  border-color: #6d3f3f;
}

/* Enhanced Totals */
.totals-row {
  background: #18232e;
  border-top: 2px solid #25313b;
}

.totals-row td {
  padding: 1rem 0.875rem;
  border-bottom: none;
}

.totals-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #e1e7ef;
}

.totals-icon {
  font-size: 1.2rem;
}

.totals-count {
  font-size: 0.875rem;
  color: #9fb0bd;
  margin-left: auto;
}

.totals-values {
  text-align: right;
}

.totals-grid {
  display: flex;
  justify-content: flex-end;
  gap: 1.5rem;
}

.total-item {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

.total-label {
  font-size: 0.75rem;
  color: #9fb0bd;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.total-amount {
  font-family: 'SF Mono', Consolas, monospace;
  font-weight: 600;
  font-size: 1rem;
}

.total-item.income .total-amount {
  color: #3dd68c;
}

.total-item.expense .total-amount {
  color: #ff6b6b;
}

.total-item.net.positive .total-amount {
  color: #3dd68c;
}

.total-item.net.negative .total-amount {
  color: #ff6b6b;
}

/* Mobile Responsiveness */
@media (max-width: 767px) {
  .filter-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .date-range-group {
    grid-column: span 1;
  }
  
  .filter-header {
    flex-direction: column;
    align-items: stretch;
  }
  
  .filter-toggle {
    width: 100%;
  }
  
  .date-inputs {
    flex-direction: row;
    gap: 0.5rem;
  }
  
  .date-separator {
    font-size: 0.9rem;
  }
  
  .bank-selects {
    gap: 0.6rem;
  }
  
  /* Mobile Card Layout for Transactions */
  .transactions-table {
    border: none;
    background: none;
  }
  
  .transactions-table thead {
    display: none;
  }
  
  .transactions-table tbody {
    display: block;
  }
  
  .transaction-row {
    display: block;
    background: #131a23;
    border: 1px solid #25313b;
    border-radius: 8px;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    padding-bottom: 4rem; /* Increased bottom padding for better button spacing */
    position: relative;
    border-left: none;
  }
  
  .transaction-row.income {
    border-top: 3px solid #0f8c5a;
  }
  
  .transaction-row.expense {
    border-top: 3px solid #b34d4d;
  }
  
  .transaction-row:hover {
    background: #151f28;
  }
  
  /* Restructure all cells as mobile cards */
  .transaction-row td {
    display: block;
    padding: 0;
    border-bottom: none;
    width: 100% !important;
  }
  
  /* Mobile card header with date and type */
  .date-cell {
    display: flex !important;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid #25313b;
    padding-right: 1rem; /* Reduced padding since we're moving actions */
  }
  
  .date-display {
    flex: 1;
  }
  
  .date-main {
    font-size: 0.875rem;
    color: #9fb0bd;
  }
  
  .type-cell {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
  }
  
  .tag {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
  }
  
  /* Category and amount section */
  .category-cell {
    display: block !important;
    margin-bottom: 0.375rem;
    padding-right: 0; /* Remove right padding */
  }
  
  .category-info {
    display: block;
  }
  
  .category-name {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: #e1e7ef;
  }
  
  .bank-tag {
    display: inline-block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
  }
  
  .sub-cell {
    display: block !important;
    margin-bottom: 0.375rem;
    padding-right: 0; /* Remove right padding */
  }
  
  .subcategory {
    color: #9fb0bd;
    font-style: italic;
    font-size: 0.875rem;
  }
  
  .amount-cell {
    display: block !important;
    text-align: left;
    margin-bottom: 0.5rem;
    padding-right: 0; /* Remove right padding */
  }
  
  .amount-display {
    font-size: 1.375rem;
    font-weight: 700;
  }
  
  .note-cell {
    display: block !important;
    margin-bottom: 4rem; /* Increased space for action buttons below */
    max-width: none;
    padding-right: 0; /* Remove right padding since buttons will be below */
  }
  
  .note-text {
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
    line-height: 1.3;
    color: #bcc6d1;
    font-size: 0.875rem;
    margin-bottom: 1rem; /* Additional margin for longer notes */
  }
  
  /* Actions positioned below all content */
  .actions-cell {
    display: block !important;
    position: absolute;
    bottom: 0.75rem;
    left: 0.75rem;
    right: 0.75rem;
    text-align: center;
    z-index: 10;
  }
  
  .action-buttons {
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
  }
  
  .action-btn {
    width: 2rem;
    height: 2rem;
    font-size: 0.875rem;
    border-radius: 6px;
    background: #1a2530;
    border: 1px solid #3e5c7a;
    flex: 1;
    max-width: 3rem;
  }
  
  /* Hide empty subcategory on mobile */
  .sub-cell:empty,
  .subcategory:empty {
    display: none !important;
  }
  
  /* Hide empty notes on mobile */
  .note-cell .note-text:empty {
    display: none;
  }
  
  .note-cell:has(.note-text:empty) {
    display: none !important;
  }
  
  /* Totals section mobile layout */
  .totals-row {
    display: block;
    background: #131a23;
    border: 1px solid #25313b;
    border-radius: 8px;
    margin-top: 1rem;
  }
  
  .totals-row td {
    display: block;
    padding: 1rem;
  }
  
  .totals-header {
    justify-content: center;
    margin-bottom: 1rem;
  }
  
  .totals-values {
    text-align: center;
  }
  
  .totals-grid {
    justify-content: center;
    flex-direction: row;
    gap: 1rem;
    flex-wrap: wrap;
  }
  
  .total-item {
    align-items: center;
    min-width: 80px;
  }
  
  .total-amount {
    font-size: 1.1rem;
  }
}

/* ===== Goals ===== */
#goalsList .tile .progress{height:8px}
#goalsList .tile .fill{background:var(--accent)}

/* ===== Login view ===== */
#loginView .card{background:var(--card);border:1px solid var(--line-2);border-radius:12px}
#btnLoginGoogle{min-width:220px}

/* ===== Modern Sidebar Accordions ===== */
.sidebar .card{padding:0}
.card details.accordion {
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.card details.accordion > summary{
  list-style:none;
  cursor:pointer;
  padding:1.3rem 1.6rem;
  background:linear-gradient(135deg, var(--card-elevated) 0%, var(--card) 100%);
  border-bottom:2px solid var(--line);
  font-weight:700;
  font-size:1.1rem;
  color:var(--text);
  display:flex;
  align-items:center;
  gap:.8rem;
  transition: all .3s cubic-bezier(.4,0,.2,1);
  user-select: none;
  letter-spacing:-0.01em;
  position:relative;
}
.card details.accordion > summary::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:linear-gradient(180deg, var(--accent) 0%, var(--accent-hover) 100%);
  opacity:0;
  transition:opacity .3s ease;
}
.card details.accordion > summary:hover{
  background:linear-gradient(135deg, #1e2936 0%, var(--card-elevated) 100%);
  color:var(--accent);
  padding-left:1.8rem;
}
.card details.accordion > summary:hover::before{
  opacity:1;
}
.card details.accordion > summary::-webkit-details-marker{display:none}
.card details.accordion > summary::after{
  content:"▸";
  margin-left:auto;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  opacity:.6;
  font-size:1.2rem;
  color:var(--accent);
}
.card details.accordion[open] > summary{
  background:linear-gradient(135deg, var(--card) 0%, var(--bg-secondary) 100%);
  border-bottom-color:var(--line-2);
  color:var(--accent);
  padding-left:1.8rem;
}
.card details.accordion[open] > summary::before{
  opacity:1;
}
.card details.accordion[open] > summary::after{
  transform:rotate(90deg);
  opacity:1;
}
.card details.accordion > .section{
  padding:var(--space-lg) var(--space-xl);
  border-bottom:none;
  background:var(--bg-secondary);
  animation:slideDown .3s cubic-bezier(.4,0,.2,1);
}

@keyframes slideDown{
  from{
    opacity:0;
    transform:translateY(-10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* ===== PIN fallback blur when active ===== */
body.pin-active #appView{
  filter:blur(8px) brightness(.95);
  pointer-events:none;
  user-select:none;
}

/* ===== Responsive ===== */
@media (max-width:1200px){
  #byCatGrouped,#budgetsGrouped,.group-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:1024px){
  .layout{grid-template-columns:320px 1fr}
}
@media (max-width:900px){
  .layout{grid-template-columns:1fr}
  main.card{max-height:unset}
}

/* === Mobile tab fixes (iPhone) === */
.tabbar{
  display:flex;
  flex-wrap: nowrap;              /* keep on one row */
  overflow-x: auto;               /* allow horizontal scroll */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;        /* smooth scrolling between tabs */
  gap:.35rem;
  padding:.6rem max(1rem, env(safe-area-inset-left)) .6rem max(1rem, env(safe-area-inset-right));
  background: linear-gradient(to bottom, #111821 0%, #0f151c 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  position: relative;
}

/* Prominent scroll indicator on right edge when tabs overflow */
@media (max-width: 768px) {
  .tabbar::after {
    content: '›';
    position: sticky;
    right: 0;
    top: 0;
    bottom: 0;
    width: 48px;
    background: linear-gradient(to left, #111821 0%, #111821 20%, transparent 100%);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--accent);
    text-shadow: 0 0 8px rgba(61, 214, 140, 0.4);
    animation: scroll-pulse 2s ease-in-out infinite;
  }
  
  /* Pulsing animation to draw attention */
  @keyframes scroll-pulse {
    0%, 100% {
      opacity: 0.7;
      transform: translateX(0);
    }
    50% {
      opacity: 1;
      transform: translateX(-3px);
    }
  }
  
  /* Hide the indicator when scrolled to the end */
  .tabbar.scrolled-end::after {
    display: none;
  }
}
.tabbar::-webkit-scrollbar{ display:none; }   /* hide scroll bar on iOS */

.tab{
  flex: 0 0 auto;                 /* don't shrink, keep natural width */
  white-space: nowrap;            /* no wrapping inside tab */
  line-height: 1.2;
  padding: .6rem 1rem;
  border-radius: 12px 12px 0 0;
  font-size: 0.9375rem;
  font-weight: 500;
  transition: all 0.2s ease;
  position: relative;
}

.tab:active {
  transform: scale(0.97);         /* subtle press feedback */
}

.tab.active {
  background: linear-gradient(to bottom, #1d2936 0%, #18232e 100%);
  font-weight: 700;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

.tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 3px;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
}

/* tighten spacing and font on smaller phones */
@media (max-width: 430px){
  .tab{ 
    padding: .5rem .85rem; 
    font-size: .875rem; 
    border-radius: 10px 10px 0 0;
  }
  .tabbar{ 
    gap: .25rem;
    padding: .5rem max(.875rem, env(safe-area-inset-left)) .5rem max(.875rem, env(safe-area-inset-right));
  }
  .tab.active::after {
    width: 50%;
    height: 2.5px;
  }
}

/* Extra refinement for very small phones */
@media (max-width: 375px){
  .tab{ 
    padding: .45rem .7rem; 
    font-size: .8125rem;
  }
  .tabbar{ gap: .2rem; }
}

/* ===== Clean, minimal mobile view for By category ===== */

/* Group header summary: compact numbers */
.g-summary{
  display:flex;align-items:center;gap:.6rem;
  margin:.2rem 0 .6rem;
}
.g-summary .g-numbers{font-weight:600}
.g-summary .slash{opacity:.65}

/* Category row: two-line layout */
.group-row{
  display:grid;
  grid-template-columns: 1fr;
  grid-template-rows:auto auto;
  gap:.35rem;
  padding:.55rem .4rem;
  border-radius:10px;
}
.group-row:hover{background:#151f28}

.group-cat{
  display:flex;align-items:center;gap:.5rem;min-width:0;
}
.group-cat .cat-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.group-cat .cat-amount{margin-left:auto}
.group-cat .slash{opacity:.65}
.group-cat .del-btn{margin-left:.4rem}

/* Bar line + left text */
.group-bar{display:flex;align-items:center;gap:.55rem}
.group-bar .progress{height:6px;border-radius:999px;flex:1;min-width:120px}
.group-bar .left{white-space:nowrap}

/* --- Mobile polish --- */
@media (max-width: 430px){
  /* single column cards already handled earlier */
  .group-block{padding:.8rem;border-radius:14px}
  .group-block h3{font-size:1rem;margin-bottom:.35rem}
  .g-summary{margin:.1rem 0 .4rem}
  .g-summary .g-numbers{font-weight:600}
  .group-cat .cat-amount{font-size:.92rem}
  .group-bar .progress{height:5px;min-width:0}
  .group-bar .left{font-size:.85rem}

  /* hide the noisy delete buttons on rows — keep long-press on desktop */
  .group-cat .del-btn{display:none}

  /* badges smaller */
  .badge{padding:.1rem .4rem;font-size:.72rem}
}

/* Overscroll affordance for narrow screens */
#byCatGrouped{overscroll-behavior:contain}

/* Optional: reduce motion on progress fills for perf on low-end mobiles */
@media (prefers-reduced-motion: reduce){
  .progress .fill{transition:none}
}

/* --- Mobile: stack groups, show full names --- */

/* Keep 2 cols on tablets, but switch to 1 col on phones */
@media (max-width: 820px){
  #byCatGrouped,
  #budgetsGrouped,
  .group-grid{
    grid-template-columns: 1fr;      /* stack groups */
    gap: .9rem;
    padding-inline: .9rem;
  }
}

/* Let long category names wrap instead of ellipses */
@media (max-width: 430px){
  .group-cat .cat-name{
    white-space: normal;              /* allow wrapping */
    overflow: visible;
    text-overflow: clip;
  }
  .group-row{
    grid-template-columns: 1fr;       /* enforce single-line numbers below */
    align-items: flex-start;
  }
  .group-bar .progress{min-width: 0; width: 100%;}
}

.chart-tooltip {
  position: absolute;
  pointer-events: none;
  background: rgba(15,22,28,.95);
  border: 1px solid #22303a;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
  color: #d8e2ea;
  transform: translate(-50%, -8px);
  white-space: nowrap;
  z-index: 10;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.chart-bar:hover { outline: 1px solid #2b8a3e33; }



/* =========================================== */
/* ===== Mobile layout for Transactions (<= 820px) ===== */
@media (max-width: 820px) {
  /* Make the table render as tidy cards */
  #viewTransactions thead { display: none; }
  #viewTransactions table { width: 100%; border: 0; }
  #viewTransactions tbody { display: block; }
  #viewTransactions tbody tr {
    display: block;
    margin: 10px 0 14px;
    padding: 12px;
    border: 1px solid #22303a;
    border-radius: 10px;
    background: #0f151c; /* matches your theme */
  }

  /* Each cell shows a small label on the left + the value on the right */
  #viewTransactions td {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
  }
  #viewTransactions td::before {
    content: '';
    color: #9fb0bd;
    font-size: 12px;
    min-width: 110px;            /* label column width */
    flex: 0 0 110px;
  }
  #viewTransactions td:nth-child(1)::before { content: 'Date'; }
  #viewTransactions td:nth-child(2)::before { content: 'Type'; }
  #viewTransactions td:nth-child(3)::before { content: 'Category / Source'; }
  #viewTransactions td:nth-child(4)::before { content: 'Sub'; }
  #viewTransactions td:nth-child(5)::before { content: 'Amount'; }
  #viewTransactions td:nth-child(6)::before { content: 'Note'; }
  #viewTransactions td:nth-child(7)::before { content: 'Actions'; }

  /* Keep amounts/actions tight on the right */
  #viewTransactions td .right,
  #viewTransactions td.right { margin-left: auto; white-space: nowrap; }

  /* Long notes wrap nicely */
  #viewTransactions td:nth-child(6) { white-space: normal; word-break: break-word; }

  /* Smaller tags/buttons for phones */
  #viewTransactions .tag { font-size: 11px; padding: 2px 6px; }
  #viewTransactions .btn-ghost.tiny,
  #viewTransactions .btn-danger.tiny { padding: 4px 8px; margin-left: 6px; }

  /* Filters: stack neatly */
  #txFilterBar .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: center;
  }
  #txFilterBar label { font-size: 11px; color: #9fb0bd; }
  #txFilterBar input,
  #txFilterBar select { width: 100%; }
  #txFilterBar .grow { display: none; }
  #txFilterBar #txClearFilters { grid-column: 1 / -1; justify-self: end; }
}

/* ================================================== */
/* =========================
   Banks — mobile layouts
   ========================= */
@media (max-width: 820px) {
  /* Make the transfer box look like a proper mobile form */
  #transferBox {
    background: #0f151c;
    border: 1px solid #22303a;
    border-radius: 12px;
    padding: 12px;
  }

  /* Stack rows and give inputs breathing room */
  #transferBox .row {
    display: grid;
    gap: 10px;
  }

  /* Row 1: stack From/To and their selects vertically */
  #transferBox .row:first-child {
    grid-template-columns: 1fr;     /* single column: label → selects */
  }
  #transferBox .row:first-child .grow { display: none; } /* hide the spacer */
  #transferBox .row:first-child label.tiny { margin-top: 4px; opacity: .85; }

  /* Row 2: amount + date side-by-side, then note + button full width */
  #transferBox .row:nth-child(2) {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: minmax(44px, auto);
  }
  #transferBox #trAmount,
  #transferBox #trDate { min-height: 44px; }
  #transferBox #trNote { grid-column: 1 / -1; min-height: 44px; }
  #transferBox #btnDoTransfer {
    grid-column: 1 / -1;
    min-height: 46px;
    width: 100%;
  }

  /* Inputs feel tappable on iOS (prevents zoom) */
  #transferBox input,
  #transferBox select {
    width: 100%;
    min-height: 44px;
    font-size: 16px;
    border-radius: 10px;
  }

  /* “Add account” sheet: tidy 2-column grid with full-width main fields */
  #addAccountDetails[open] .controls .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  #bankNewOwner,
  #bankNewName {
    grid-column: 1 / -1;   /* full width */
    min-height: 44px;
  }
  #bankNewIcon { min-height: 44px; }
  #addAccountDetails label.tiny {
    display: flex; align-items: center; gap: 8px;
  }
  #btnAddBank {
    grid-column: 1 / -1;
    min-height: 46px;
    width: 100%;
  }
}
/* ===== MOBILE FAB + BOTTOM SHEET POLISH (override) ===== */
@media (max-width: 820px){

  /* Hide FAB completely - using hamburger menu instead */
  #fabWrap {
    display: none !important;
  }

  /* Respect notches / home indicator */
  #fabWrap{
    position: fixed;
    right: calc(16px + env(safe-area-inset-right));
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 90;
  }

  /* Main + button */
  #fabMain{
    width: 64px; height: 64px; border-radius: 999px;
    display: grid; place-items: center;
    background: #2fcf7a; color:#072213; font-size:30px; font-weight:900;
    border: 1px solid #1a2c23;
    box-shadow: 0 14px 28px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25);
    transition: transform .18s ease, opacity .18s ease, filter .18s ease;
    -webkit-tap-highlight-color: transparent;
  }
  #fabMain:active{ transform: scale(.96); filter: brightness(.95); }

  /* Hide the + when the sheet is open so it doesn’t sit on top */
  #fabWrap.open #fabMain{
    opacity: 0; transform: scale(.9); pointer-events: none;
  }

  /* Dimmed backdrop */
  #fabBackdrop{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.35); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity .18s ease; z-index: 80;
  }
  #fabWrap.open #fabBackdrop{ opacity: 1; pointer-events: auto; }

  /* Bottom sheet */
  #fabSheet{
    position: fixed; left: 0; right: 0; bottom: -100%;
    z-index: 85;
    background: #0f151c; border-top: 1px solid #22303a;
    border-radius: 16px 16px 0 0;
    /* room for the home indicator */
    padding: 10px 14px calc(14px + env(safe-area-inset-bottom));
    box-shadow: 0 -16px 28px rgba(0,0,0,.40);
    max-height: min(78vh, 560px);
    overflow: auto;
    transition: bottom .22s ease;
  }
  #fabWrap.open #fabSheet{ bottom: 0; }

  /* Little grab-handle */
  #fabSheet::before{
    content:''; display:block; width:38px; height:4px;
    background:#2c3b46; border-radius:999px;
    margin:6px auto 10px;
  }

  /* Menu container */
  #fabMenu{
    padding: 0 2px;
  }

  /* Items inside the sheet */
  .fab-item{
    display:flex; align-items:center; gap:12px;
    padding:14px 16px; margin-top:10px;
    border:1px solid #1f2a33; border-radius:14px;
    background:#0b1218; color:#d8e2ea;
    font-size:15px; font-weight:500;
    transition: transform .12s ease, background .15s ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .fab-item:first-of-type{ margin-top: 12px; }
  .fab-item .mini{ font-size:12px; color:#9fb0bd; }
  .fab-item:active{ transform: scale(.98); background: #12191f; }

  /* Title row in the sheet */
  #fabSheet .fab-head{
    display:flex; align-items:center; justify-content:space-between;
    padding: 4px 4px 12px;
    border-bottom: 1px solid #1a2530;
    margin-bottom: 6px;
  }
  #fabSheet .fab-title{ 
    font-weight:600; 
    font-size:17px; 
    color:#d8e2ea;
  }
  #fabSheet .fab-close{
    border:0; background:transparent; color:#9fb0bd;
    font-size:26px; line-height:1; cursor:pointer;
    padding: 4px 8px;
    border-radius: 8px;
    transition: background .15s ease, color .15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  #fabSheet .fab-close:active{
    background: #1a2530;
    color: #d8e2ea;
  }
}

/* FAB drag polish (mobile only) */
@media (max-width: 820px){
  #fabWrap.dragging { transition: none; }
  #fabWrap.dragging #fabMain { transition: none; }
}
/* ========================================== */

/* ==== Auth page tweaks ==== */
.auth-card{max-width:420px;margin:6rem auto}
.btn-google{
  width:100%;display:flex;align-items:center;justify-content:center;gap:.6rem;
  background:#fff;color:#111;border:1px solid #e5e7eb;border-radius:10px;
  min-height:44px;font-weight:600;
}
.btn-google:hover{filter:brightness(.98)}

.google-logo {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.divider{
  position:relative;text-align:center;color:#a3acb6;font-size:.9rem;margin:14px 0;
}
.divider::before,.divider::after{
  content:"";position:absolute;top:50%;width:40%;height:1px;background:#23303b;
}
.divider::before{left:0}.divider::after{right:0}
.err-text{color:#ff9da0;margin-top:.25rem;display:block}
input.error{border-color:#d94d4d;box-shadow:0 0 0 2px #d94d4d22}

/* Auth layout polish */
#loginView { display:grid; place-items:center; min-height:100vh; }
#loginView .auth-card { width:min(420px, 92vw); margin:0 auto; }
#loginView .section { border:none; }
#loginView input, #loginView button { width:100%; }
#loginView .divider { margin:14px 0; }

/* User Profile Section in Header */
.user-profile-section {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.user-profile-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.875rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease;
}

.user-profile-info:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.user-avatar-container {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.user-photo-header {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.user-initial-header {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
}

.user-name-header {
  font-size: 0.9rem;
  font-weight: 600;
  color: #e1e7ef;
  white-space: nowrap;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sign out button */
.signout-btn {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  flex-shrink: 0;
}

.signout-icon {
  display: none; /* hidden on desktop */
  font-size: 1.2rem;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .user-profile-section {
    gap: 0.5rem;
  }
  
  .user-profile-info {
    padding: 0.4rem 0.625rem;
    gap: 0.5rem;
  }
  
  .user-avatar-container {
    width: 32px;
    height: 32px;
  }
  
  .user-name-header {
    font-size: 0.85rem;
    max-width: 100px;
  }
}

/* On phones: show only the icon */
@media (max-width: 680px) {
  .signout-text { display: none; }
  .signout-icon { display: inline; }
  
  .user-profile-info {
    padding: 0.4rem 0.625rem;
    gap: 0.5rem;
  }
  
  .user-avatar-container {
    width: 28px;
    height: 28px;
  }
  
  .user-name-header {
    font-size: 0.8rem;
    max-width: 120px;
  }
}


/* Phone polish for login */
#loginView { display:grid; place-items:center; min-height:100vh; padding:1rem; }
#loginView .auth-card { width:100%; max-width:380px; margin:0; border-radius:14px; }
#loginView .section { padding:1rem 1.1rem; border:none; }
#loginView input, #loginView button { width:100%; }
#loginView .divider { margin:12px 0; }

tfoot#txTotals tr.totals td {
  border-top: 1px solid var(--surface-3);
  padding-top: .5rem;
}



/* ===== Transactions > Totals (mobile-friendly) ===== */
tfoot#txTotals tr.totals td {
  border-top: 1px solid var(--surface-3);
  background: color-mix(in oklab, var(--surface-1) 70%, transparent);
  padding: .75rem 1rem;
}

/* Make the totals cell act like a responsive grid */
tfoot#txTotals tr.totals td.right {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 12rem)); /* desktop: 3 boxes */
  justify-content: end; /* keep to the right on wide screens */
  gap: .5rem;
  text-align: right;
}

/* Each line (Income/Expenses/Net) becomes a “pill” */
tfoot#txTotals tr.totals td.right > div {
  padding: .5rem .75rem;
  border: 1px solid var(--surface-3);
  border-radius: 10px;
  background: color-mix(in oklab, var(--surface-2) 85%, transparent);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;      /* prevent awkward wraps on amounts */
}

/* Emphasize Net */
tfoot#txTotals tr.totals td.right > div:last-child {
  font-weight: 700;
  border-width: 2px;
}

/* Compact screens: stack full-width, left-align for readability */
@media (max-width: 720px) {
  tfoot#txTotals tr.totals td.right {
    grid-template-columns: 1fr;  /* stack */
    justify-content: stretch;
    text-align: left;
  }
  tfoot#txTotals tr.totals td.right > div {
    white-space: normal;         /* allow wrapping if needed */
  }
}

/* Extra-small screens: slightly smaller text to avoid wrapping */
@media (max-width: 360px) {
  tfoot#txTotals tr.totals td.right > div {
    font-size: .95rem;
  }
}

@media (max-width: 720px) {
  tfoot#txTotals td::before {
    content: none !important;
  }
}

/* =========================================================
   Transactions — TOTALLY SCOPED totals styling only
   (won't affect any other part of the table)
   ========================================================= */

/* 1) Never show mobile card labels on the totals cells */
@media (max-width: 820px){
  #viewTransactions tfoot#txTotals tr.totals > td::before { content: none !important; }
}

/* 2) Base look for the two totals cells ONLY */
#viewTransactions tfoot#txTotals tr.totals > td {
  border-top: 1px solid var(--line);
  background: #121a22;
}
#viewTransactions tfoot#txTotals tr.totals > td:first-child {
  font-weight: 700;
  color: #cfd8e3;
  padding: 8px 10px 4px;
  text-align: center;
  letter-spacing: .02em;
}

/* 3) Values cell padding + wrap control (no layout change elsewhere) */
#viewTransactions tfoot#txTotals tr.totals > td.right {
  padding: 10px 12px;
  text-align: right;
  overflow-wrap: anywhere; /* keep long amounts from overflowing */
}

/* 4) If your totals cell contains child <div>s, lay them out neatly.
      This uses :has() so it ONLY triggers when those divs exist.
      (No impact on plain-text totals.) */
#viewTransactions tfoot#txTotals tr.totals > td.right:has(> div) {
  /* desktop: three tidy pills */
  display: grid;
  grid-template-columns: repeat(3, max-content);
  justify-content: end;
  align-items: center;
  gap: 10px 14px;
  text-align: right;
}
#viewTransactions tfoot#txTotals tr.totals > td.right:has(> div) > div {
  display: inline-flex;
  align-items: center;
  justify-content: space-between; /* label left, value right */
  gap: 12px;
  padding: 10px 12px;
  background: #0f151c;
  border: 1px solid #22303a;
  border-radius: 10px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
#viewTransactions tfoot#txTotals tr.totals > td.right:has(> div) > div:last-child {
  background: #102017;
  border-color: #2b3a2f;
  font-weight: 700;
}
#viewTransactions tfoot#txTotals tr.totals > td.right:has(> div) > div strong {
  font-weight: 800;
}

/* 5) Responsive only for the totals cell (with divs) */
@media (max-width: 900px){
  #viewTransactions tfoot#txTotals tr.totals > td.right:has(> div){
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    text-align: left;
  }
}
@media (max-width: 600px){
  #viewTransactions tfoot#txTotals tr.totals > td:first-child{
    text-align: left;
    padding-left: 12px;
  }
  #viewTransactions tfoot#txTotals tr.totals > td.right:has(> div){
    grid-template-columns: 1fr;     /* stack on phones */
    gap: 8px;
    text-align: left;
  }
  #viewTransactions tfoot#txTotals tr.totals > td.right:has(> div) > div{
    white-space: normal;            /* allow wrap on tiny screens */
  }
}

/* ===== Admin Panel Styles ===== */
.admin-header-section {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  border-radius: 16px;
  padding: 28px;
  margin-bottom: 24px;
  border: 1px solid rgba(148, 163, 184, 0.1);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.admin-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.admin-title-content {
  flex: 1;
}

.admin-title {
  font-size: 2rem;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-description {
  color: #94a3b8;
  font-size: 1rem;
  margin: 0;
}

.admin-subtitle {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-size: 0.85rem;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.admin-header-actions {
  display: flex;
  gap: 12px;
}

.refresh-users-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.95rem;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.refresh-users-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}

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

.refresh-users-btn.spinning .refresh-icon {
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.admin-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.admin-stat-card {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  border: 1px solid rgba(148, 163, 184, 0.1);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s ease;
}

.admin-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  border-color: rgba(148, 163, 184, 0.2);
}

.stat-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.stat-icon.users {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.stat-icon.active {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.stat-icon.data {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 1.75rem;
  font-weight: 700;
  color: #f1f5f9;
  margin-bottom: 4px;
  line-height: 1;
}

.stat-label {
  font-size: 0.875rem;
  color: #94a3b8;
  line-height: 1.2;
}

.admin-users-section {
  background: rgba(30, 41, 59, 0.4);
  border-radius: 16px;
  padding: 28px;
  border: 1px solid rgba(148, 163, 184, 0.1);
}

.admin-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.admin-section-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #f1f5f9;
  margin: 0;
}

.admin-search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 10px;
  padding: 10px 16px;
  min-width: 280px;
}

.admin-search-box svg {
  color: #64748b;
  flex-shrink: 0;
}

.admin-search-box input {
  background: transparent;
  border: none;
  color: #f1f5f9;
  font-size: 0.95rem;
  outline: none;
  flex: 1;
  min-width: 0;
}

.admin-search-box input::placeholder {
  color: #64748b;
}

.admin-users-grid {
  display: grid;
  gap: 16px;
}

.admin-user-card {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(51, 65, 85, 0.6) 100%);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 14px;
  padding: 22px;
  transition: all 0.3s ease;
}

.admin-user-card.recent-user {
  border-color: rgba(16, 185, 129, 0.3);
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(16, 185, 129, 0.05) 100%);
}

.admin-user-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
  border-color: rgba(148, 163, 184, 0.3);
}

.user-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
  gap: 16px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.user-avatar {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.user-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-avatar-text, .user-avatar-fallback {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.3rem;
}

.user-details {
  flex: 1;
  min-width: 0;
}

.user-name {
  font-weight: 600;
  color: #f1f5f9;
  font-size: 1.05rem;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.active-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.user-email {
  color: #94a3b8;
  font-size: 0.9rem;
  margin-bottom: 4px;
  word-break: break-all;
}

.user-id {
  color: #64748b;
  font-size: 0.8rem;
  font-family: 'Courier New', monospace;
}

.user-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.admin-action-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.admin-action-btn.view {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.admin-action-btn.view:hover {
  background: rgba(59, 130, 246, 0.25);
  color: #60a5fa;
  transform: translateY(-2px);
}

.admin-action-btn.delete {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.admin-action-btn.delete:hover {
  background: rgba(239, 68, 68, 0.25);
  color: #f87171;
  transform: translateY(-2px);
}

.user-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.user-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: rgba(15, 23, 42, 0.4);
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.1);
  transition: all 0.2s ease;
}

.user-stat:hover {
  background: rgba(15, 23, 42, 0.6);
  border-color: rgba(148, 163, 184, 0.2);
}

.stat-icon-small {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-details {
  flex: 1;
  min-width: 0;
}

.user-stat .stat-value {
  font-size: 1rem;
  font-weight: 600;
  color: #f1f5f9;
  margin-bottom: 2px;
  line-height: 1.2;
}

.user-stat .stat-label {
  font-size: 0.75rem;
  color: #94a3b8;
  line-height: 1.2;
}

.loading-users {
  text-align: center;
  padding: 60px 20px;
  color: #94a3b8;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  font-size: 1.05rem;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(59, 130, 246, 0.2);
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.no-users-message, .error-message {
  text-align: center;
  padding: 60px 20px;
}

.no-users-icon {
  margin: 0 auto 20px;
  color: #475569;
  opacity: 0.6;
}

.error-icon {
  margin: 0 auto 20px;
  color: #ef4444;
}

.no-users-title, .error-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #f1f5f9;
  margin-bottom: 10px;
}

.no-users-subtitle, .error-subtitle {
  color: #94a3b8;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Mobile Admin Panel Adjustments */
@media (max-width: 768px) {
  .admin-header-section {
    padding: 20px;
  }
  
  .admin-title-row {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  
  .admin-title {
    font-size: 1.5rem;
  }
  
  .admin-description {
    font-size: 0.9rem;
  }
  
  .refresh-users-btn {
    width: 100%;
    justify-content: center;
  }
  
  .admin-stats {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .admin-stat-card {
    padding: 18px;
  }
  
  .admin-users-section {
    padding: 20px;
  }
  
  .admin-section-header {
    flex-direction: column;
    align-items: stretch;
  }
  
  .admin-search-box {
    min-width: 100%;
  }
  
  .admin-user-card {
    padding: 18px;
  }
  
  .user-card-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .user-actions {
    justify-content: flex-end;
  }
  
  .user-stats {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  
  .stat-icon-small {
    width: 28px;
    height: 28px;
  }
  
  .stat-icon-small svg {
    width: 12px;
    height: 12px;
  }
  
  .user-stat .stat-value {
    font-size: 0.9rem;
  }
  
  .user-stat .stat-label {
    font-size: 0.7rem;
  }
}

/* ===== Review Tab (CSV Import Preview) ===== */
#viewReview {
  padding: 1.5rem;
}

#viewReview .section {
  margin-bottom: 1.5rem;
}

/* Enhanced table for statement preview */
#viewReview table {
  width: 100%;
  background: #131a23;
  border: 1px solid #25313b;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#viewReview thead {
  background: linear-gradient(to bottom, #1d2936 0%, #18232e 100%);
  position: sticky;
  top: 0;
  z-index: 3;
}

#viewReview thead th {
  padding: 1rem 0.875rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: #bcc6d1;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  border-bottom: 2px solid #2a3642;
}

#viewReview tbody tr {
  transition: background-color 0.2s ease;
  border-bottom: 1px solid #1f2a33;
}

#viewReview tbody tr:hover {
  background: #151f28;
}

#viewReview tbody tr:last-child {
  border-bottom: none;
}

#viewReview tbody td {
  padding: 0.875rem;
  vertical-align: middle;
  font-size: 0.9375rem;
}

/* Right-aligned columns */
#viewReview td.right {
  text-align: right;
}

/* Date styling */
#viewReview td .tiny.muted {
  color: #9fb0bd;
  font-size: 0.8125rem;
  font-family: 'Segoe UI', system-ui, sans-serif;
}

/* Amount styling */
#viewReview td.right {
  font-weight: 600;
  color: #e1e7ef;
  font-variant-numeric: tabular-nums;
}

/* Form controls in table cells */
#viewReview select,
#viewReview input[type="text"] {
  width: 100%;
  min-width: 120px;
  padding: 0.5rem 0.625rem;
  background: #0f151c;
  border: 1px solid #2a3642;
  border-radius: 6px;
  color: #e1e7ef;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

#viewReview select:focus,
#viewReview input[type="text"]:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 2px rgba(61, 214, 140, 0.15);
  background: #131a23;
}

#viewReview select:hover,
#viewReview input[type="text"]:hover {
  border-color: #3a4652;
}

/* Checkbox styling in table */
#viewReview input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--accent);
}

#viewReview label.tiny {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: #bcc6d1;
  cursor: pointer;
  white-space: nowrap;
}

/* Action buttons at bottom */
#viewReview .controls {
  background: #131a23;
  border: 1px solid #25313b;
  border-radius: 8px;
  padding: 1rem;
}

#viewReview .controls .row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

#viewReview .controls .grow {
  flex: 1;
}

/* Empty state when no data */
#viewReview table:empty::after {
  content: 'No transactions to review. Import a CSV file to get started.';
  display: block;
  padding: 3rem 2rem;
  text-align: center;
  color: #6b7280;
  font-size: 0.9375rem;
}

/* Info message styling */
#viewReview .info-message {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: #1a2936;
  border: 1px solid #2a4158;
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  margin-bottom: 1.5rem;
  color: #bcc6d1;
  font-size: 0.9375rem;
}

#viewReview .info-message::before {
  content: 'ℹ️';
  font-size: 1.25rem;
  flex-shrink: 0;
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
  #viewReview {
    padding: 1rem;
  }

  #viewReview table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 6px;
  }

  #viewReview thead {
    display: table-header-group;
  }

  #viewReview thead th {
    padding: 0.75rem 0.625rem;
    font-size: 0.8125rem;
    white-space: nowrap;
  }

  #viewReview tbody td {
    padding: 0.75rem 0.625rem;
    font-size: 0.875rem;
  }

  #viewReview select,
  #viewReview input[type="text"] {
    min-width: 100px;
    padding: 0.4rem 0.5rem;
    font-size: 0.8125rem;
  }

  #viewReview .controls {
    padding: 0.875rem;
  }

  #viewReview .controls .row {
    gap: 0.5rem;
  }

  #viewReview .info-message {
    padding: 0.875rem;
    font-size: 0.875rem;
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  #viewReview {
    padding: 0.75rem;
  }

  #viewReview table {
    font-size: 0.8125rem;
  }

  #viewReview thead th {
    padding: 0.625rem 0.5rem;
    font-size: 0.75rem;
  }

  #viewReview tbody td {
    padding: 0.625rem 0.5rem;
  }

  #viewReview select,
  #viewReview input[type="text"] {
    min-width: 90px;
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
  }

  #viewReview .controls {
    padding: 0.75rem;
  }

  #viewReview .btn-ghost.tiny,
  #viewReview .btn-primary {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    min-height: 38px;
  }
}

/* ===== Debts Styles ===== */

/* Debts Header */
.debts-header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.debts-title-section {
  text-align: center;
}

.debts-main-title {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.debts-subtitle {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin: 0;
  opacity: 0.8;
}

/* Summary Cards Grid */
.debts-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.debt-summary-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.debt-summary-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  transition: width 0.3s ease;
}

.debt-summary-card.borrowed::before {
  background: linear-gradient(180deg, #ff6b6b 0%, #ee5a52 100%);
}

.debt-summary-card.lent::before {
  background: linear-gradient(180deg, #4facfe 0%, #00f2fe 100%);
}

.debt-summary-card.net.positive::before {
  background: linear-gradient(180deg, #43e97b 0%, #38f9d7 100%);
}

.debt-summary-card.net.negative::before {
  background: linear-gradient(180deg, #fa709a 0%, #fee140 100%);
}

.debt-summary-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.2);
}

.debt-summary-card:hover::before {
  width: 100%;
  opacity: 0.1;
}

.summary-icon-wrapper {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.summary-icon-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.15;
  border-radius: inherit;
}

.summary-icon-wrapper.borrowed {
  background: rgba(255, 107, 107, 0.15);
  color: #ff6b6b;
}

.summary-icon-wrapper.borrowed::before {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
}

.summary-icon-wrapper.lent {
  background: rgba(79, 172, 254, 0.15);
  color: #4facfe;
}

.summary-icon-wrapper.lent::before {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.summary-icon-wrapper.positive {
  background: rgba(67, 233, 123, 0.15);
  color: #43e97b;
}

.summary-icon-wrapper.positive::before {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.summary-icon-wrapper.negative {
  background: rgba(250, 112, 154, 0.15);
  color: #fa709a;
}

.summary-icon-wrapper.negative::before {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.summary-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.summary-content {
  flex: 1;
  min-width: 0;
}

.summary-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 500;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.summary-amount {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 0.25rem;
}

.summary-amount.positive {
  color: #43e97b;
}

.summary-amount.negative {
  color: #fa709a;
}

.summary-meta {
  font-size: 0.8rem;
  color: var(--text-secondary);
  opacity: 0.7;
}

.summary-subtitle {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

/* Debts Sections */
.debts-sections {
  display: grid;
  gap: 2rem;
}

.debts-section {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-wrap: wrap;
  gap: 1rem;
}

.debts-section-title {
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text);
}

.section-icon {
  font-size: 1.5rem;
  line-height: 1;
}

.section-stats {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.stat-badge {
  background: rgba(255, 255, 255, 0.08);
  padding: 0.4rem 0.9rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-badge.paid {
  background: rgba(67, 233, 123, 0.15);
  color: #43e97b;
  border-color: rgba(67, 233, 123, 0.3);
}

/* Debts List */
.debts-list {
  display: grid;
  gap: 1rem;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--text-secondary);
}

.empty-icon {
  font-size: 3.5rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.empty-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--text);
}

.empty-subtitle {
  font-size: 0.9rem;
  opacity: 0.7;
}

/* Debt Cards */
.debt-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
}

/* Person Debt Group Styles */
.person-debt-group {
  margin-bottom: 2rem;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(59, 130, 246, 0.05) 100%);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 16px;
  overflow: hidden;
}

.person-debt-group.all-paid {
  opacity: 0.7;
  background: linear-gradient(135deg, rgba(100, 100, 100, 0.05) 0%, rgba(80, 80, 80, 0.05) 100%);
  border-color: rgba(150, 150, 150, 0.2);
}

.person-group-header {
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(16, 185, 129, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  transition: background 0.2s ease;
  position: relative;
}

.person-group-header:hover {
  background: rgba(0, 0, 0, 0.4);
}

.person-group-header .expand-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
  color: var(--muted);
}

.person-debt-group.collapsed .person-group-header .expand-icon {
  transform: rotate(-90deg);
}

.person-debt-group.collapsed .person-group-header {
  border-bottom: none;
}

.person-debt-group.collapsed .person-debts-list {
  display: none;
}

.person-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.person-avatar-large {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.person-avatar-large.borrowed {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.person-avatar-large svg {
  color: white;
}

.person-summary h4.person-name-large {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
}

.person-stats {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.3rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.person-stats .stat-item {
  color: var(--text);
}

.person-stats .outstanding-count {
  color: #10b981;
  font-weight: 600;
}

.person-stats .stat-separator {
  opacity: 0.5;
}

.person-totals {
  text-align: right;
}

.person-totals .total-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin-bottom: 0.3rem;
}

.person-totals .total-amount {
  font-size: 1.8rem;
  font-weight: 700;
  color: #10b981;
}

.person-totals .total-amount.paid {
  color: var(--muted);
  text-decoration: line-through;
}

.person-totals .total-sublabel {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.2rem;
}

.person-debts-list {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.person-debts-list .debt-card {
  margin: 0;
}

.debt-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
}

.debt-card.borrowed::before {
  background: linear-gradient(180deg, #ff6b6b 0%, #ee5a52 100%);
}

.debt-card.lent::before {
  background: linear-gradient(180deg, #4facfe 0%, #00f2fe 100%);
}

.debt-card.paid {
  opacity: 0.75;
  border-color: rgba(67, 233, 123, 0.3);
}

.debt-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.2);
}

.debt-card.paid-back {
  opacity: 0.7;
  border-color: var(--accent);
}

/* Debt Card Header */
.debt-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  background: rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  gap: 1rem;
  flex-wrap: wrap;
}

.debt-header-left {
  flex: 1;
  min-width: 0;
}

.debt-person-wrapper {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.person-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.person-avatar::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.15;
  border-radius: inherit;
}

.person-avatar.borrowed {
  background: rgba(255, 107, 107, 0.2);
  color: #ff6b6b;
  border: 2px solid rgba(255, 107, 107, 0.3);
}

.person-avatar.borrowed::before {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
}

.person-avatar.lent {
  background: rgba(79, 172, 254, 0.2);
  color: #4facfe;
  border: 2px solid rgba(79, 172, 254, 0.3);
}

.person-avatar.lent::before {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.person-details {
  flex: 1;
  min-width: 0;
}

.person-name {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.debt-date-small {
  font-size: 0.8rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  opacity: 0.8;
}

.debt-date-small svg {
  flex-shrink: 0;
}

.debt-header-right {
  flex-shrink: 0;
}

.debt-type-badge {
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
}

.debt-type-badge.borrowed {
  background: var(--danger-light);
  color: var(--danger);
}

.debt-type-badge.lent {
  background: var(--accent-light);
  color: var(--accent);
}

.debt-status-badge {
  padding: 0.4rem 0.9rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid;
  transition: all 0.2s ease;
}

.debt-status-badge.outstanding {
  background: rgba(255, 193, 7, 0.15);
  color: #ffc107;
  border-color: rgba(255, 193, 7, 0.3);
}

.debt-status-badge.paid-back {
  background: rgba(67, 233, 123, 0.15);
  color: #43e97b;
  border-color: rgba(67, 233, 123, 0.3);
}

/* Debt Card Body */
.debt-card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.debt-amount-section {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.debt-amount-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.debt-person {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  color: var(--text);
}

.debt-icon {
  font-size: 1.25rem;
}

.debt-person-name {
  font-weight: 600;
}

.debt-amount {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

.debt-date {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.date-label {
  color: var(--muted);
  margin-right: 0.25rem;
}

.debt-note-section {
  display: flex;
  gap: 0.75rem;
  padding: 0.875rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  border-left: 3px solid rgba(255, 255, 255, 0.2);
}

.note-icon {
  flex-shrink: 0;
  color: var(--text-secondary);
  opacity: 0.6;
  margin-top: 0.125rem;
}

.debt-note {
  flex: 1;
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
  word-break: break-word;
  padding: 0.75rem;
  background: var(--card-elevated);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
}

.debt-linked {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: #4facfe;
  padding: 0.625rem 1rem;
  margin-top: 0.5rem;
  background: rgba(79, 172, 254, 0.1);
  border-radius: 8px;
  border: 1px solid rgba(79, 172, 254, 0.2);
}

.debt-linked svg {
  flex-shrink: 0;
}

.debt-linked-tx {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

.debt-paid-info {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  background: rgba(67, 233, 123, 0.1);
  border-radius: 10px;
  border: 1px solid rgba(67, 233, 123, 0.2);
  color: #43e97b;
  font-size: 0.9rem;
  font-weight: 500;
}

.debt-paid-info svg {
  flex-shrink: 0;
}

.debt-paid-date {
  font-size: 0.8125rem;
  color: var(--accent);
  font-weight: 600;
  font-style: italic;
}

/* Debt Card Actions */
.debt-card-actions {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  background: rgba(0, 0, 0, 0.15);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.debt-action-btn {
  flex: 1;
  padding: 0.75rem 1.25rem;
  border: none;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.debt-action-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.debt-action-btn.mark-paid {
  background: rgba(67, 233, 123, 0.15);
  color: #43e97b;
  border: 1px solid rgba(67, 233, 123, 0.3);
}

.debt-action-btn.mark-paid::before {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.debt-action-btn.mark-paid:hover {
  background: rgba(67, 233, 123, 0.25);
  border-color: rgba(67, 233, 123, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(67, 233, 123, 0.3);
}

.debt-action-btn.mark-paid:hover::before {
  opacity: 0.1;
}

.debt-action-btn.delete {
  background: rgba(255, 107, 107, 0.15);
  color: #ff6b6b;
  border: 1px solid rgba(255, 107, 107, 0.3);
}

.debt-action-btn.delete::before {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
}

.debt-action-btn.delete:hover {
  background: rgba(255, 107, 107, 0.25);
  border-color: rgba(255, 107, 107, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
}

.debt-action-btn.delete:hover::before {
  opacity: 0.1;
}

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

.debt-action-btn svg {
  flex-shrink: 0;
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
  .debts-main-title {
    font-size: 1.6rem;
  }
  
  .debts-summary {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .debt-summary-card {
    padding: 1.25rem;
  }
  
  .summary-icon-wrapper {
    width: 48px;
    height: 48px;
  }
  
  .summary-amount {
    font-size: 1.5rem;
  }
  
  .section-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .debts-section-title {
    font-size: 1.2rem;
  }
  
  .debt-card-header {
    padding: 1rem 1.25rem;
    flex-direction: column; /* stack to avoid overlap */
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .person-avatar {
    width: 40px;
    height: 40px;
  }
  
  .person-name {
    font-size: 1rem;
    white-space: normal;            /* allow wrapping */
    word-break: break-word;
  }

  .debt-header-right {
    width: 100%;
  }

  .debt-status-badge {
    align-self: flex-start;
    margin-top: 0.1rem;
  }
  
  .debt-card-body {
    padding: 1.25rem;
  }
  
  .debt-amount {
    font-size: 1.75rem;
  }
  
  .debt-card-actions {
    flex-direction: column;
    padding: 0.875rem 1.25rem;
  }
  
  .debt-action-btn {
    width: 100%;
  }

  /* Mobile-only: hide connected bank integration card under Banks & Accounts */
  #cardBanks #connectedBankIntegration { display: none !important; }
}

/* Extra-small screens: tighten spacing */
@media (max-width: 480px) {
  .debt-summary-card { padding: 1rem; }
  .summary-amount { font-size: 1.25rem; }
  .debt-amount { font-size: 1.5rem; }
  .debt-card-actions { flex-direction: column; }
  .debt-action-btn { width: 100%; justify-content: center; }
}

/* =====================================
  ONBOARDING MODAL STYLES
  ===================================== */
 
/* Payments list on Debt cards */
.debt-payments { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px dashed rgba(255,255,255,0.1); }
.debt-payments .payments-header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .25rem; }
.debt-payments .ph-left { display: inline-flex; align-items: center; gap: .4rem; }
.debt-payments .badge { background: rgba(79, 172, 254, 0.15); color: #4facfe; border: 1px solid rgba(79,172,254,0.3); font-size: 11px; padding: 2px 6px; border-radius: 999px; }
.debt-payments .ph-right { font-size: .85rem; color: var(--text-secondary); display: inline-flex; align-items: center; gap: .5rem; }
.debt-payments .ph-right .paid { color: #43e97b; }
.debt-payments .ph-right .remaining { color: #ffc107; }
.debt-payments .payments-list { list-style: none; padding: 0; margin: .25rem 0 0; display: grid; gap: .25rem; }
.debt-payments .payment-item { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .9rem; background: rgba(0,0,0,0.15); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: .5rem .6rem; }
.debt-payments .payment-amount { font-weight: 600; color: var(--text); }
.debt-payments .payment-date { color: var(--text-secondary); font-size: .85rem; }
.debt-payments .payment-note { color: var(--text-secondary); font-style: italic; }
.debt-payments .payment-link { margin-left: auto; background: transparent; border: 1px solid rgba(79, 172, 254, 0.4); color: #4facfe; border-radius: 6px; padding: 2px 8px; cursor: pointer; font-size: .85rem; }
.debt-payments .payment-link:hover { background: rgba(79, 172, 254, 0.12); }

.debt-remaining { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--text-secondary); margin-top: .25rem; }
.debt-remaining .label { opacity: .85; }
.debt-remaining .value { font-weight: 700; color: #ffc107; }

/* Highlight target transaction row when navigating from Debts */
#viewTransactions tr.tx-highlight { 
  outline: 2px solid #ffc107; 
  background: rgba(255, 193, 7, 0.12);
  animation: txFlash 2s ease-out 1;
}
@keyframes txFlash {
  0% { background: rgba(255, 193, 7, 0.30); }
  70% { background: rgba(255, 193, 7, 0.12); }
  100% { background: transparent; }
}
 
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.onboarding-container {
  background: #0f1419;
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 16px;
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 2rem;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8);
  position: relative;
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.onboarding-step {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.onboarding-header {
  text-align: center;
}

.onboarding-header h2 {
  font-size: 1.75rem;
  margin: 0 0 0.5rem 0;
  color: var(--text);
}

.onboarding-header p {
  color: var(--muted);
  font-size: 0.95rem;
  margin: 0;
}

.onboarding-body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Fix dropdown backgrounds in onboarding */
.onboarding-container select {
  background-color: #1a202c !important;
  color: #e2e8f0 !important;
  border: 1px solid #334155;
  padding: 0.65rem;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2e8f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1.25rem;
  padding-right: 2.5rem;
}

.onboarding-container select:focus {
  outline: none;
  border-color: #4a90e2;
  background-color: #1a202c !important;
}

.onboarding-container select option {
  background-color: #1a202c !important;
  color: #e2e8f0 !important;
  padding: 0.65rem 0.5rem;
}

.onboarding-container select option:hover {
  background-color: #334155 !important;
  color: #e2e8f0 !important;
}

.onboarding-container select option:checked {
  background-color: #4a90e2 !important;
  color: white !important;
}

/* Browser-specific dropdown styling */
.onboarding-container select::-ms-expand {
  display: none;
}

.onboarding-container select optgroup {
  background-color: #1a202c !important;
  color: #e2e8f0 !important;
}

.onboarding-footer {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.onboarding-footer .btn-ghost {
  min-width: 100px;
}

.onboarding-footer .btn-primary {
  min-width: 120px;
}

.input-label {
  font-weight: 500;
  color: var(--text);
  margin-bottom: 0.5rem;
  display: block;
}

#onboardingUserName {
  width: 100%;
  padding: 0.75rem;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--text);
  transition: border-color 0.2s;
}

#onboardingUserName:focus {
  outline: none;
  border-color: var(--accent);
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.checkbox-item {
  display: flex;
  align-items: center;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--card-bg);
}

.checkbox-item:hover {
  border-color: var(--accent);
  background: rgba(74, 144, 226, 0.05);
}

.checkbox-item input[type="checkbox"] {
  margin-right: 0.5rem;
  cursor: pointer;
}

.checkbox-item label {
  cursor: pointer;
  user-select: none;
  flex: 1;
  font-size: 0.9rem;
}

.custom-input-section {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.input-with-button {
  display: flex;
  gap: 0.5rem;
}

.input-with-button input {
  flex: 1;
  padding: 0.65rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--text);
}

.input-with-button input:focus {
  outline: none;
  border-color: var(--accent);
}

.chips-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(74, 144, 226, 0.1);
  border: 1px solid var(--accent);
  border-radius: 20px;
  font-size: 0.85rem;
  color: var(--text);
}

.chip-remove {
  cursor: pointer;
  font-weight: bold;
  color: var(--muted);
  transition: color 0.2s;
}

.chip-remove:hover {
  color: var(--danger);
}

.bank-input-group {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.5rem;
  align-items: end;
}

.bank-input-group input,
.bank-input-group select {
  padding: 0.65rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--text);
}

.bank-input-group input:focus,
.bank-input-group select:focus {
  outline: none;
  border-color: var(--accent);
}

/* Style select dropdown options for dark theme */
.bank-input-group select option,
#onboardingModal select option {
  background: #1a202c !important;
  color: #e2e8f0 !important;
  padding: 0.5rem;
}

#onboardingModal select {
  background: #1a202c !important;
  color: #e2e8f0 !important;
  border: 1px solid #334155;
  padding: 0.65rem;
  border-radius: 6px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2e8f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1.25rem;
  padding-right: 2.5rem;
}

.checkbox-inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  grid-column: span 2;
}

.checkbox-inline input[type="checkbox"] {
  cursor: pointer;
}

.checkbox-inline span {
  font-size: 0.9rem;
  user-select: none;
}

.banks-list {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.bank-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  background: rgba(74, 144, 226, 0.05);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.bank-item-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.bank-item-icon {
  font-size: 1.5rem;
}

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

.bank-item-name {
  font-weight: 500;
  color: var(--text);
}

.bank-item-meta {
  font-size: 0.85rem;
  color: var(--muted);
}

.bank-item-remove {
  cursor: pointer;
  padding: 0.35rem 0.65rem;
  background: transparent;
  border: 1px solid var(--danger);
  border-radius: 4px;
  color: var(--danger);
  font-size: 0.85rem;
  transition: all 0.2s;
}

.bank-item-remove:hover {
  background: var(--danger);
  color: white;
}

.onboarding-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.progress-step {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--card-bg);
  border: 2px solid var(--border);
  color: var(--muted);
  transition: all 0.3s;
}

.progress-step.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  transform: scale(1.1);
}

.progress-step.completed {
  background: var(--success);
  border-color: var(--success);
  color: white;
}

.progress-line {
  width: 40px;
  height: 2px;
  background: var(--border);
  transition: background 0.3s;
}

.progress-line.completed {
  background: var(--success);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .onboarding-container {
    width: 95%;
    padding: 1.5rem;
    max-height: 95vh;
  }
  
  .onboarding-header h2 {
    font-size: 1.5rem;
  }
  
  .checkbox-grid {
    grid-template-columns: 1fr;
  }
  
  .bank-input-group {
    grid-template-columns: 1fr;
  }
  
  .checkbox-inline {
    grid-column: span 1;
  }
  
  .onboarding-footer {
    flex-direction: column-reverse;
  }
  
  .onboarding-footer .btn-ghost,
  .onboarding-footer .btn-primary {
    width: 100%;
    min-width: 0;
  }
  
  .onboarding-progress {
    gap: 0.35rem;
  }
  
  .progress-step {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
  }
  
  .progress-line {
    width: 25px;
  }
}

/* =====================================
   SIMPLIFIED SIDEBAR STYLES
   ===================================== */
.simple-add-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.input-with-button-simple {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

.input-with-button-simple input {
  flex: 1;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--text);
  font-size: 0.9rem;
}

.input-with-button-simple input:focus {
  outline: none;
  border-color: var(--accent);
}

.input-with-button-simple .btn-secondary {
  min-width: 40px;
  font-size: 1.25rem;
  font-weight: bold;
  padding: 0.5rem 0.75rem;
}

.bank-controls-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

.bank-controls-row select {
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--text);
  font-size: 0.9rem;
}

.bank-controls-row select:focus {
  outline: none;
  border-color: var(--accent);
}

.checkbox-simple {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.4rem 0;
}

.checkbox-simple input[type="checkbox"] {
  cursor: pointer;
  width: 16px;
  height: 16px;
}

.checkbox-simple span {
  font-size: 0.9rem;
  user-select: none;
  color: var(--text);
}

.input-label {
  font-weight: 500;
  color: var(--text);
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

/* Make sidebar accordions more compact */
.accordion summary {
  font-weight: 600;
  padding: 0.75rem 1rem;
}

@media (max-width: 768px) {
  .bank-controls-row {
    flex-direction: column;
  }
  
  .bank-controls-row select {
    width: 100%;
  }
}

/* ==================== Banking Integration Styles ==================== */

.banking-container {
  max-width: 900px;
  margin: 0 auto;
}

.banking-card {
  padding: 2rem;
  background: var(--card-bg);
  border-radius: 12px;
  border: 1px solid var(--border);
}

.banking-features {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.feature-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.feature-text strong {
  display: block;
  color: var(--text);
  margin-bottom: 0.25rem;
  font-size: 1rem;
}

.feature-text p {
  color: var(--muted-text);
  font-size: 0.9rem;
  margin: 0;
}

.btn-large {
  padding: 1rem 2rem;
  font-size: 1.1rem;
  font-weight: 600;
  width: 100%;
  margin-bottom: 1rem;
}

.text-center {
  text-align: center;
}

.banking-status {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.1), rgba(76, 175, 80, 0.05));
  border-radius: 8px;
  border: 1px solid rgba(76, 175, 80, 0.2);
  margin-bottom: 2rem;
}

.bank-connected-icon {
  font-size: 3rem;
  flex-shrink: 0;
}

.bank-info h3 {
  margin: 0 0 0.5rem 0;
  color: var(--text);
  font-size: 1.25rem;
}

.bank-info p {
  margin: 0;
  font-size: 0.9rem;
}

.banking-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.banking-actions button {
  flex: 1;
  min-width: 200px;
}

.sync-info {
  padding: 1rem;
  background: var(--hover-bg);
  border-radius: 6px;
  border-left: 3px solid var(--accent);
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.info-card {
  padding: 1.5rem;
  background: var(--card-bg);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.info-card h4 {
  margin: 0 0 1rem 0;
  color: var(--text);
  font-size: 1.1rem;
}

.info-card ol {
  margin: 0;
  padding-left: 1.5rem;
}

.info-card li {
  margin-bottom: 0.5rem;
  color: var(--muted-text);
}

.info-card p {
  margin: 0 0 0.75rem 0;
  line-height: 1.6;
}

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

/* Bank Connection Modal */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  display: none;
}

.modal[style*="display: block"] {
  display: flex !important;
}

.modal-content {
  background: #0f1419;
  border-radius: 16px;
  border: 1px solid rgba(16, 185, 129, 0.3);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8);
  position: relative;
  width: 100%;
  max-width: 600px;
}

.modal-large {
  max-width: 700px;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.5rem;
  color: var(--text);
}

.close-btn {
  background: none;
  border: none;
  font-size: 2rem;
  color: var(--muted-text);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s;
}

.close-btn:hover {
  background: var(--hover-bg);
  color: var(--text);
}

.modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
}

.search-box {
  margin-bottom: 1.5rem;
}

.search-box input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border: 2px solid var(--border);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--text);
  transition: border-color 0.2s;
}

.search-box input:focus {
  outline: none;
  border-color: var(--accent);
}

.bank-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.bank-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: all 0.2s;
}

.bank-item:hover {
  border-color: var(--accent);
  background: var(--hover-bg);
}

.bank-logo {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
  background: white;
  padding: 4px;
}

.bank-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bank-icon {
  font-size: 2rem;
}

.bank-info {
  flex: 1;
  min-width: 0;
}

.bank-name {
  font-weight: 600;
  color: var(--text);
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.bank-country {
  font-size: 0.85rem;
  color: var(--muted-text);
}

.btn-connect-bank {
  padding: 0.5rem 1.5rem;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.btn-connect-bank:hover:not(:disabled) {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

.btn-connect-bank:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.loading-banks {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  gap: 1rem;
}

.error-message {
  text-align: center;
  padding: 2rem;
}

.error-message p:first-child {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.error-message p {
  color: var(--muted-text);
  margin-bottom: 1.5rem;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .banking-card {
    padding: 1.5rem;
  }

  .feature-icon {
    font-size: 1.5rem;
  }

  .banking-status {
    flex-direction: column;
    text-align: center;
    padding: 1rem;
  }

  .banking-actions {
    flex-direction: column;
  }

  .banking-actions button {
    min-width: 100%;
  }

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

  .bank-item {
    flex-wrap: wrap;
  }

  .btn-connect-bank {
    width: 100%;
    margin-top: 0.5rem;
  }

  .modal-large {
    max-width: 95vw;
    margin: 1rem;
  }
}

@media (max-width: 480px) {
  .banking-features {
    gap: 1rem;
  }

  .feature-item {
    gap: 0.75rem;
  }

  .btn-large {
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
  }

  .modal-header {
    padding: 1rem;
  }

  .modal-header h2 {
    font-size: 1.25rem;
  }

  .modal-body {
    padding: 1rem;
  }
}
/* Theme Toggle Button */
.theme-toggle-btn {
  padding: 0.5rem 0.75rem !important;
  font-size: 1.2rem;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
}

.theme-toggle-btn:hover {
  background: var(--line);
  transform: scale(1.05);
}

/* Bank Integration Card in Sidebar */
.bank-integration-card {
  background: var(--card-elevated);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1rem;
  margin-bottom: 1rem;
}

.bank-integration-header {
  margin-bottom: 0.75rem;
}

.bank-connected-badge {
  display: inline-block;
  background: var(--success);
  color: white;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  margin-bottom: 0.5rem;
}

.bank-integration-header h4 {
  margin: 0.25rem 0;
  font-size: 1rem;
  color: var(--text);
}

.bank-integration-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.btn-sm {
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
}

.bank-integration-actions .btn-sm {
  flex: 1;
}

/* Onboarding Bank Options */
.bank-options-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid var(--line);
}

.bank-option-tab {
  background: none;
  border: none;
  color: var(--muted);
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}

.bank-option-tab:hover {
  color: var(--text-secondary);
}

.bank-option-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.bank-option-content {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Light theme specific adjustments */
body.light-theme .theme-toggle-btn:hover {
  background: var(--line);
}

body.light-theme .bank-integration-card {
  box-shadow: var(--shadow-sm);
}

/* ===== GLOBAL SEARCH MODAL ===== */
.search-modal {
  position: fixed;
  top: 0;
  right: 0;
  width: 500px;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 9999;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.search-modal-content {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: var(--bg);
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  animation: slideInRight 0.3s ease;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(400px);
    opacity: 0;
  }
}

.search-modal-header {
  padding: 1.5rem;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 1rem;
  align-items: center;
  background: var(--card-bg);
}

.search-input-wrapper {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.75rem 1rem;
}

.search-input-icon {
  font-size: 1.2rem;
  margin-right: 0.5rem;
}

.search-input-wrapper input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 1rem;
  color: var(--text);
  outline: none;
}

.search-input-wrapper input::placeholder {
  color: var(--muted);
}

.search-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}

.search-results {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.search-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
  color: var(--muted);
}

.search-placeholder-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.search-result-item {
  padding: 1rem;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.search-result-item:hover {
  border-color: var(--accent);
  background: var(--bg-hover);
  transform: translateX(4px);
}

.search-result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.search-result-type {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  background: var(--accent-dim);
  color: var(--accent);
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.search-result-amount {
  font-weight: 700;
  font-size: 1.1rem;
}

.search-result-details {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.search-result-match {
  background: var(--accent-dim);
  color: var(--accent);
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  font-weight: 600;
}

.search-no-results {
  padding: 3rem 2rem;
  text-align: center;
  color: var(--muted);
}

/* Mobile responsive search modal */
@media (max-width: 768px) {
  .search-modal {
    width: 100%;
  }
  
  .search-modal-content {
    width: 100%;
  }
}

/* ===== PRIVACY MODE (BLUR AMOUNTS) ===== */
body.privacy-mode .amount-value,
body.privacy-mode #sumIncomeAll,
body.privacy-mode #sumExpensesAll,
body.privacy-mode #sumNetAll,
body.privacy-mode #sumIncomeAllMobile,
body.privacy-mode #sumExpensesAllMobile,
body.privacy-mode #sumNetAllMobile,
body.privacy-mode #sumInvestmentMobile,
body.privacy-mode #autoBudgetSpent,
body.privacy-mode #autoBudgetCap,
body.privacy-mode #autoBudgetLeft,
body.privacy-mode #autoBudgetOver,
body.privacy-mode .tile p,
body.privacy-mode .mobile-summary-card p,
body.privacy-mode td:nth-child(5),
body.privacy-mode .budget-amount,
body.privacy-mode .debt-amount,
body.privacy-mode .payment-amount,
body.privacy-mode .search-result-amount,
body.privacy-mode [class*="sum"],
body.privacy-mode [class*="total"],
body.privacy-mode [class*="balance"] {
  filter: blur(8px);
  user-select: none;
  transition: filter 0.3s ease;
}

body.privacy-mode .amount-value:hover,
body.privacy-mode td:nth-child(5):hover {
  filter: blur(4px);
}

/* Privacy toggle icon animations */
.privacy-icon-show,
.privacy-icon-hide {
  transition: opacity 0.3s ease;
}

/* ===== AI INSIGHTS PANEL ===== */
.ai-insights-panel {
  padding: var(--space-md);
}

.ai-insights-panel .ai-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--line);
}

.ai-insights-panel .ai-header h2 {
  margin: 0;
  font-size: 1.4rem;
}

.ai-insights-panel .btn-refresh {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--accent-light);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.ai-insights-panel .btn-refresh:hover {
  background: var(--accent);
  color: var(--bg);
}

.ai-insights-panel .refresh-icon {
  transition: transform 0.3s ease;
}

.ai-insights-panel .btn-refresh:hover .refresh-icon {
  transform: rotate(180deg);
}

/* AI Sections */
.ai-section {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-md);
  overflow: hidden;
}

.ai-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  background: var(--card-elevated);
  border-bottom: 1px solid var(--line);
}

.ai-section-header h3 {
  margin: 0;
  font-size: 1.1rem;
}

.ai-section-content {
  padding: var(--space-lg);
}

.ai-placeholder {
  color: var(--muted);
  text-align: center;
  padding: var(--space-lg);
  font-style: italic;
}

/* Button small */
.btn-small {
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-small:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

/* AI Loading State */
.ai-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  color: var(--muted);
}

.ai-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: ai-spin 1s linear infinite;
  margin-bottom: var(--space-md);
}

@keyframes ai-spin {
  to { transform: rotate(360deg); }
}

/* AI Error State */
.ai-error {
  text-align: center;
  padding: var(--space-lg);
  color: var(--danger);
}

.ai-error span {
  font-size: 2rem;
  display: block;
  margin-bottom: var(--space-sm);
}

/* AI Success State */
.ai-success {
  text-align: center;
  padding: var(--space-lg);
  color: var(--success);
  background: rgba(61, 214, 140, 0.1);
  border-radius: var(--radius-md);
}

/* AI Cards */
.ai-card {
  background: var(--card-elevated);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

.ai-prediction-card .prediction-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}

.ai-prediction-card .trend-icon {
  font-size: 2rem;
}

.ai-prediction-card .amount {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent);
  margin-left: var(--space-sm);
}

.ai-prediction-card .prediction-details {
  display: flex;
  gap: var(--space-lg);
  color: var(--muted);
  font-size: 0.9rem;
}

/* Budget Alerts */
.alerts-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.ai-alert {
  border-radius: var(--radius-md);
  padding: var(--space-md);
  border-left: 4px solid var(--line);
}

.ai-alert.risk-high {
  background: rgba(255, 87, 87, 0.1);
  border-left-color: var(--danger);
}

.ai-alert.risk-medium {
  background: rgba(255, 184, 77, 0.1);
  border-left-color: var(--warn);
}

.ai-alert.risk-low {
  background: rgba(61, 214, 140, 0.1);
  border-left-color: var(--success);
}

.ai-alert .alert-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
  font-weight: 600;
}

.ai-alert .risk-badge {
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  background: var(--line);
}

.ai-alert .alert-amounts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

.ai-alert .alert-message {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text);
}

/* AI Insights List */
.ai-insights-list {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--card-elevated);
  border-radius: var(--radius-md);
}

.ai-insights-list h4 {
  margin: 0 0 var(--space-sm);
  color: var(--accent);
}

.ai-insights-list ul {
  margin: 0;
  padding-left: var(--space-lg);
}

.ai-insights-list li {
  margin-bottom: var(--space-xs);
  color: var(--text-secondary);
}

/* AI Summary */
.ai-summary {
  background: linear-gradient(135deg, var(--accent-light), transparent);
  border-color: var(--accent);
}

/* AI Trends */
.ai-trends h4 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0 0 var(--space-sm);
}

.percent-change {
  font-size: 1.2rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-sm);
}

.percent-change.change-up { color: var(--danger); background: var(--danger-light); }
.percent-change.change-down { color: var(--success); background: var(--accent-light); }
.percent-change.change-stable { color: var(--muted); background: var(--line); }

/* AI Patterns */
.ai-patterns-list h4 {
  margin: 0 0 var(--space-md);
  color: var(--text);
}

.ai-pattern {
  padding: var(--space-md);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
}

.ai-pattern .pattern-header {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}

.ai-pattern .pattern-type {
  font-size: 0.8rem;
  padding: 0.2rem 0.5rem;
  background: var(--info);
  color: white;
  border-radius: var(--radius-sm);
  text-transform: capitalize;
}

.ai-pattern .pattern-category {
  font-weight: 600;
}

.ai-pattern .pattern-suggestion {
  margin: var(--space-sm) 0 0;
  font-size: 0.9rem;
  color: var(--accent);
}

/* AI Recommendations */
.ai-recommendations h4 {
  margin: var(--space-md) 0;
}

.ai-recommendation {
  padding: var(--space-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
  border-left: 4px solid var(--line);
}

.ai-recommendation.priority-high {
  background: rgba(255, 87, 87, 0.1);
  border-left-color: var(--danger);
}

.ai-recommendation.priority-medium {
  background: rgba(255, 184, 77, 0.1);
  border-left-color: var(--warn);
}

.ai-recommendation.priority-low {
  background: rgba(77, 159, 255, 0.1);
  border-left-color: var(--info);
}

.ai-recommendation strong {
  display: block;
  margin-bottom: var(--space-xs);
}

.ai-recommendation p {
  margin: 0 0 var(--space-sm);
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.ai-recommendation .savings {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  background: var(--accent-light);
  color: var(--accent);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
}

/* AI Anomalies */
.ai-anomalies h4 {
  margin: var(--space-md) 0;
}

.ai-anomaly {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-sm);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-xs);
}

.ai-anomaly .anomaly-date {
  font-size: 0.85rem;
  color: var(--muted);
}

.ai-anomaly .anomaly-category {
  font-weight: 600;
}

.ai-anomaly .anomaly-amount {
  color: var(--danger);
  font-weight: 600;
}

.ai-anomaly p {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* Duplicates */
.summary-stats {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}

.duplicates-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.ai-duplicate {
  padding: var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
}

.ai-duplicate.conf-high {
  border-left: 4px solid var(--danger);
  background: rgba(255, 87, 87, 0.05);
}

.ai-duplicate.conf-medium {
  border-left: 4px solid var(--warn);
  background: rgba(255, 184, 77, 0.05);
}

.ai-duplicate.conf-low {
  border-left: 4px solid var(--info);
  background: rgba(77, 159, 255, 0.05);
}

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

.ai-duplicate .dup-confidence {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  background: var(--line);
  border-radius: var(--radius-sm);
}

.ai-duplicate .dup-reason {
  margin: 0 0 var(--space-sm);
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.ai-duplicate .dup-actions {
  display: flex;
  gap: var(--space-sm);
}

/* Enhancements */
.enhancements-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.ai-enhancement {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-md);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.ai-enhancement.has-change {
  border-color: var(--accent);
  background: rgba(61, 214, 140, 0.05);
}

.ai-enhancement .enhancement-original {
  font-size: 0.9rem;
  color: var(--muted);
  text-decoration: line-through;
}

.ai-enhancement .enhancement-arrow {
  color: var(--accent);
  font-size: 1.2rem;
}

.ai-enhancement .enhancement-new {
  font-weight: 600;
}

.ai-enhancement .merchant-badge {
  font-size: 0.8rem;
  padding: 0.2rem 0.5rem;
  background: var(--info);
  color: white;
  border-radius: var(--radius-sm);
}

.ai-enhancement .btn-apply {
  background: var(--accent);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .ai-section-header {
    flex-direction: column;
    gap: var(--space-sm);
    text-align: center;
  }
  
  .ai-prediction-card .prediction-details {
    flex-direction: column;
    gap: var(--space-xs);
  }
  
  .ai-enhancement {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .ai-enhancement .enhancement-arrow {
    transform: rotate(90deg);
  }
  
  .ai-anomaly {
    grid-template-columns: 1fr;
  }
}

/* ===== AI CHAT INTERFACE ===== */
.ai-chat-section {
  background: var(--card);
}

.ai-chat-container {
  display: flex;
  flex-direction: column;
  height: 400px;
  max-height: 50vh;
}

.ai-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Chat Message Styles */
.chat-message {
  display: flex;
  gap: var(--space-sm);
  max-width: 85%;
  animation: chatFadeIn 0.3s ease-out;
}

@keyframes chatFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chat-message.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat-message.bot {
  align-self: flex-start;
}

.chat-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--card-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.chat-bubble {
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  font-size: 0.95rem;
  line-height: 1.5;
}

.chat-message.user .chat-bubble {
  background: var(--accent);
  color: var(--bg);
  border-bottom-right-radius: var(--radius-sm);
}

.chat-message.bot .chat-bubble {
  background: var(--card-elevated);
  color: var(--text);
  border: 1px solid var(--line);
  border-bottom-left-radius: var(--radius-sm);
}

.chat-bubble ul {
  margin: var(--space-sm) 0 0;
  padding-left: var(--space-lg);
}

.chat-bubble li {
  margin-bottom: var(--space-xs);
}

.chat-bubble em {
  color: var(--accent);
  font-style: normal;
  background: var(--accent-light);
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}

/* Typing Indicator */
.chat-message.typing .chat-bubble {
  padding: var(--space-md);
}

.typing-indicator {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  min-width: 50px;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  background: var(--muted);
  border-radius: 50%;
  animation: typingBounce 1.4s ease-in-out infinite;
}

.typing-indicator span:nth-child(1) { animation-delay: 0s; }
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-8px); }
}

/* Chat Input */
.ai-chat-input-container {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--card-elevated);
  border-top: 1px solid var(--line);
}

.ai-chat-input {
  flex: 1;
  padding: var(--space-md);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  color: var(--text);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s ease;
}

.ai-chat-input:focus {
  border-color: var(--accent);
}

.ai-chat-input::placeholder {
  color: var(--muted);
}

.ai-chat-send {
  padding: var(--space-md) var(--space-lg);
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: var(--radius-lg);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.ai-chat-send:hover {
  background: var(--accent-hover);
  transform: scale(1.02);
}

.ai-chat-send:active {
  transform: scale(0.98);
}

/* Chat Confirmation */
.chat-confirmation {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
}

.confirmation-details {
  margin-bottom: var(--space-md);
}

.confirmation-details p {
  margin: var(--space-xs) 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.confirmation-buttons {
  display: flex;
  gap: var(--space-sm);
}

.btn-confirm {
  flex: 1;
  padding: var(--space-sm) var(--space-md);
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-confirm:hover {
  background: var(--accent-hover);
}

.btn-cancel {
  flex: 1;
  padding: var(--space-sm) var(--space-md);
  background: var(--danger-light);
  color: var(--danger);
  border: 1px solid var(--danger);
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

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

/* Mobile Chat Styles */
@media (max-width: 768px) {
  .ai-chat-container {
    height: 350px;
  }
  
  .chat-message {
    max-width: 90%;
  }
  
  .ai-chat-input-container {
    padding: var(--space-sm);
  }
  
  .ai-chat-input {
    padding: var(--space-sm);
    font-size: 16px; /* Prevent iOS zoom */
  }
  
  .ai-chat-send {
    padding: var(--space-sm) var(--space-md);
  }
}

/* ===== FLOATING AI ASSISTANT CHATBOT ===== */

/* Floating Action Button */
.ai-fab {
  position: fixed;
  bottom: 90px;
  right: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #7c3aed);
  border: none;
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
  cursor: pointer;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-fab:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 25px rgba(99, 102, 241, 0.5);
}

.ai-fab.active {
  transform: rotate(45deg);
  background: var(--danger);
}

.ai-fab-icon {
  font-size: 28px;
  transition: transform 0.3s ease;
}

.ai-fab.active .ai-fab-icon {
  transform: rotate(-45deg);
}

/* Chat Modal */
.ai-chat-modal {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 20px;
  animation: fadeIn 0.2s ease;
}

.ai-chat-modal.hidden {
  display: none;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Chat Container */
.ai-chat-container {
  width: 400px;
  max-width: calc(100vw - 40px);
  height: 600px;
  max-height: calc(100vh - 120px);
  background: var(--card);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideUp 0.3s ease;
  margin-bottom: 70px;
}

@keyframes slideUp {
  from { 
    opacity: 0;
    transform: translateY(20px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

/* Chat Header */
.ai-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--accent), #7c3aed);
  color: white;
}

.ai-chat-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ai-chat-title .ai-avatar {
  font-size: 32px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-chat-title h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.ai-chat-title .ai-status {
  font-size: 0.75rem;
  opacity: 0.8;
}

.ai-chat-close {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.ai-chat-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Chat Messages */
.ai-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--bg);
}

/* Message Bubbles */
.ai-message {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 90%;
  animation: messageIn 0.3s ease;
}

@keyframes messageIn {
  from { 
    opacity: 0;
    transform: translateY(10px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

.ai-message.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.ai-message.bot {
  align-self: flex-start;
}

.ai-msg-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--card-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.ai-message.user .ai-msg-avatar {
  background: var(--accent);
}

.ai-msg-content {
  background: var(--card);
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  font-size: 0.95rem;
  line-height: 1.5;
}

.ai-message.user .ai-msg-content {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  border-radius: 16px 16px 4px 16px;
}

.ai-message.bot .ai-msg-content {
  border-radius: 16px 16px 16px 4px;
}

.ai-message.error .ai-msg-content {
  background: var(--danger-light);
  border-color: var(--danger);
  color: var(--danger);
}

/* Message Content Styling */
.ai-msg-content ul {
  margin: 8px 0;
  padding-left: 20px;
}

.ai-msg-content li {
  margin-bottom: 4px;
}

.ai-msg-content code {
  background: var(--bg);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.9em;
}

.ai-msg-content .ai-amount {
  color: var(--accent);
  font-weight: 600;
}

.ai-msg-content .ai-percent {
  color: var(--info);
  font-weight: 500;
}

/* Typing Indicator */
.ai-message.typing .typing-dots {
  display: flex;
  gap: 4px;
  padding: 4px 0;
}

.typing-dots span {
  width: 8px;
  height: 8px;
  background: var(--muted);
  border-radius: 50%;
  animation: typingBounce 1.4s infinite ease-in-out;
}

.typing-dots span:nth-child(1) { animation-delay: 0s; }
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
  0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}

/* Input Area */
.ai-chat-input-area {
  padding: 16px;
  background: var(--card);
  border-top: 1px solid var(--line);
}

/* File Preview */
.ai-file-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--accent-light);
  border: 1px solid var(--accent);
  border-radius: 8px;
  margin-bottom: 10px;
}

.ai-file-preview.hidden {
  display: none;
}

.ai-file-name {
  font-size: 0.9rem;
  color: var(--accent);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 280px;
}

.ai-file-remove {
  background: none;
  border: none;
  color: var(--danger);
  font-size: 20px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.ai-file-remove:hover {
  transform: scale(1.2);
}

/* Input Row */
.ai-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ai-attach-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--card-elevated);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.ai-attach-btn:hover {
  background: var(--accent-light);
  border-color: var(--accent);
}

#aiChatInput {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s;
}

#aiChatInput:focus {
  border-color: var(--accent);
}

#aiChatInput::placeholder {
  color: var(--muted);
}

.ai-send-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

.ai-send-btn:hover {
  background: var(--accent-hover);
  transform: scale(1.05);
}

.ai-send-btn:active {
  transform: scale(0.95);
}

/* Mobile Responsive */
@media (max-width: 480px) {
  .ai-fab {
    bottom: 80px;
    right: 16px;
    width: 56px;
    height: 56px;
  }
  
  .ai-fab-icon {
    font-size: 24px;
  }
  
  .ai-chat-modal {
    padding: 0;
  }
  
  .ai-chat-container {
    width: 100%;
    max-width: 100%;
    height: calc(100vh - 80px);
    max-height: calc(100vh - 80px);
    border-radius: 20px 20px 0 0;
    margin-bottom: 0;
  }
  
  .ai-chat-messages {
    padding: 16px;
  }
  
  .ai-message {
    max-width: 95%;
  }
  
  .ai-file-name {
    max-width: 180px;
  }
  
  #aiChatInput {
    font-size: 16px; /* Prevent iOS zoom */
  }
}

/* Desktop - position chatbot at bottom right */
@media (min-width: 769px) {
  .ai-chat-modal {
    background: transparent;
    backdrop-filter: none;
    pointer-events: none;
  }
  
  .ai-chat-container {
    pointer-events: all;
    margin-bottom: 80px;
  }
}