/* =========================================================
   RinMoney — Sky Theme (Light: ban ngày / Dark: ban đêm)
   Không dùng hiệu ứng động phức tạp — chỉ transition màu nhẹ.
   ========================================================= */
:root{
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 2px 10px rgba(20,60,110,.08);
  --shadow-md: 0 6px 20px rgba(20,60,110,.12);
}
[data-theme="light"]{
  --bg: linear-gradient(180deg,#eaf6ff 0%, #ffffff 55%);
  --bg-solid:#eaf6ff;
  --card:#ffffff;
  --text:#0f2740;
  --text-dim:#5b7186;
  --primary:#2f9bff;
  --primary-dark:#1c7fe0;
  --accent:#ffd36e;
  --border:#dcecf9;
  --success:#22b573;
  --danger:#e5484d;
  --warn:#f5a524;
  --header-bg:rgba(255,255,255,.85);
}
[data-theme="dark"]{
  --bg: linear-gradient(180deg,#0b1530 0%, #0a1020 60%);
  --bg-solid:#0b1530;
  --card:#111b36;
  --text:#eaf2ff;
  --text-dim:#8ea3c4;
  --primary:#5fb1ff;
  --primary-dark:#3d92ee;
  --accent:#ffd36e;
  --border:#1f2c4d;
  --success:#33d391;
  --danger:#ff6b6f;
  --warn:#ffc65c;
  --header-bg:rgba(11,21,48,.85);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100vh;
  background:var(--bg);
  color:var(--text);
  font-family:'Segoe UI',Roboto,system-ui,-apple-system,sans-serif;
  transition:background .2s ease,color .2s ease;
}
a{color:var(--primary);text-decoration:none}
.container{max-width:1080px;margin:0 auto;padding:0 16px}

/* ===== Header ===== */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;background:var(--header-bg);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.topbar-left{display:flex;align-items:center;gap:10px}
.icon-btn{
  width:40px;height:40px;border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);background:var(--card);
  color:var(--text);cursor:pointer;transition:background .15s ease;
}
.icon-btn:hover{background:var(--border)}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:18px}
.brand img{width:30px;height:30px;border-radius:8px}

.balance-pill{
  display:flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:999px;
  background:var(--card);border:1px solid var(--border);
  font-weight:700;box-shadow:var(--shadow);
}
.balance-pill svg{color:var(--primary)}

/* ===== Side Menu ===== */
.menu-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.35);
  display:none;z-index:50;
}
.menu-overlay.open{display:block}
.side-menu{
  position:fixed;top:0;left:0;bottom:0;width:270px;
  background:var(--card);border-right:1px solid var(--border);
  transform:translateX(-100%);transition:transform .18s ease;
  z-index:60;padding:18px 14px;overflow-y:auto;
}
.side-menu.open{transform:translateX(0)}
.side-menu a{
  display:flex;align-items:center;gap:10px;
  padding:11px 12px;border-radius:var(--radius-sm);
  color:var(--text);font-weight:600;margin-bottom:4px;
}
.side-menu a:hover{background:var(--border)}
.side-menu .section-title{
  font-size:12px;color:var(--text-dim);text-transform:uppercase;
  margin:14px 6px 6px;letter-spacing:.06em;
}

/* ===== Cards / Buttons ===== */
.card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);
}
.grid{display:grid;gap:14px}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:720px){.grid-2,.grid-3{grid-template-columns:1fr}}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 18px;border-radius:999px;border:1px solid transparent;
  background:var(--primary);color:#fff;font-weight:700;cursor:pointer;
  transition:background .15s ease, transform .05s ease;
}
.btn:hover{background:var(--primary-dark)}
.btn:active{transform:scale(.98)}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn-outline:hover{background:var(--border)}
.btn-danger{background:var(--danger)}
.btn-danger:hover{background:#c93a3e}
.btn-success{background:var(--success)}
.btn-sm{padding:7px 12px;font-size:13px;border-radius:var(--radius-sm)}
.btn-block{width:100%}

input,select,textarea{
  width:100%;padding:11px 13px;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--bg-solid);color:var(--text);
  font-size:15px;
}
label{font-weight:600;font-size:14px;color:var(--text-dim);display:block;margin-bottom:6px}
.form-row{margin-bottom:14px}

.badge{
  display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;
}
.badge-pending{background:#fff3d6;color:#a8710a}
.badge-success{background:#dcf7ea;color:#0f8a52}
.badge-danger{background:#fde0e1;color:#c1272d}
[data-theme="dark"] .badge-pending{background:#463a17;color:#ffcf70}
[data-theme="dark"] .badge-success{background:#12352a;color:#4be8a6}
[data-theme="dark"] .badge-danger{background:#3e1618;color:#ff8b8e}

.table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--border)}
table{width:100%;border-collapse:collapse;background:var(--card)}
th,td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--border);font-size:14px}
th{color:var(--text-dim);font-size:12px;text-transform:uppercase}
tr:last-child td{border-bottom:none}
tr.clickable{cursor:pointer}
tr.clickable:hover{background:var(--border)}

.notice{
  border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:12px 14px;background:var(--card);color:var(--text-dim);font-size:14px;
}

/* ===== Popup / Modal ===== */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.4);
  display:none;align-items:center;justify-content:center;z-index:100;padding:16px;
}
.modal-overlay.open{display:flex}
.modal{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  max-width:480px;width:100%;padding:22px;box-shadow:var(--shadow-md);
  max-height:88vh;overflow-y:auto;
}
.modal h3{margin-top:0}
.modal-close{float:right;cursor:pointer;color:var(--text-dim)}

/* ===== Auth pages ===== */
.auth-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
}
.auth-card{width:100%;max-width:400px}
.auth-logo{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:20px}
.auth-logo img{width:56px;height:56px;border-radius:14px}

/* ===== Footer / bottom nav (mobile) ===== */
.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:none;background:var(--header-bg);backdrop-filter:blur(8px);
  border-top:1px solid var(--border);padding:6px 8px;
  justify-content:space-around;
}
.bottom-nav a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--text-dim);padding:6px}
.bottom-nav a.active{color:var(--primary)}
@media(max-width:720px){
  .bottom-nav{display:flex}
  body{padding-bottom:64px}
}

.page-title{font-size:20px;font-weight:800;margin:18px 0 12px}
.subtle{color:var(--text-dim);font-size:13px}
.stat-num{font-size:26px;font-weight:800}
.mb-0{margin-bottom:0}
.flex{display:flex;align-items:center}
.gap-8{gap:8px}
.gap-12{gap:12px}
.justify-between{justify-content:space-between}
.mt-16{margin-top:16px}
.text-center{text-align:center}