/* ═══ LIGHT THEME (Default) ═══ */
:root {
    --bg:#eef2ef;--sidebar:#f9faf9;--white:#ffffff;--dark:#111827;--dark-card:#151916;
    --green:#22c55e;--green-light:#dcfce7;--red:#ef4444;--red-light:#fee2e2;
    --text:#1f2937;--muted:#6b7280;--border:#e5e7eb;--teal:#14b8a6;
    --card-shadow:0 4px 15px rgba(0,0,0,.02);--overlay-bg:rgba(0,0,0,.6);
}
/* ═══ DARK THEME ═══ */
[data-theme="dark"] {
    --bg:#0b0f0d;--sidebar:#111613;--white:#1a1f1c;--dark:#f9fafb;--dark-card:#151916;
    --green:#22c55e;--green-light:rgba(34,197,94,.15);--red:#ef4444;--red-light:rgba(239,68,68,.12);
    --text:#e5e7eb;--muted:#9ca3af;--border:#2a2f2c;--teal:#14b8a6;
    --card-shadow:0 4px 15px rgba(0,0,0,.2);--overlay-bg:rgba(0,0,0,.75);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--bg);color:var(--text);display:flex;justify-content:center;padding:1rem;min-height:100vh;transition:background .4s,color .4s}

.dashboard{display:flex;width:100%;max-width:1440px;border-radius:24px;overflow:hidden}

/* PAGE SYSTEM */
.page{display:none;animation:pageIn .4s ease}
.page.active{display:block}
@keyframes pageIn{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
.page-title{font-size:1.6rem;font-weight:800;color:var(--dark);margin-bottom:.35rem}
.page-sub{font-size:.9rem;color:var(--muted);margin-bottom:2rem}
.sidebar{width:250px;background:var(--sidebar);padding:2rem 1.5rem;display:flex;flex-direction:column;transition:background .4s}
.logo{display:flex;align-items:center;gap:.75rem;font-size:1.25rem;font-weight:800;margin-bottom:2.5rem;color:var(--dark)}
.logo-icon{color:var(--green)}
.menu-section{margin-bottom:2rem}
.menu-label{font-size:.7rem;font-weight:700;color:var(--muted);margin-bottom:1rem;letter-spacing:1.5px}
.menu-item{display:flex;align-items:center;gap:.75rem;padding:.7rem 1rem;text-decoration:none;color:var(--muted);font-weight:600;font-size:.9rem;border-radius:12px;margin-bottom:.25rem;transition:all .25s}
.menu-item:hover{color:var(--dark);background:rgba(128,128,128,.08)}
.menu-item.active{background:var(--dark-card);color:#fff}
[data-theme="dark"] .menu-item.active{background:#22c55e;color:#000}
.menu-item.active svg{stroke:var(--green)}
[data-theme="dark"] .menu-item.active svg{stroke:#000}
.sidebar-tip{margin-top:auto;background:var(--white);border-radius:16px;padding:1.25rem;box-shadow:var(--card-shadow);font-size:.8rem;line-height:1.5;transition:background .4s}
.sidebar-tip .tip-dot{width:8px;height:8px;background:var(--green);border-radius:50%;display:inline-block;margin-right:.4rem;animation:pulse 2s infinite}
.sidebar-tip p{color:var(--muted);margin-top:.5rem}

.main{flex-grow:1;padding:2rem 2.5rem;overflow-y:auto;height:calc(100vh - 2rem);transition:background .4s}
.main::-webkit-scrollbar{width:5px}
.main::-webkit-scrollbar-thumb{background:rgba(128,128,128,.15);border-radius:10px}

.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:2.5rem}
.greeting{display:flex;align-items:center;gap:1rem}
.avatar-circle{width:46px;height:46px;background:var(--white);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:var(--card-shadow);color:var(--dark);transition:background .4s}
.greeting h1{font-size:1.2rem;font-weight:700;color:var(--dark)}
.greeting p{font-size:.85rem;color:var(--muted)}
.wave{display:inline-block;animation:wave 2.5s infinite;transform-origin:70% 70%}
.topbar-right{display:flex;gap:.75rem;align-items:center}
.icon-btn{width:40px;height:40px;border-radius:50%;border:none;background:var(--white);color:var(--dark);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--card-shadow);transition:all .2s}
.icon-btn:hover{transform:scale(1.1)}

/* THEME TOGGLE */
.theme-toggle{width:52px;height:28px;background:var(--border);border-radius:50px;border:none;cursor:pointer;position:relative;transition:background .3s}
[data-theme="dark"] .theme-toggle{background:var(--green)}
.theme-toggle .toggle-ball{position:absolute;top:3px;left:3px;width:22px;height:22px;background:var(--white);border-radius:50%;transition:transform .3s cubic-bezier(.68,-.55,.27,1.55);box-shadow:0 1px 3px rgba(0,0,0,.2)}
[data-theme="dark"] .theme-toggle .toggle-ball{transform:translateX(24px);background:var(--dark-card)}
.toggle-icons{display:flex;align-items:center;justify-content:space-between;padding:0 6px;height:100%;pointer-events:none;font-size:.7rem}

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.span-2{grid-column:span 2}
.span-full{grid-column:1/-1}

.card{background:var(--white);border-radius:20px;padding:1.5rem;box-shadow:var(--card-shadow);border:1px solid var(--border);transition:background .4s,border-color .4s}
.dark-card{background:var(--dark-card);color:#fff;border:none;box-shadow:0 8px 30px rgba(0,0,0,.15)}

.stat-card{display:flex;flex-direction:column;gap:.75rem}
.stat-top{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--muted)}
.dark-card .stat-top{color:#9ca3af}
.dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.dot.green{background:var(--green)}.dot.red{background:var(--red)}.dot.dark{background:var(--dark)}.dot.gray{background:#9ca3af}.dot.teal{background:var(--teal)}
[data-theme="dark"] .dot.dark{background:#9ca3af}
.stat-label{font-weight:600}
.big-num{font-size:2.2rem;font-weight:800;line-height:1}
.dark-text{color:var(--dark)}
.small-num{font-size:.9rem;font-weight:600;color:var(--muted)}
.dark-card .small-num{color:#9ca3af}
.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .7rem;border-radius:50px;font-size:.72rem;font-weight:700;width:fit-content}
.green-b{background:rgba(34,197,94,.15);color:var(--green)}
.green-light-b{background:var(--green-light);color:#166534}
[data-theme="dark"] .green-light-b{color:var(--green)}
.red-light-b{background:var(--red-light);color:#991b1b}
[data-theme="dark"] .red-light-b{color:var(--red)}

.card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}
.card-top h3{font-size:1.05rem;font-weight:700;color:var(--dark)}
.chip{font-size:.8rem;color:var(--muted);background:rgba(128,128,128,.08);padding:.35rem .75rem;border-radius:8px;font-weight:600}
.chart-row{display:flex;align-items:center;gap:2rem}
.donut-wrap{width:170px;height:170px;position:relative;flex-shrink:0}
.legend-col{flex-grow:1;display:flex;flex-direction:column;gap:1rem}
.leg-row{display:flex;align-items:center;gap:.75rem;font-size:.85rem}
.leg-text{flex-grow:1;color:var(--muted);line-height:1.4}
.leg-text strong{color:var(--dark);display:block}
.pct{color:var(--muted);font-weight:700;font-size:.8rem;min-width:30px;text-align:right}

.insight{display:flex;flex-direction:column;justify-content:space-between}
.insight-label{font-size:.8rem;color:#9ca3af;display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}
.insight h2{font-size:1.15rem;line-height:1.45;margin-bottom:.75rem}
.insight p{font-size:.88rem;color:#d1d5db;line-height:1.6}
.insight-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:1.5rem}
.btn-green{background:var(--green);color:#fff;border:none;padding:.7rem 1.25rem;border-radius:12px;font-weight:700;font-size:.9rem;cursor:pointer;box-shadow:0 4px 15px rgba(34,197,94,.3);transition:transform .2s}
.btn-green:hover{transform:translateY(-2px)}
.bulb{opacity:.15;color:#9ca3af}

/* CURRENCY CARD */
.currency-card{display:flex;flex-direction:column;gap:1rem}
.rate-display{font-size:2.2rem;font-weight:800;color:var(--green);line-height:1}
.rate-display span{font-size:.9rem;color:var(--muted);font-weight:600}
.rate-converted{font-size:.9rem;color:var(--muted);line-height:1.6}
.rate-converted strong{color:var(--dark)}
.converter{display:flex;gap:.75rem;align-items:center;margin-top:.5rem;padding-top:1rem;border-top:1px solid var(--border)}
.converter input{flex:1;padding:.6rem .75rem;border-radius:10px;border:1px solid var(--border);background:var(--white);color:var(--dark);font-family:inherit;font-size:.95rem;outline:none;transition:border .2s}
.converter input:focus{border-color:var(--green)}
.conv-result{font-weight:800;font-size:1rem;color:var(--green);white-space:nowrap}
.brl-val{color:var(--teal);font-size:.82rem}

/* TERMINAL (Nothing Phone style) */
.terminal-card{background:#0a0a0a !important;border:1px solid #1a1a1a !important;overflow:hidden}
.terminal{font-family:'JetBrains Mono',monospace;font-size:.82rem;color:#22c55e;max-height:180px;overflow-y:auto;padding:.5rem 0}
.terminal::-webkit-scrollbar{width:3px}
.terminal::-webkit-scrollbar-thumb{background:#22c55e33;border-radius:4px}
.msg-row{padding:.5rem 0;border-bottom:1px solid #1a1a1a;animation:fadeIn .3s}
.msg-row .msg-author{color:#555;font-size:.7rem;margin-bottom:.2rem}
.msg-row .msg-text{color:#22c55e;text-shadow:0 0 8px rgba(34,197,94,.3)}
.msg-row .msg-time{color:#333;font-size:.65rem;float:right}
.terminal-input{display:flex;gap:.5rem;align-items:center;padding-top:.75rem;border-top:1px solid #1a1a1a;margin-top:.5rem}
.prompt{color:#22c55e;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:1rem}
.terminal-input input{flex:1;background:transparent;border:none;color:#22c55e;font-family:'JetBrains Mono',monospace;font-size:.85rem;outline:none;caret-color:#22c55e}
.terminal-input input::placeholder{color:#333}
.send-btn{background:none;border:none;color:#22c55e;cursor:pointer;padding:4px;transition:opacity .2s}
.send-btn:hover{opacity:.7}

/* BOTTOM ROW */
.bottom-row{display:grid;grid-template-columns:1fr 1fr 2fr;gap:1.25rem}
.card-desc{font-size:.85rem;color:var(--muted);margin-bottom:1.5rem;line-height:1.5}

/* FILE BROWSER */
.tab-bar{display:flex;gap:.5rem;margin-bottom:1rem}
.tab{padding:.5rem 1.25rem;border-radius:10px;border:1px solid var(--border);background:var(--white);font-weight:700;font-size:.85rem;color:var(--muted);cursor:pointer;transition:all .2s;font-family:inherit}
.tab.active{background:var(--dark-card);color:#fff;border-color:var(--dark-card)}
.tab:hover:not(.active){background:rgba(128,128,128,.08)}
.file-list{max-height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:.35rem}
.file-list::-webkit-scrollbar{width:4px}
.file-list::-webkit-scrollbar-thumb{background:rgba(128,128,128,.2);border-radius:4px}
.file-list.hidden{display:none}
.file-item{display:flex;align-items:center;gap:.65rem;padding:.6rem .75rem;border-radius:10px;cursor:pointer;font-size:.85rem;font-weight:600;color:var(--dark);transition:all .2s;border:1px solid transparent}
.file-item:hover{background:var(--green-light);border-color:var(--green);color:#166534}
[data-theme="dark"] .file-item:hover{color:var(--green)}
.file-item svg{flex-shrink:0;color:var(--muted)}.file-item:hover svg{color:var(--green)}
.file-item.rc{color:var(--muted)}.file-item.nc{color:#b45309}

/* TIMELINE */
.timeline{display:flex;flex-direction:column;gap:1.5rem;margin-top:1rem;position:relative;padding-left:1.5rem}
.timeline::before{content:'';position:absolute;left:5px;top:8px;bottom:8px;width:2px;background:var(--border)}
.tl-item{display:flex;gap:1rem;position:relative}
.tl-dot{width:12px;height:12px;border-radius:50%;position:absolute;left:-1.5rem;top:4px}
.red-dot{background:var(--red);box-shadow:0 0 0 4px var(--red-light)}
.green-dot{background:var(--green);box-shadow:0 0 0 4px var(--green-light)}
.tl-body{display:flex;flex-direction:column;gap:.25rem}
.tl-body strong{font-size:.95rem;color:var(--dark)}
.tl-body span{font-size:.82rem;color:var(--muted)}

/* TABLE */
.table-card{display:flex;flex-direction:column}
.link-green{font-size:.85rem;color:var(--green);text-decoration:none;font-weight:700}
.tbl-scroll{overflow-y:auto;max-height:300px;border-radius:12px}
.tbl-scroll::-webkit-scrollbar{width:4px}
.tbl-scroll::-webkit-scrollbar-thumb{background:rgba(128,128,128,.2);border-radius:4px}
table{width:100%;border-collapse:collapse}
th{text-align:left;padding:.7rem .5rem;color:var(--muted);font-size:.75rem;font-weight:700;border-bottom:1px solid var(--border);text-transform:uppercase;letter-spacing:.5px}
td{padding:.9rem .5rem;font-size:.88rem;color:var(--muted);border-bottom:1px solid var(--border)}
.r{text-align:right}
.hl{background:var(--green-light)}
.hl td{border-bottom:1px solid var(--green-light)}
.section-label{font-weight:800;color:var(--green);font-size:.75rem;text-transform:uppercase;letter-spacing:1px;padding-top:1.5rem !important}
.pill-d,.pill-g{display:inline-block;padding:.2rem .5rem;border-radius:6px;font-size:.72rem;font-weight:600;margin:0 .2rem .25rem 0}
.pill-d{background:rgba(128,128,128,.1);color:var(--dark)}
.pill-g{background:var(--green);color:#fff}
tfoot td{font-size:1.1rem;padding-top:1.25rem;border-bottom:none}

/* PDF MODAL */
.pdf-overlay{display:none;position:fixed;inset:0;background:var(--overlay-bg);backdrop-filter:blur(8px);z-index:9999;justify-content:center;align-items:center;padding:2rem;animation:fadeIn .3s}
.pdf-overlay.open{display:flex}
.pdf-modal{background:var(--white);border-radius:20px;width:100%;max-width:900px;height:85vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 25px 60px rgba(0,0,0,.3)}
.pdf-toolbar{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;border-bottom:1px solid var(--border)}
.pdf-toolbar span{font-weight:700;font-size:.95rem;color:var(--dark)}
.pdf-close{width:36px;height:36px;border-radius:50%;border:none;background:rgba(128,128,128,.1);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;color:var(--dark)}
.pdf-close:hover{background:var(--red-light);color:var(--red)}
.pdf-modal iframe{flex-grow:1;border:none;width:100%}

/* AVATAR */
.avatar-img{width:42px;height:42px;border-radius:50%;object-fit:cover;box-shadow:var(--card-shadow)}

/* EDIT BTN */
.edit-btn{background:none;border:none;color:#9ca3af;cursor:pointer;padding:2px;transition:color .2s;margin-left:auto}
.edit-btn:hover{color:var(--green)}

/* UPCOMING PAYMENTS */
.up-row{display:flex;align-items:center;gap:.75rem;padding:.75rem;border-radius:12px;margin-bottom:.5rem;transition:background .2s}
.up-row:hover{background:rgba(128,128,128,.05)}
.up-row.urgent{background:var(--red-light)}
.up-icon{font-size:1.25rem}
.up-info{flex-grow:1;display:flex;flex-direction:column;gap:.15rem}
.up-info strong{font-size:.9rem;color:var(--dark)}
.up-info span{font-size:.75rem;color:var(--muted)}
.up-val{font-weight:800;font-size:.95rem;color:var(--dark)}

/* TRANSACTIONS */
.tx-row{display:flex;justify-content:space-between;align-items:center;padding:.85rem 0;border-bottom:1px solid var(--border)}
.tx-row:last-child{border-bottom:none}
.tx-left{display:flex;align-items:center;gap:.75rem}
.tx-icon{font-size:1.2rem}
.tx-left strong{display:block;font-size:.9rem;color:var(--dark)}
.tx-date{font-size:.75rem;color:var(--muted)}
.tx-val{font-weight:800;color:var(--red);font-size:.95rem}

/* LOGOUT BTN */
.btn-logout{display:flex;align-items:center;gap:.5rem;padding:.7rem 1rem;background:rgba(239,68,68,.08);color:var(--red);border:1px solid rgba(239,68,68,.2);border-radius:12px;font-weight:700;font-size:.82rem;cursor:pointer;transition:all .2s;margin-top:1rem;width:100%;justify-content:center;font-family:inherit}
.btn-logout:hover{background:rgba(239,68,68,.15)}

/* ANIMATIONS */
.anim-up{opacity:0;transform:translateY(30px);animation:slideUp .7s cubic-bezier(.16,1,.3,1) forwards;animation-delay:var(--delay,0s)}
@keyframes slideUp{to{opacity:1;transform:translateY(0)}}
@keyframes wave{0%,100%{transform:rotate(0)}10%{transform:rotate(14deg)}20%{transform:rotate(-8deg)}30%{transform:rotate(14deg)}40%{transform:rotate(-4deg)}50%{transform:rotate(10deg)}60%,100%{transform:rotate(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ═══ TABLET ═══ */
@media(max-width:1200px){
    .grid{grid-template-columns:repeat(2,1fr)}
    .bottom-row{grid-template-columns:1fr 1fr}
    .bottom-row .table-card{grid-column:1/-1}
}

/* ═══ MOBILE ═══ */
@media(max-width:768px){
    body{padding:0}
    .dashboard{flex-direction:column;border-radius:0}

    /* Sidebar → top bar on mobile */
    .sidebar{width:100%;padding:1rem;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.5rem;position:sticky;top:0;z-index:100;border-bottom:1px solid var(--border)}
    .logo{margin-bottom:0;font-size:1.1rem}
    .menu-section{display:flex;gap:.25rem;margin-bottom:0;flex-wrap:wrap}
    .menu-label{display:none}
    .menu-item{padding:.5rem .75rem;font-size:.8rem;gap:.4rem;border-radius:10px}
    .menu-item svg{width:14px;height:14px}
    .sidebar-tip{display:none}
    .btn-logout{width:auto;margin-top:0;padding:.5rem .75rem;font-size:.75rem}

    /* Main content */
    .main{padding:1rem;height:auto;overflow-y:visible}
    .topbar{flex-direction:column;gap:.75rem;align-items:flex-start;margin-bottom:1.5rem}
    .topbar-right{align-self:flex-end}
    .greeting h1{font-size:1.05rem}
    .greeting p{font-size:.78rem}

    /* Grid → single column */
    .grid{grid-template-columns:1fr;gap:1rem}
    .span-2{grid-column:span 1}
    .span-full{grid-column:span 1}

    /* Stat cards → 2x2 mini grid */
    .stat-card .big-num{font-size:1.8rem}
    .stat-card .small-num{font-size:.8rem}

    /* Chart */
    .chart-row{flex-direction:column;gap:1.25rem}
    .donut-wrap{width:140px;height:140px;margin:0 auto}
    .legend-col{gap:.75rem}

    /* Bottom row → stack */
    .bottom-row{grid-template-columns:1fr !important;gap:1rem}

    /* Table */
    .tbl-scroll{max-height:250px}
    table{font-size:.78rem}
    th,td{padding:.6rem .3rem}
    .pill-d,.pill-g{font-size:.65rem;padding:.15rem .35rem}

    /* File browser */
    .file-list{max-height:180px}

    /* Upcoming - horizontal scroll on very small */
    .up-row{padding:.6rem .5rem}
    .up-val{font-size:.85rem}

    /* Currency */
    .rate-display{font-size:1.8rem}
    .converter{flex-direction:column;gap:.5rem}
    .converter input{width:100%}

    /* Insight */
    .insight h2{font-size:1rem}
    .insight-bottom{flex-direction:column;gap:1rem;align-items:flex-start}

    /* PDF modal */
    .pdf-overlay{padding:.5rem}
    .pdf-modal{border-radius:14px;height:90vh}

    /* Transactions */
    .tx-row{padding:.7rem 0}
    .tx-val{font-size:.85rem}
}

/* ═══ SMALL PHONES ═══ */
@media(max-width:400px){
    .sidebar{padding:.75rem}
    .menu-item{padding:.4rem .6rem;font-size:.75rem}
    .main{padding:.75rem}
    .card{padding:1.15rem;border-radius:16px}
    .stat-card .big-num{font-size:1.5rem}
    .greeting h1{font-size:.95rem}
    .rate-display{font-size:1.5rem}
    .code-input input{width:38px;height:46px;font-size:1.2rem}
}