/* Unified "professional accounting" shell: ONE fixed navy sidebar injected by accounting_shell.js on every accounting page. Minimal, clean, no clutter. The sidebar is position:fixed and the page content is shifted right by padding-left on , so it works on both the older header.topbar + .container pages and the newer .main pages. */ :root { --acct-side-w: 236px; } body.acct { padding-left: var(--acct-side-w); background:#f8fafc; } .acct-side { position:fixed; left:0; top:0; bottom:0; width:var(--acct-side-w); background:#0f172a; color:#e2e8f0; padding:14px 10px; overflow:auto; display:flex; flex-direction:column; z-index:60; box-sizing:border-box; } .acct-side .brand { font-weight:800; font-size:16px; padding:6px 10px 12px; letter-spacing:.2px; } .acct-side .side-search { margin:0 6px 10px; } .acct-side .side-search input { width:100%; box-sizing:border-box; border:1px solid #334155; background:#1e293b; color:#e2e8f0; border-radius:8px; padding:8px 10px; font-size:12.5px; } .acct-side .side-search input::placeholder { color:#64748b; } .acct-side a { display:block; color:#cbd5e1; text-decoration:none; padding:8px 12px; border-radius:8px; font-size:13.5px; margin:2px 0; } .acct-side a:hover { background:#1e293b; color:#fff; text-decoration:none; } .acct-side a.active { background:#2563eb; color:#fff; font-weight:700; } .acct-side .grp { color:#64748b; font-size:10.5px; text-transform:uppercase; font-weight:700; padding:12px 12px 4px; } .acct-side .spacer { flex:1 1 auto; } .acct-side .who { color:#93c5fd; font-size:11.5px; padding:8px 12px 2px; } .acct-side .logout { color:#fca5a5; font-size:12.5px; } .acct-side .logout:hover { color:#fff; } /* Hide the old horizontal top-menu everywhere the shell is active; keep the dark topbar as a page header. Pages without a topbar use their own

. / body.acct header.topbar nav { display:none !important; } body.acct header.topbar { box-shadow:none; } / Legacy alias kept so .main pages don't need restructuring. / .main { padding:22px 26px 60px; background:#f8fafc; } .main h1 { font-size:22px; } .main h2 { font-size:16px; margin:26px 0 10px; } @media (max-width: 860px) { body.acct { padding-left:0; } .acct-side { position:static; width:auto; flex-direction:row; flex-wrap:wrap; align-items:center; gap:2px; } .acct-side .brand { padding:6px 10px; } .acct-side .side-search { flex:1 1 160px; margin:6px; } .acct-side .spacer, .acct-side .who { display:none; } } .gsearch { display:flex; gap:8px; margin-bottom:18px; } .gsearch input { flex:1; padding:10px 14px; border:1px solid var(--border); border-radius:10px; font-size:14px; } .cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin:8px 0 22px; } .card { background:#fff; border:1px solid var(--border); border-radius:12px; padding:16px 18px; } .card .k { color:var(--muted); font-size:11px; font-weight:700; text-transform:uppercase; } .card .v { font-size:26px; font-weight:800; margin:6px 0 2px; } .card a { font-size:12px; } .samples { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; } .sample { background:#fff; border:1px solid var(--border); border-radius:12px; padding:16px 18px; } .sample .t { font-weight:800; margin-bottom:2px; } .sample .d { color:var(--muted); font-size:12.5px; margin-bottom:10px; } .panel { background:#fff; border:1px solid var(--border); border-radius:12px; padding:14px 16px; overflow-x:auto; } .panel table { width:100%; border-collapse:collapse; font-size:13px; } .panel th, .panel td { border-bottom:1px solid var(--border); padding:8px 10px; text-align:left; vertical-align:top; white-space:nowrap; } .panel th { color:var(--muted); font-size:11px; text-transform:uppercase; font-weight:700; } .panel td .narr { white-space:normal; max-width:320px; } .loading { color:var(--muted); } .btn.sm { padding:6px 12px; font-size:12.5px; } .btn[disabled], .btn.disabled { opacity:.5; cursor:not-allowed; } .input { border:1px solid var(--border); border-radius:8px; padding:6px 10px; font-size:13px; background:#fff; } .input.sm { padding:5px 8px; font-size:12.5px; } .warnbox { background:#fef3c7; color:#92400e; border:1px solid #fcd34d; padding:9px 13px; border-radius:8px; font-size:12.5px; font-weight:600; margin:8px 0 16px; } .help { background:#fff; border:1px solid var(--border); border-radius:10px; padding:8px 14px; margin:0 0 18px; font-size:13px; } .help summary { cursor:pointer; font-weight:700; } .help ul { margin:8px 0 4px; padding-left:18px; } / Print preview cards (cheque + generic) — clearly watermarked "preview only". */ .chq-preview, .gen-preview { border:1px dashed #94a3b8; border-radius:12px; padding:14px 16px; background:linear-gradient(135deg,#f8fafc,#eef2ff); margin:6px 0 14px; position:relative; } .chq-wm { font-size:10.5px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:#b91c1c; margin-bottom:8px; } .chq-row { display:flex; justify-content:space-between; gap:12px; font-size:13px; padding:3px 0; border-bottom:1px dotted #cbd5e1; } .chq-row span { color:var(--muted); } .chq-row b { text-align:right; } .chq-words { font-style:italic; font-size:12.5px; color:#334155; margin:6px 0; } .badge { font-size:11px; padding:2px 8px; border-radius:999px; font-weight:700; white-space:nowrap; } .b-ok { background:#dcfce7; color:#166534; } .b-info { background:#dbeafe; color:#1e40af; } .b-warn { background:#fef3c7; color:#92400e; } .b-muted { background:#e2e8f0; color:#475569; } .b-bad { background:#fee2e2; color:#991b1b; }