/* आपले मंडळ — shared design tokens (festival theme) */
:root {
  --bg:#FBF3E3; --ink:#2B2620; --sub:#8A7A5C; --accent:#E07B1A; --accent2:#7A2048;
  --income:#2F6B4F; --expense:#B23A2E; --card:#FFFFFF; --border:#EADFC2;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#241A12; --ink:#F2E8D6; --sub:#C2AF8C; --accent:#F0A030; --accent2:#D98CAE;
    --income:#6FCB9C; --expense:#E88178; --card:#2E2216; --border:#4A3A26;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Noto Sans Devanagari', 'Noto Sans', sans-serif;
  background: var(--bg);
  color: var(--ink);
}
.wrap { max-width: 480px; margin: 0 auto; padding: 20px 16px 60px; }
.topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.topbar .brand { font-size:17px; font-weight:500; }
.topbar a.icon-btn, .topbar button.icon-btn { width:34px; height:34px; border-radius:50%; background:var(--accent2); color:#fff;
  display:flex; align-items:center; justify-content:center; text-decoration:none; border:none; cursor:pointer; font-size:14px; padding:0; }
.lang-select { width:auto; height:34px; padding:0 8px; margin:0; font-size:12px; border-radius:17px;
  border:1px solid var(--border); background:var(--card); color:var(--ink); }
.card { background: var(--card); border:1px solid var(--border); border-radius:12px; padding:16px; margin-bottom:14px; }
.hero-stamp { background: var(--accent2); border-radius:14px; padding:16px; text-align:center; margin-bottom:14px; }
.hero-stamp .lbl { font-size:12px; color:#F5DCE6; }
.hero-stamp .amt { font-size:26px; font-weight:500; color:#fff; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:14px; }
.metric .lbl { font-size:12px; color:var(--sub); }
.metric .val { font-size:17px; font-weight:500; }
.metric .val.income { color: var(--income); }
.metric .val.expense { color: var(--expense); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; border:none; border-radius:8px;
  padding:11px 16px; font-size:14px; font-weight:500; text-decoration:none; cursor:pointer; }
.btn-primary { background: var(--accent); color:#fff; }
.btn-outline { background: transparent; border:1px solid var(--accent2); color: var(--accent2); }
.btn-block { width:100%; }
.actions-row { display:flex; gap:10px; margin-bottom:16px; }
.actions-row .btn { flex:1; }
label { display:block; font-size:12px; color:var(--sub); margin-bottom:5px; }
input, select { width:100%; font-size:14px; padding:10px 12px; border:1px solid var(--border); border-radius:8px;
  background: var(--card); color: var(--ink); margin-bottom:14px; }
input:focus, select:focus { outline:2px solid var(--accent); outline-offset:1px; }
.toggle { display:inline-flex; border-radius:18px; background: var(--card); border:1px solid var(--border); padding:3px; margin-bottom:16px; }
.toggle button { font-size:13px; padding:7px 18px; border-radius:14px; border:none; background:transparent; color:var(--sub); cursor:pointer; }
.toggle button.on.income-on { background: var(--income); color:#fff; }
.toggle button.on.expense-on { background: var(--expense); color:#fff; }
.tab { font-size:12px; padding:6px 14px; border-radius:14px; border:1px solid var(--border); background:transparent; color:var(--sub); cursor:pointer; }
.tab.on { background: var(--accent); color:#fff; border-color: var(--accent); }
.row-list .row { display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid var(--border); font-size:13px; }
.row-list .row:last-child { border-bottom:none; }
.amt-in { color: var(--income); font-weight:500; }
.amt-out { color: var(--expense); font-weight:500; }
.err { background:#F5E4E1; color: var(--expense); font-size:12.5px; padding:10px 12px; border-radius:8px; margin-bottom:14px; }
.note { font-size:11.5px; color: var(--sub); }
.section-title { font-size:12px; color: var(--sub); margin: 4px 0 8px; }
.badge { display:inline-block; font-size:11px; padding:3px 10px; border-radius:10px; background: var(--border); color: var(--ink); }

/* साईडबार नेव्हिगेशन ड्रॉवर — मंडळ admin व platform admin दोन्हीकडे (renderMandalDrawer/renderPlatformDrawer, config.php) */
.drawer-overlay { position:fixed; inset:0; background:rgba(20,14,10,.5); z-index:200; opacity:0; visibility:hidden; transition:opacity .25s ease; }
.drawer-overlay.open { opacity:1; visibility:visible; }
.drawer-panel { position:fixed; top:0; left:0; bottom:0; width:280px; max-width:82vw; background:var(--card); z-index:201;
  transform:translateX(-100%); transition:transform .25s ease; overflow-y:auto; box-shadow:8px 0 30px rgba(0,0,0,.25); }
.drawer-panel.open { transform:translateX(0); }
.drawer-header { display:flex; align-items:center; justify-content:space-between; padding:16px; border-bottom:1px solid var(--border); }
.drawer-header .brand { font-size:15px; font-weight:600; color:var(--ink); }
.drawer-close { background:none; border:none; font-size:22px; line-height:1; color:var(--sub); cursor:pointer; padding:4px; }
.drawer-nav { padding:10px; display:flex; flex-direction:column; gap:2px; }
.drawer-group-title { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--sub);
  padding:16px 12px 6px; }
.drawer-group-title:first-child { padding-top:8px; }
.drawer-nav a { display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:8px; color:var(--ink); text-decoration:none; font-size:14px; }
.drawer-nav a i { width:18px; text-align:center; color:var(--accent2); flex-shrink:0; }
.drawer-nav a:hover { background:var(--bg); }
.drawer-nav a.active { background:var(--bg); color:var(--accent2); font-weight:600; }
@media (prefers-reduced-motion: reduce) { .drawer-overlay, .drawer-panel { transition:none; } }

/* Platform admin पानं (renderPlatformDrawer वापरणारी सर्व manage_*.php + platform_admin.php) —
   मंडळ-स्तरीय अ‍ॅपच्या मोबाईल-कार्ड .wrap पेक्षा वेगळी: पूर्ण-रुंदीचं डॅशबोर्ड लेआउट हवं आहे,
   आणि डेस्कटॉपवर साईडबार टॉगल/ओव्हरलेऐवजी कायम उघडा दिसावा. <body class="platform-page">
   टाकल्यावर आपोआप लागू होतं — प्रत्येक पानावर वेगळा CSS कॉपी-पेस्ट करावा लागत नाही. */
body.platform-page .wrap { max-width:1100px; padding:24px clamp(16px,3vw,32px) 60px; }
@media (min-width:960px) {
  body.platform-page #drawerToggle { display:none; }
  body.platform-page .drawer-overlay { display:none !important; }
  body.platform-page .drawer-panel { position:fixed; transform:none; box-shadow:none; border-right:1px solid var(--border); }
  body.platform-page .drawer-close { display:none; }
  body.platform-page .wrap { margin-left:296px; margin-right:0; }
}