/* AccountPro India — shared stylesheet for all pages */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&family=Permanent+Marker&display=swap');

:root{
  --ink:#1A1A1A; --paper:#FFFFFF;
  --navy:#1A1A1A; --navy-2:#3F4B49;
  --line:#E6E6E6; --line-strong:#D6D6D6;
  --serif:"Source Serif 4",serif; --sans:"IBM Plex Sans",sans-serif; --mono:"IBM Plex Mono",monospace;
  --radius:8px;
  /* Brand teal, used the same everywhere — no per-module color variation */
  --accent:#058F7A; --accent-dark:#046B5A; --accent-soft:#E3F5F1;
  /* Brand coral — headlines, underlines, card accents */
  --coral:#FF5A5A; --coral-dark:#E64545; --coral-soft:#FFEAEA;
  --royal-gradient:linear-gradient(94deg, #058F7A 0%, #046B5A 100%);
}
body.page-accounting, body.page-gst, body.page-manufacturing, body.page-sap,
body.page-calculator, body.page-admin, body.page-home{ --accent:#058F7A; --accent-dark:#046B5A; --accent-soft:#E3F5F1; }

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:15.5px; line-height:1.55; overflow-x:hidden;}
h1,h2,h3,h4{font-family:var(--serif); color:var(--ink); margin:0 0 .4em; font-weight:600;}
h1{font-weight:700;}
p{margin:0 0 1em;}
a{color:var(--accent); text-decoration:none;}
button{font-family:var(--sans); cursor:pointer;}
input, select, textarea{font-family:var(--mono); font-size:.95rem; padding:8px 10px; border:1px solid var(--line-strong); background:#fff; border-radius:4px; color:var(--ink); width:100%;}
input:focus, select:focus, textarea:focus, button:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
label{font-size:.83rem; color:var(--navy-2); display:block; margin-bottom:4px;}
.field{margin-bottom:14px;}
.cond-field{display:none;}
.cond-field.show{display:block;}
code{background:var(--line); padding:1px 5px; border-radius:3px; font-family:var(--mono); font-size:.9em;}

.btn{background:var(--accent); color:#fff; border:1px solid var(--accent); padding:10px 18px; border-radius:6px; font-size:.92rem; font-weight:500;}
.btn:hover{filter:brightness(1.08);}
.btn.ghost{background:transparent; color:var(--accent); border:1px solid var(--line-strong);}
.btn.ghost:hover{background:rgba(0,0,0,.04);}
.btn.small{padding:6px 12px; font-size:.82rem;}
.btn.outline{background:#fff; color:var(--accent); border:1px solid var(--accent);}

/* ---------- Topbar ---------- */
header.topbar{position:sticky; top:0; z-index:30; background:#fff; border-bottom:1px solid var(--line-strong); display:flex; flex-direction:column;}
.brand-band{background:var(--accent); display:flex; align-items:center; gap:18px; padding:12px 32px;}
.brand{display:flex; align-items:center; gap:16px; flex:0 0 auto; cursor:pointer;}
.brand-badge{width:64px; height:64px; border-radius:50%; background:#fff; border:3px solid var(--accent-dark); flex:0 0 auto; overflow:hidden;}
.brand-badge img{width:100%; height:100%; object-fit:cover; display:block;}
.brand-logo{height:34px; width:auto; display:block;}
.brand .mark{width:38px; height:38px; border-radius:8px; background:linear-gradient(135deg,var(--navy),var(--navy-2)); color:#fff; font-family:var(--serif); font-weight:700; font-size:1.05rem; display:flex; align-items:center; justify-content:center;}
.brand-wordmark{font-family:'Permanent Marker', cursive; color:#fff; font-size:2rem; letter-spacing:.01em; line-height:1;}
.brand b{font-family:var(--serif); font-size:1rem; color:var(--navy); display:block; line-height:1.15;}
.brand b span{color:var(--accent);}
.brand small{color:#6b6858; font-size:.68rem;}
.nav-band{display:flex; align-items:center; padding:2px 20px; position:relative;}
nav.topnav{display:flex; align-items:center; justify-content:center; gap:6px; flex:1 1 auto; flex-wrap:wrap;}
nav.topnav > a, .nav-dropdown .dropdown-toggle{color:var(--coral); font-size:.86rem; font-weight:700; letter-spacing:.01em; padding:12px 14px; border-radius:6px; border-bottom:3px solid transparent; text-transform:uppercase;}
nav.topnav > a:hover, .nav-dropdown .dropdown-toggle:hover{background:var(--coral-soft);}
nav.topnav > a.active, .nav-dropdown .dropdown-toggle.active{color:var(--accent-dark); border-bottom-color:var(--accent-dark);}
.nav-dropdown{position:relative;}
.nav-dropdown .dropdown-toggle{display:inline-flex; align-items:center; gap:4px; cursor:pointer; background:none; border:none; border-radius:6px; font-family:var(--sans);}
.nav-dropdown .caret{font-size:.7em; transition:transform .15s;}
.nav-dropdown.open .caret{transform:rotate(180deg);}
.dropdown-menu{display:none; position:absolute; top:calc(100% + 6px); left:0; background:#fff; border:1px solid var(--line-strong); border-radius:8px; box-shadow:0 12px 28px rgba(0,0,0,.12); padding:6px; min-width:230px; z-index:50;}
.dropdown-menu a{display:block; padding:9px 12px; font-size:.82rem; font-weight:500; color:#3a3830; border-radius:6px; text-transform:none;}
.dropdown-menu a:hover{background:var(--accent-soft); color:var(--accent-dark);}
.dropdown-menu a.active{color:var(--accent-dark); font-weight:700; background:var(--accent-soft);}
@media(min-width:981px){ .nav-dropdown:hover .dropdown-menu{display:block;} }
.nav-dropdown.open .dropdown-menu{display:block;}
@media(max-width:600px){ .dropdown-menu{min-width:0; width:200px;} }
.actions{display:flex; align-items:center; gap:14px; position:absolute; right:20px; top:50%; transform:translateY(-50%); font-size:1rem;}
.actions button{background:none; border:none; font-size:1.05rem; color:#4b4a44; padding:4px;}
.actions .avatar{width:32px; height:32px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:600; font-family:var(--mono);}
.quick-search{display:none; align-items:center; gap:6px; position:absolute; right:24px; top:56px; background:#fff; border:1px solid var(--line-strong); border-radius:8px; padding:8px; box-shadow:0 6px 20px rgba(0,0,0,.08); z-index:40;}
.quick-search.show{display:flex;}
.quick-search input{width:220px;}
@media(max-width:980px){ .brand-band{padding:10px 16px;} .brand-wordmark{font-size:1.5rem;} .actions{position:static; transform:none; margin-left:auto;} .nav-band{flex-wrap:wrap;} nav.topnav{flex-wrap:wrap;} }

/* ---------- Layout: sidebar + main ---------- */
.layout{display:flex; align-items:flex-start; max-width:1240px; margin:0 auto; padding:22px 24px 80px;}
aside.sidebar{flex:0 0 220px; position:sticky; top:66px; background:var(--royal-gradient); border-radius:var(--radius); padding:14px; display:flex; flex-direction:column; gap:2px; margin-right:24px;}
aside.sidebar a{color:#fff; opacity:.78; font-size:.85rem; padding:9px 10px; border-radius:6px; display:flex; align-items:center; gap:8px;}
aside.sidebar a span{opacity:.7; font-size:.8rem;}
aside.sidebar a:hover, aside.sidebar a.active{opacity:1; background:rgba(255,255,255,.14);}
.side-tip{margin-top:14px; background:rgba(255,255,255,.08); border-radius:6px; padding:14px; color:#fff;}
.side-tip h4{color:#fff; font-size:.85rem; margin:0 0 8px; font-family:var(--sans);}
.side-tip{font-size:.78rem; line-height:1.5; color:#dbe1ee;}
.side-tip button{margin-top:10px; background:none; border:none; color:#fff; font-size:.76rem; font-weight:600; padding:0;}
main.content{flex:1 1 auto; min-width:0;}
@media(max-width:980px){
  .layout{padding-top:14px; flex-direction:column;}
  aside.sidebar{
    display:flex; flex-direction:row; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    position:static; width:100%; max-width:100%; margin:0 0 16px 0; padding:10px 12px; gap:6px;
  }
  aside.sidebar a{white-space:nowrap; flex:0 0 auto;}
  aside.sidebar .side-tip{display:none;}
}

/* ---------- Hero ---------- */
section.hero{background:var(--royal-gradient); color:#fff; border-radius:var(--radius); padding:34px 32px; margin-bottom:20px; position:relative; overflow:hidden;}
section.hero::after{content:"₹"; position:absolute; right:24px; top:0; font-size:7rem; font-family:var(--serif); opacity:.1; line-height:1;}
section.hero h1{color:#fff; font-size:1.9rem; margin-bottom:8px;}
section.hero p{color:#e7e9f2; max-width:62ch; margin-bottom:14px;}
section.hero .btn{background:#fff; color:var(--accent-dark); border-color:#fff;}

/* ---------- Stats ---------- */
section.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px;}
@media(max-width:820px){section.stats{grid-template-columns:repeat(2,1fr);}}
.stat{background:#fff; border:1px solid var(--line-strong); border-radius:var(--radius); padding:14px 16px; display:flex; align-items:center; gap:12px;}
.stat .bubble{width:38px; height:38px; border-radius:10px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:1.05rem; flex:0 0 auto;}
.stat b{display:block; font-family:var(--mono); font-size:1.15rem; color:var(--navy);}
.stat .muted{font-size:.76rem; color:#6b6858;}

/* ---------- Cards & content grid ---------- */
section.grid{display:grid; grid-template-columns:2fr 1fr; gap:20px; align-items:start;}
@media(max-width:980px){section.grid{grid-template-columns:1fr;}}
.card{background:#fff; border:1px solid var(--line-strong); border-radius:var(--radius); padding:20px 22px; margin-bottom:18px;}
.card.soft{background:var(--accent-soft); border-color:var(--accent-soft);}
.card .title{font-family:var(--serif); font-weight:600; color:var(--navy); font-size:1.05rem; margin-bottom:12px;}
.card .hint{color:#5b5849; font-size:.86rem; margin:-6px 0 14px;}
.tabs{display:flex; gap:16px; border-bottom:1px solid var(--line); margin-bottom:12px; font-size:.82rem; color:#6b6858;}
.tabs span{padding-bottom:8px; cursor:default;}
.tabs span.on{color:var(--accent); border-bottom:2px solid var(--accent); font-weight:600;}
ul.quick{list-style:none; margin:0; padding:0;}
ul.quick li{display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line); font-size:.87rem; color:#3a3830;}
ul.quick li:last-child{border-bottom:none;}
ul.quick li span{color:var(--accent);}
.pill{background:var(--accent-soft); color:var(--accent); font-size:.68rem; font-weight:700; padding:2px 8px; border-radius:20px;}
.subhead{font-size:.95rem; color:var(--navy); font-weight:600; margin:14px 0 4px;}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
@media(max-width:820px){.grid2,.grid3,.grid4{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.grid2,.grid3,.grid4{grid-template-columns:1fr;}}

/* ---------- Tables ---------- */
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}
table{border-collapse:collapse; font-size:.9rem; width:100%;}
.table-scroll table{min-width:460px;}
th, td{padding:8px 10px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap;}
td.wrap-cell{white-space:normal;}
th{color:var(--navy-2); font-weight:600; font-size:.78rem; border-bottom:2px solid var(--line-strong);}
td.num, th.num{text-align:right; font-family:var(--mono);}
tr.total td{border-top:2px solid var(--line-strong); border-bottom:none; font-weight:600;}
.je-narr td{color:#6b6858; font-size:.83rem; padding-top:0; padding-bottom:12px; border-bottom:1px dashed var(--line); white-space:normal;}
table.ledger{font-family:var(--mono);}

/* ---------- Result boxes, checklines, accordions ---------- */
.result-box{background:var(--accent-soft); border:1px solid var(--line-strong); border-left:4px solid var(--accent); padding:14px 16px; border-radius:6px; margin-top:12px;}
.result-box .big{font-family:var(--mono); font-size:1.45rem; color:var(--navy); font-weight:600;}
.result-box .row{display:flex; justify-content:space-between; gap:10px; padding:4px 0; font-size:.88rem;}
.result-box .row span:last-child{font-family:var(--mono); text-align:right;}
.checkline{font-family:var(--mono); font-size:.82rem; margin-top:10px; padding:8px 10px; border-radius:6px;}
.ok{background:#e6f2ec; color:#1F7A4D;}
.bad{background:#fbe3e3; color:#a02a2a;}
.empty-state{border:1px dashed var(--line-strong); border-radius:6px; padding:22px; text-align:center; color:#6b6858; font-size:.9rem;}

details.accordion{border:1px solid var(--line-strong); border-radius:6px; margin-bottom:9px; background:#fff;}
details.accordion summary{padding:12px 15px; cursor:pointer; font-weight:600; color:var(--navy); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:.92rem;}
details.accordion summary::-webkit-details-marker{display:none;}
details.accordion summary::after{content:"+"; font-family:var(--mono); color:var(--accent); font-size:1.05rem;}
details.accordion[open] summary::after{content:"–";}
details.accordion .body{padding:0 15px 15px; color:#3a3830; font-size:.9rem;}
details.accordion .body ol, details.accordion .body ul{padding-left:20px; margin:0;}
details.accordion .body li{margin-bottom:6px;}

.txn-row{display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end; margin-bottom:14px;}
.txn-row .field{flex:1 1 200px; margin-bottom:0;}

.tcode-search{margin-bottom:12px;}
.tcode-filters{display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap;}
.tcode-filters select{width:auto; min-width:160px;}
.tcode-count{font-size:.78rem; color:#6b6858; margin-bottom:10px;}

.flow{display:flex; flex-direction:column; gap:0; margin:6px 0 4px;}
.flow .step{display:flex; align-items:center; gap:12px; padding:9px 0; flex-wrap:wrap;}
.flow .step .n{font-family:var(--mono); color:var(--accent); font-weight:600; width:20px;}
.flow .step .t{font-weight:600; color:var(--navy);}
.flow .step .d{color:#5b5849; font-size:.84rem;}
.flow .arrow{margin-left:10px; color:var(--accent); font-family:var(--mono);}

.video{aspect-ratio:16/9; background:var(--navy); border-radius:6px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.6rem;}
.progress{background:var(--line); border-radius:20px; height:6px; margin:8px 0 4px; overflow:hidden;}
.progress i{display:block; height:100%; background:var(--accent);}
.muted{color:#6b6858; font-size:.8rem;}
.row{display:flex; align-items:center; gap:10px; padding:9px 0;}
.grow{flex:1 1 auto;}
.icon{width:30px; height:30px; border-radius:6px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:.9rem; flex:0 0 auto;}

/* ---------- Footer ---------- */
footer.footer{background:var(--royal-gradient); color:#dbe1ee; padding:26px 24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; font-size:.82rem;}
footer.footer b{color:#fff; font-family:var(--serif);}
footer.footer .links{display:flex; gap:16px; flex-wrap:wrap;}
footer.footer .links span, footer.footer a{color:#dbe1ee; cursor:pointer;}
footer.footer a{opacity:.6; font-size:.72rem;}

@media(max-width:600px){
  input, select, textarea{font-size:16px;}
  .card{padding:16px;}
  section.hero{padding:24px 20px;}
}
@media print{
  header.topbar, aside.sidebar, footer.footer, .actions, .quick-search{display:none !important;}
  .layout{padding:0; max-width:none;}
  .card{break-inside:avoid;}
}
/* Used by app.js's downloadPagePDF() — same idea as @media print, but as a
   real class, since html2canvas renders screen styles, not print styles. */
body.pdf-export header.topbar, body.pdf-export aside.sidebar, body.pdf-export footer.footer,
body.pdf-export .actions, body.pdf-export .quick-search, body.pdf-export .no-pdf{ display:none !important; }
body.pdf-export .layout{ padding:0; max-width:none; }
body.pdf-export main.content{ padding:20px; }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

/* ---------- Modal (public login/register) ---------- */
.modal-overlay{position:fixed; inset:0; background:rgba(20,20,20,.5); display:none; align-items:center; justify-content:center; z-index:100; padding:20px;}
.modal-overlay.show{display:flex;}
.modal-box{background:#fff; border-radius:10px; padding:26px 24px; max-width:360px; width:100%; position:relative;}
.modal-close{position:absolute; top:10px; right:12px; background:none; border:none; font-size:1.3rem; color:#6b6858; line-height:1;}
.modal-tabs{display:flex; gap:4px; margin-bottom:16px; background:var(--paper); border-radius:6px; padding:3px;}
.modal-tabs button{flex:1; background:none; border:none; padding:8px; font-size:.82rem; border-radius:5px; color:#6b6858;}
.modal-tabs button.on{background:#fff; color:var(--accent); font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,.1);}

/* ---------- Trust badge / hero pill ---------- */
.trust-badge{display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.14); color:#fff; font-size:.75rem; font-weight:600; letter-spacing:.02em; padding:6px 14px; border-radius:20px; margin-bottom:16px;}

/* ---------- Resource list (Popular Resources on homepage) ---------- */
.resource-list{list-style:none; margin:0; padding:0;}
.resource-list li{display:flex; justify-content:space-between; align-items:center; padding:11px 0; border-bottom:1px solid var(--line); font-size:.88rem; color:#3a3830;}
.resource-list li:last-child{border-bottom:none;}
.resource-list li a{font-size:.78rem; font-weight:600; color:var(--accent); border:1px solid var(--accent); padding:4px 12px; border-radius:20px;}
.resource-list li a:hover{background:var(--accent); color:#fff;}

/* ---------- Quiz ---------- */
.quiz-q{border:1px solid var(--line-strong); border-radius:8px; padding:16px; margin-bottom:12px;}
.quiz-q p.q-text{font-weight:600; color:var(--navy); margin-bottom:10px;}
.quiz-q label{display:flex; align-items:center; gap:8px; font-size:.88rem; color:#3a3830; padding:6px 0; cursor:pointer; font-family:var(--sans); text-transform:none;}
.quiz-q input[type=radio]{width:auto;}
.quiz-q .explain{display:none; margin-top:8px; font-size:.82rem; padding:8px 10px; border-radius:6px;}
.quiz-q.answered .explain{display:block;}
.quiz-q.correct .explain{background:#e6f2ec; color:#1F7A4D;}
.quiz-q.incorrect .explain{background:#fbe3e3; color:#a02a2a;}

/* ---------- Simple prose section (about/resources pages) ---------- */
.prose h2{margin-top:0;}
.prose dl{margin:0;}
.prose dt{font-weight:600; color:var(--navy); margin-top:14px;}
.prose dd{margin:4px 0 0; color:#3a3830; font-size:.92rem;}

/* ---------- Learning content (worked examples, formulas) ---------- */
.example-box{background:#fffdf5; border:1px solid var(--line-strong); border-left:4px solid #c9971f; border-radius:6px; padding:14px 16px; margin:14px 0; font-size:.89rem;}
.example-box .ex-label{font-weight:700; color:#946600; font-size:.75rem; text-transform:uppercase; letter-spacing:.03em; margin-bottom:8px;}
.formula-box{background:var(--accent-soft); border-radius:6px; padding:10px 14px; margin:10px 0; font-family:var(--mono); font-size:.86rem; color:var(--navy); text-align:center;}
.chapter-kicker{font-family:var(--mono); font-size:.72rem; color:var(--accent); letter-spacing:.04em; margin-bottom:4px;}
.prose h4{color:var(--navy); font-size:.98rem; margin:20px 0 8px; border-bottom:1px solid var(--line); padding-bottom:4px;}
.prose h4:first-child{margin-top:0;}