@import url("./base.css");

/* ===== HEADER NAVIGATION BUTTONS ===== */
.nav-btn{
  color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  border:none;
  cursor:pointer;
  padding:clamp(8px,1.5vw,12px) clamp(14px,2vw,20px);
  border-radius:10px;
  font-weight:700;
  font-size:clamp(0.85rem,1.2vw,1rem);
  transition:all .2s cubic-bezier(.2,.9,.2,1);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-shadow:0 4px 12px rgba(10,132,255,0.2);
  min-height:44px;
  white-space:nowrap;
}

.nav-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(10,132,255,0.3);
  opacity:0.95;
}

.nav-btn:active{
  transform:translateY(0);
  box-shadow:0 2px 8px rgba(10,132,255,0.2);
}

.nav-btn--primary{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;
}

.nav-btn--secondary{
  background:transparent;
  color:var(--accent);
  border:2px solid var(--accent);
  padding:clamp(6px,1.5vw,10px) clamp(12px,2vw,18px);
}

.nav-btn--secondary:hover{
  background:rgba(10,132,255,0.1);
}

.nav-btn--success{
  background:linear-gradient(135deg,var(--success),#1ab85f);
  color:#fff;
}

.nav-btn--success:hover{
  box-shadow:0 8px 24px rgba(40,199,111,0.3);
}

@media(max-width:768px){
  .nav-btn{
    padding:8px 12px;
    font-size:0.85rem;
    min-height:40px;
  }
}

@media(max-width:600px){
  .nav-btn{
    padding:6px 10px;
    font-size:0.8rem;
    min-height:38px;
    border-radius:8px;
  }
  
  .nav-btn--secondary{
    padding:4px 8px;
  }
}

@media(max-width:480px){
  .nav-btn{
    padding:6px 10px;
    font-size:0.75rem;
    min-height:36px;
    border-radius:6px;
  }
}

/* Bank page — balances, transactions and micro-interactions (iOS clean) */
.account-summary{display:flex;gap:18px;align-items:center;flex-wrap:wrap;width:100%;box-sizing:border-box}
.account-balance{font-size:clamp(1.4rem,2.5vw,1.8rem);font-weight:800;color:var(--text)}
.account-meta{color:var(--muted);font-size:clamp(0.85rem,1.5vw,0.95rem)}

.transactions{margin-top:18px;width:100%;box-sizing:border-box}
.transaction-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:clamp(10px,2vw,12px);border-radius:12px;border:1px solid rgba(11,18,32,0.04);background:#d1d5db;transition:transform .14s ease,box-shadow .14s ease;flex-wrap:wrap}
.transaction-row:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.transaction-left{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.transaction-amount.positive{color:var(--success);font-weight:700}
.transaction-amount.negative{color:var(--danger);font-weight:700}

.balance-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-bottom:28px;width:100%;box-sizing:border-box}
.balance-card{background:#d1d5db;border-radius:14px;padding:clamp(16px,3vw,22px);border:1px solid #9ca3af;position:relative;overflow:hidden;transition:all .2s ease}
.balance-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}

.balance-label{font-weight:600;color:var(--muted);font-size:clamp(0.8rem,1.2vw,0.95rem);margin-bottom:8px;display:block}
.balance-amount{font-size:clamp(1.4rem,2vw,1.8rem);font-weight:800;color:var(--text);margin:0}

.balance-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:12px;margin-top:16px;padding-top:16px;border-top:1px solid rgba(11,18,32,0.04)}
.balance-item{text-align:center}
.balance-item-label{font-size:clamp(0.75rem,1rem,0.85rem);color:var(--muted);display:block;margin-bottom:4px}
.balance-item-value{font-size:clamp(0.95rem,1.3vw,1.1rem);font-weight:700;color:var(--accent)}

.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin-bottom:28px;width:100%;box-sizing:border-box}
.stat-card{background:#d1d5db;border-radius:12px;padding:clamp(12px,2vw,16px);border:1px solid #9ca3af;text-align:center;transition:all .2s ease}
.stat-card:hover{transform:translateY(-4px)}
.stat-card h4{margin:0 0 8px 0;font-size:clamp(0.75rem,1rem,0.9rem);color:var(--muted)}
.stat-value{font-size:clamp(1.2rem,2vw,1.6rem);font-weight:800;color:var(--accent)}
.stat-unit{font-size:clamp(0.7rem,0.9rem,0.8rem);color:var(--muted)}

.investment-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin-bottom:28px;width:100%;box-sizing:border-box}
.investment-card{background:#d1d5db;border-radius:12px;padding:clamp(12px,2vw,16px);border:1px solid #9ca3af;transition:all .2s ease}
.investment-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm);border-color:rgba(10,132,255,0.2)}

@media(max-width:768px){
  .account-summary{flex-direction:column;align-items:flex-start}
  .transaction-row{flex-direction:column;align-items:flex-start;gap:8px}
  .balance-cards{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
  .balance-card{padding:14px}
  .balance-items{grid-template-columns:repeat(3,1fr);gap:10px}
  .stats-grid{grid-template-columns:repeat(3,1fr);gap:12px}
  .stat-card{padding:10px}
  .investment-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .investment-card{padding:12px}
  .transactions-table{font-size:0.85rem}
  .transactions-table th,.transactions-table td{padding:8px}
}

@media(max-width:600px){
  .account-balance{font-size:1.4rem}
  .balance-cards{grid-template-columns:1fr;gap:12px}
  .balance-card{padding:12px}
  .balance-amount{font-size:1.4rem}
  .balance-items{grid-template-columns:repeat(2,1fr);gap:8px}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .stat-card{padding:10px}
  .stat-value{font-size:1.2rem}
  .investment-grid{grid-template-columns:1fr;gap:10px}
  .transactions-table{font-size:0.8rem}
  .transactions-table th,.transactions-table td{padding:6px}
}

@media(max-width:480px){
  .account-summary{gap:10px;flex-direction:column}
  .account-balance{font-size:1.2rem}
  .account-meta{font-size:0.8rem}
  .balance-cards{grid-template-columns:1fr;gap:10px}
  .balance-card{padding:10px}
  .balance-label{font-size:0.75rem}
  .balance-amount{font-size:1.2rem;margin-bottom:8px}
  .balance-items{grid-template-columns:1fr;gap:6px;margin-top:10px}
  .balance-item-label{font-size:0.7rem}
  .balance-item-value{font-size:0.9rem}
  .stats-grid{grid-template-columns:2fr 2fr;gap:8px;margin-bottom:16px}
  .stat-card{padding:8px}
  .stat-card h4{font-size:0.7rem;margin-bottom:4px}
  .stat-value{font-size:1rem}
  .stat-unit{font-size:0.65rem}
  .investment-grid{grid-template-columns:1fr;gap:8px;margin-bottom:16px}
  .investment-card{padding:10px}
  .investment-icon{font-size:1.4rem;margin-bottom:4px}
  .transaction-row{padding:8px;gap:8px}
  .transaction-left{gap:8px}
  .txn-tag{font-size:0.65rem;padding:4px 8px}
  .transactions-table{font-size:0.7rem}
  table{display:block;width:100%;overflow-x:auto}
  thead{display:none}
  tbody{display:block;width:100%}
  tr{display:block;margin-bottom:8px;border:1px solid rgba(11,18,32,0.04);border-radius:6px;padding:8px}
  td{display:block;text-align:right;padding:4px 0;border:none;font-size:0.65rem}
  td:before{content:attr(data-label);float:left;font-weight:600;color:var(--text)}
}

/* Balance sheen for emphasis — leverages shared sheen animation */
.balance-value{font-size:2rem;font-weight:800;position:relative;color:var(--text)}
.balance-value.sheen::after{content:"";position:absolute;left:-120%;top:0;width:36%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.28),transparent);transform:skewX(-12deg);opacity:0;pointer-events:none}
.balance-value.sheen.sheen-on-load::after{opacity:1;animation:sheenMove 1100ms ease-in-out}

/* compact transaction tag */
.txn-tag{font-size:0.78rem;padding:6px 10px;border-radius:999px;background:rgba(11,18,32,0.03);color:var(--muted)}

/* Compact table for transactions */
.transactions-table{width:100%;border-collapse:collapse}
.transactions-table th,.transactions-table td{padding:10px;border-bottom:1px solid rgba(11,18,32,0.04);font-size:0.95rem}

/* ===== DASHBOARD SECTION ===== */
.dashboard{padding:24px 0}
.dashboard-header{margin-bottom:28px;padding-bottom:16px;border-bottom:1px solid rgba(11,18,32,0.04)}
.dashboard-header p{margin:0 0 12px 0;color:var(--muted);line-height:1.6;font-size:0.95rem}
.dashboard-header h2{margin:0 0 8px 0;font-size:1.3rem;font-weight:700;color:var(--text);display:flex;align-items:center;gap:10px}
.last-update{font-size:0.85rem;color:var(--muted);margin-top:8px}

/* Balance cards grid */
.balance-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-bottom:28px}
.balance-card{background:#d1d5db;border-radius:14px;padding:22px;border:1px solid #9ca3af;position:relative;overflow:hidden}
.balance-card::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,71,255,0.02),transparent);pointer-events:none}

.balance-label{font-weight:600;color:var(--muted);font-size:0.95rem;margin-bottom:8px;display:block}
.balance-amount{font-size:1.8rem;font-weight:800;color:var(--text);margin:0}

.balance-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:16px;padding-top:16px;border-top:1px solid rgba(11,18,32,0.04)}
.balance-item{text-align:center}
.balance-item-label{font-size:0.85rem;color:var(--muted);display:block;margin-bottom:4px}
.balance-item-value{font-size:1.1rem;font-weight:700;color:var(--accent)}

/* Stats grid */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:28px}
.stat-card{background:#d1d5db;border-radius:12px;padding:16px;border:1px solid #9ca3af;text-align:center}
.stat-card h4{margin:0 0 8px 0;font-size:0.9rem;color:var(--muted)}
.stat-value{font-size:1.6rem;font-weight:800;color:var(--accent)}
.stat-unit{font-size:0.8rem;color:var(--muted)}

/* Investment grid */
.investment-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:28px}
.investment-card{background:#d1d5db;border-radius:12px;padding:16px;border:1px solid #9ca3af;transition:all .2s ease}
.investment-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm);border-color:rgba(10,132,255,0.2)}
.investment-icon{font-size:2rem;margin-bottom:8px}
.investment-name{font-weight:600;color:var(--text);margin-bottom:4px}
.investment-return{color:var(--success);font-weight:700;font-size:0.95rem}

/* Crypto section */
.crypto-section{margin-bottom:28px}
.crypto-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.crypto-card{background:var(--surface);border-radius:12px;padding:14px;border:1px solid rgba(11,18,32,0.04);text-align:center}
.crypto-symbol{font-weight:700;color:var(--accent);font-size:0.95rem}
.crypto-price{font-size:1.3rem;font-weight:800;margin:8px 0;color:var(--text)}
.crypto-change{font-size:0.85rem;font-weight:600;padding:4px 8px;border-radius:6px;background:rgba(11,18,32,0.02);color:var(--muted)}

/* PIX section */
.pix-section{background:linear-gradient(135deg,rgba(10,132,255,0.06),rgba(0,71,255,0.03));border-radius:14px;padding:20px;border:1px solid rgba(10,132,255,0.1);margin-bottom:28px}
.pix-title{font-size:1.1rem;font-weight:700;color:var(--text);margin:0 0 16px 0}
.pix-option{display:flex;align-items:center;gap:12px;padding:12px;border-radius:10px;background:#d1d5db;cursor:pointer;transition:all .12s ease;border:1px solid #9ca3af}
.pix-option:hover{background:rgba(10,132,255,0.04);border-color:rgba(10,132,255,0.1)}
.pix-icon{width:40px;height:40px;background:linear-gradient(135deg,var(--accent),var(--accent-2));border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
.pix-label{flex:1}
.pix-label h4{margin:0;font-size:0.95rem;font-weight:600;color:var(--text)}
.pix-label p{margin:2px 0 0 0;font-size:0.85rem;color:var(--muted)}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media(max-width:768px){
	.dashboard{padding:16px 0}
	.dashboard-header{margin-bottom:20px;padding-bottom:12px}
	.balance-cards{grid-template-columns:1fr;gap:14px}
	.balance-card{padding:18px}
	.balance-amount{font-size:1.5rem}
	.balance-items{grid-template-columns:repeat(3,1fr);gap:10px}
	.stats-grid{grid-template-columns:repeat(2,1fr);gap:12px}
	.stat-card{padding:12px}
	.stat-value{font-size:1.4rem}
	.investment-grid{grid-template-columns:repeat(2,1fr);gap:12px}
	.crypto-grid{grid-template-columns:repeat(2,1fr);gap:12px}
	.pix-section{padding:16px}
	.pix-option{padding:10px}
	.transactions-table{font-size:0.85rem}
	.transactions-table th,.transactions-table td{padding:8px}
	table{font-size:0.85rem}
	th,td{padding:8px}
}

@media(max-width:480px){
	.balance-card{padding:14px}
	.balance-amount{font-size:1.2rem}
	.balance-label{font-size:0.85rem}
	.balance-items{grid-template-columns:repeat(2,1fr);gap:8px}
	.balance-item-value{font-size:0.95rem}
	.stats-grid{grid-template-columns:1fr;gap:10px}
	.stat-card{padding:10px}
	.stat-value{font-size:1.2rem}
	.investment-grid{grid-template-columns:1fr}
	.crypto-grid{grid-template-columns:1fr}
	.investment-card{padding:12px}
	.crypto-card{padding:12px}
	.pix-section{padding:12px}
	.account-summary{flex-direction:column;align-items:flex-start}
	.transaction-row{flex-direction:column;align-items:flex-start}
	table{font-size:0.75rem}
	th,td{padding:6px}
}

/* ===== FORM CONTAINERS & UTILITIES ===== */
.form-container{background:#d1d5db;border-radius:12px;border:1px solid #9ca3af;padding:20px;margin-bottom:20px;max-width:600px}

.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.form-group:last-child{margin-bottom:0}

.form-label{font-weight:600;color:var(--text);font-size:0.95rem}

input,textarea,select{width:100%;padding:10px 12px;border:1px solid rgba(11,18,32,0.06);border-radius:10px;background:var(--surface);color:var(--text);font-size:0.95rem;transition:all .12s ease}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(4,71,255,0.1)}

/* Input groups */
.input-group{display:flex;gap:8px;align-items:center}
.input-group input,.input-group select{flex:1;margin:0}
.input-group .btn{flex-shrink:0;padding:10px 14px;margin:0}

.crypto-form .input-group{margin-top:8px}

.to-full-width{width:100%;margin-top:12px}
.large{padding:16px;font-size:1.1rem}

/* ===== SECTIONS ===== */
.section{padding:32px 0;border-bottom:1px solid rgba(11,18,32,0.04)}
.section:last-child{border-bottom:none}

.section-header{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.section-header h3{margin:0;font-size:1.2rem;color:var(--text)}

/* ===== CRYPTO GRID ===== */
.crypto-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.crypto-card{background:#d1d5db;border-radius:12px;padding:14px;border:1px solid #9ca3af;text-align:center;transition:all .2s ease}
.crypto-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm);border-color:rgba(10,132,255,0.1)}
.crypto-symbol{font-weight:700;color:var(--accent);font-size:0.95rem}
.crypto-price{font-size:1.3rem;font-weight:800;margin:8px 0;color:var(--text)}
.crypto-change{font-size:0.85rem;font-weight:600;padding:4px 8px;border-radius:6px;background:rgba(11,18,32,0.02);color:var(--muted)}

/* ===== PIGGY BANK SECTION ===== */
.piggy-bank{text-align:center}
.piggy-icon{font-size:4rem;color:var(--accent);margin-bottom:16px}
.piggy-icon i{text-shadow:0 4px 12px rgba(4,71,255,0.15)}
.piggy-amount{font-size:2.4rem;font-weight:900;color:var(--accent);margin:20px 0}
.piggy-form{max-width:400px;margin:0 auto}

/* ===== CONSORTIUM/META SECTION ===== */
.consortium-card{background:#d1d5db;border-radius:12px;padding:20px;border:1px solid #9ca3af}
.consortium-card h4{margin:0 0 16px 0;font-size:1.1rem;color:var(--text)}

.consortium-progress{width:100%;height:12px;background:rgba(11,18,32,0.06);border-radius:999px;overflow:hidden;margin-bottom:12px}
.progress-bar{height:100%;width:45%;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .4s cubic-bezier(.2,.9,.2,1);box-shadow:0 4px 12px rgba(10,132,255,0.15)}

.progress-info{display:flex;justify-content:space-between;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid rgba(11,18,32,0.04);font-size:0.9rem;font-weight:600;color:var(--muted)}

/* ===== HISTORY CONTAINERS ===== */
.history-container{margin-top:32px}
.history-container h4{margin:0 0 16px 0;font-size:1.1rem;color:var(--text);display:flex;align-items:center;gap:8px}

.table-wrapper{overflow-x:auto;border-radius:12px;border:1px solid #9ca3af;background:#d1d5db}

.transactions-table{width:100%;border-collapse:collapse;background:#d1d5db}
.transactions-table th{background:rgba(10,132,255,0.05);padding:12px;text-align:left;font-weight:700;color:var(--text);font-size:0.9rem;border-bottom:1px solid rgba(11,18,32,0.04)}
.transactions-table td{padding:10px 12px;border-bottom:1px solid rgba(11,18,32,0.04);color:var(--muted);font-size:0.9rem}
.transactions-table tr:hover{background:rgba(10,132,255,0.02)}

/* ===== DEPOSIT SECTION ===== */
.deposit-container{text-align:center}
.deposit-alert{background:rgba(40,167,69,0.1);padding:20px;border-radius:10px;margin-bottom:20px;border:1px solid var(--success)}
.deposit-alert h4{color:var(--success);margin:0 0 10px 0;font-size:1rem}
.deposit-alert p{margin:0;font-size:0.9rem;opacity:0.9;line-height:1.5}

.small-text{font-size:0.8rem;opacity:0.6;margin-top:16px}

/* ===== BUTTON IMPROVEMENTS ===== */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:10px;font-weight:600;text-decoration:none;transition:all .12s ease;cursor:pointer;border:none}

.btn-accent{background:var(--accent);color:#fff;box-shadow:0 4px 12px rgba(4,71,255,0.1)}
.btn-accent:hover{opacity:.95;transform:translateY(-2px);box-shadow:0 8px 20px rgba(4,71,255,0.15)}

.btn-secondary{background:transparent;border:1px solid rgba(11,18,32,0.08);color:var(--text);transition:all .12s ease}
.btn-secondary:hover{background:rgba(11,18,32,0.04);transform:translateY(-2px);border-color:rgba(11,18,32,0.12)}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media(max-width:768px){
	.dashboard{padding:16px 0}
	.dashboard-header{margin-bottom:20px;padding-bottom:12px}
	.balance-cards{grid-template-columns:1fr;gap:14px}
	.balance-card{padding:18px}
	.balance-amount{font-size:1.5rem}
	.balance-items{grid-template-columns:repeat(3,1fr);gap:10px}
	.stats-grid{grid-template-columns:repeat(2,1fr);gap:12px}
	.stat-card{padding:12px}
	.stat-value{font-size:1.4rem}
	.investment-grid{grid-template-columns:repeat(2,1fr);gap:12px}
	.crypto-grid{grid-template-columns:repeat(2,1fr);gap:12px}
	.pix-section{padding:16px}
	.pix-option{padding:10px}
	.transactions-table{font-size:0.85rem}
	.transactions-table th,.transactions-table td{padding:8px}
}

@media(max-width:480px){
	.balance-card{padding:14px}
	.balance-amount{font-size:1.2rem}
	.balance-label{font-size:0.85rem}
	.balance-items{grid-template-columns:repeat(2,1fr);gap:8px}
	.balance-item-value{font-size:0.95rem}
	.stats-grid{grid-template-columns:1fr;gap:10px}
	.stat-card{padding:10px}
	.stat-value{font-size:1.2rem}
	.investment-grid{grid-template-columns:1fr}
	.crypto-grid{grid-template-columns:1fr}
	.investment-card{padding:12px}
	.crypto-card{padding:12px}
	.pix-section{padding:12px}
	.account-summary{flex-direction:column;align-items:flex-start}
	.transaction-row{flex-direction:column;align-items:flex-start}
}