:root { --side: #13315c; --side-hover: #1d4a85; --accent: #0b7a75;
        --c50: #E6F1FB; --c100: #B5D4F4; --c400: #85B7EB; --c600: #185FA5; --c800: #0C447C; }
/* Each system has its own colour, used by its sidebar entry and its cards on the menu panel */
[data-k="home"], [data-k="rep"] { --c50: #E6F1FB; --c100: #B5D4F4; --c400: #85B7EB; --c600: #185FA5; --c800: #0C447C; }
[data-k="bill"] { --c50: #FBEAF0; --c100: #F4C0D1; --c400: #ED93B1; --c600: #993556; --c800: #72243E; }
[data-k="gl"] { --c50: #EEEDFE; --c100: #CECBF6; --c400: #AFA9EC; --c600: #534AB7; --c800: #3C3489; }
[data-k="sales"] { --c50: #E1F5EE; --c100: #9FE1CB; --c400: #5DCAA5; --c600: #0F6E56; --c800: #085041; }
[data-k="purch"] { --c50: #FAECE7; --c100: #F5C4B3; --c400: #F0997B; --c600: #993C1D; --c800: #712B13; }
[data-k="inv"] { --c50: #FAEEDA; --c100: #FAC775; --c400: #EF9F27; --c600: #854F0B; --c800: #633806; }
[data-k="fa"] { --c50: #F1EFE8; --c100: #D3D1C7; --c400: #B4B2A9; --c600: #5F5E5A; --c800: #444441; }
[data-k="pay"] { --c50: #EAF3DE; --c100: #C0DD97; --c400: #97C459; --c600: #3B6D11; --c800: #27500A; }
[data-k="tax"] { --c50: #FCEBEB; --c100: #F7C1C1; --c400: #F09595; --c600: #A32D2D; --c800: #791F1F; }
[data-k="set"] { --c50: #E8EDF5; --c100: #C9D6E8; --c400: #8FA6C8; --c600: #3F5A82; --c800: #24385A; }
body { font-family: "IBM Plex Sans Thai", "Leelawadee UI", "Noto Sans Thai", Tahoma, system-ui, sans-serif; background: #f4f6fa; font-size: 15px; }
.sidebar { width: 240px; height: 100vh; background: var(--side); position: fixed; top: 0; left: 0; overflow-y: auto;
           padding-bottom: 1.5rem; scrollbar-width: thin; scrollbar-color: #3b5f91 transparent; }
/* Main menu headers: bigger, bold, in their system's colour — clearly different from the sub-items below them */
.sidebar details.grp > summary.sec { list-style: none; cursor: pointer; display: flex; justify-content: space-between;
           align-items: center; margin: 4px 8px 0; padding: .45rem .55rem; border-radius: 6px; user-select: none; white-space: nowrap;
           font-size: 1.02rem; font-weight: 700; color: var(--c100); text-transform: none; letter-spacing: 0; }
.sidebar details.grp > summary::-webkit-details-marker { display: none; }
.sidebar details.grp > summary::after { content: "▸"; font-size: .85rem; transition: transform .15s; }
.sidebar details.grp[open] > summary::after { transform: rotate(90deg); }
.sidebar details.grp > summary:hover { background: var(--side-hover); color: #fff; }
.sidebar details.grp[open] > summary.sec { background: rgba(255, 255, 255, .07); }
.sidebar > a.active { color: #fff; }
/* Sub-items: smaller, lighter blue, indented under their header */
.sidebar details.grp > a { font-size: .86rem; color: #c5d3ea; padding: .35rem .8rem .35rem 1.2rem; margin: 1px 8px; }
.sidebar details.grp > a:hover { color: #fff; }
.sidebar details.grp > .menu-sub { color: var(--c100); font-size: .92rem; font-weight: 700; padding: .55rem 1rem .15rem 1.4rem; }
.sidebar details.grp > a.active { color: #fff; font-weight: 600; }
.sidebar .nav-tools { color: #8fa6c8; font-size: .75rem; padding: .4rem 1.1rem 0; }
.sidebar .nav-tools button { background: none; border: 0; color: #b9c9e2; padding: 0; font-size: .75rem; }
.sidebar .nav-tools button:hover { color: #fff; text-decoration: underline; }
.sidebar a { color: #dbe4f3; text-decoration: none; display: flex; align-items: center; gap: .55rem; padding: .45rem 1.1rem; border-radius: 6px; margin: 1px 8px; }
/* Must come after .sidebar a, which has the same specificity */
.sidebar > a { font-size: 1.02rem; font-weight: 700; color: var(--c100); padding: .45rem .55rem; }
.sidebar a:hover, .sidebar a.active { background: var(--side-hover); color: #fff; }
.sidebar .sec { color: #8fa6c8; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; padding: .9rem 1.1rem .3rem; }
.sidebar .soon { color: #6f86a8; padding: .3rem 1.1rem; margin: 1px 8px; font-size: .9rem; }
.brand { display: flex; align-items: center; gap: .55rem; color: #fff; padding: .85rem 1.05rem; border-bottom: 1px solid #2a4c7c; }
.brand-name { font-family: "Plus Jakarta Sans", "IBM Plex Sans Thai", sans-serif; font-weight: 600; font-size: 1.45rem; letter-spacing: -.4px; line-height: 1; }
.brand-name span { color: #38BDF8; font-weight: 800; }
main { margin-left: 240px; padding: 1.25rem 1.75rem; }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; gap: 1rem; flex-wrap: wrap; }
.card { border: 0; box-shadow: 0 1px 3px rgba(16, 30, 60, .08); border-radius: 10px; }
.kpi .label { color: #6b7a90; font-size: .85rem; }
.kpi .value { font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.report td, table.report th { padding: .35rem .6rem; }
table.report .total td { font-weight: 700; border-top: 2px solid #333; }
table.report .grand td { font-weight: 700; border-top: 2px solid #333; border-bottom: 4px double #333; }
table.report .grp td { font-weight: 600; background: #f0f3f8; }
.lines td { vertical-align: top; }
.lines input, .lines select { font-size: .92rem; }
.badge-draft { background: #f0ad4e; } .badge-posted, .badge-issued, .badge-paid { background: #198754; } .badge-void { background: #9aa3ad; }
@media (max-width: 900px) {
  .sidebar { display: none; position: static; width: 100%; height: auto; }
  .sidebar.show { display: block; }
  main { margin-left: 0; padding: 1rem; }
}
@media print { .sidebar, .no-print { display: none !important; } main { margin: 0; padding: 0; } .card { box-shadow: none; } }
.sidebar summary span { display: flex; align-items: center; }
.sidebar summary .bi { margin-right: .5rem; }
.sidebar .menu-sub .bi { margin-right: .4rem; color: var(--c400); }
.sidebar summary .bi, .sidebar a > .bi { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px;
           background: rgba(255, 255, 255, .12); color: var(--c400); font-size: 1.05rem; }
.sidebar details.grp > a > .bi { width: 24px; height: 24px; border-radius: 7px; font-size: .85rem; }

.ss-panel { display: none; position: fixed; z-index: 2000; background: #fff; border: 1px solid #ccd4e0; border-radius: 8px; box-shadow: 0 8px 24px rgba(19, 49, 92, .18); padding: 8px; }
.ss-list { max-height: 280px; overflow-y: auto; margin-top: 6px; }
.ss-item { padding: .3rem .55rem; border-radius: 5px; cursor: pointer; font-size: .92rem; }
.ss-item:hover { background: #eef3fb; }
.ss-item.active { background: #0d6efd; color: #fff; }
.ss-none { padding: .4rem .55rem; color: #888; font-size: .9rem; }
@media print { .ss-panel { display: none !important; } }

.menu-panel { display: none; position: fixed; top: 0; right: 0; bottom: 0; z-index: 1040; background: #f4f6fa; overflow-y: auto; padding: 1.5rem 2rem 3rem; }
.menu-panel-head { position: relative; text-align: center; margin-bottom: 1.1rem; }
.menu-panel-head h4 { margin: 0 4rem; color: var(--c800); font-weight: 700; }
.menu-panel-head::after { content: ""; display: block; width: 90px; height: 3px; margin: .4rem auto 0; border-radius: 2px; background: var(--c600); }
.menu-panel-head button { position: absolute; top: 0; right: 0; }
.mp-sub { font-weight: 700; color: var(--c800); margin: 1.25rem 0 .75rem; }
.mp-sub .bi { margin-right: .4rem; color: var(--c600); }
.mp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1.25rem .75rem; }
.mp-flow { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: .75rem; background: #fff; border: 1px solid var(--c100); border-radius: 12px; padding: 1.1rem .75rem; }
.mp-flow .mp-item { width: 170px; }
.mp-arrow { font-size: 1.6rem; color: var(--c400); padding-top: 1.3rem; }
.mp-item { position: relative; min-width: 0; }
.mp-main { display: flex; flex-direction: column; align-items: center; gap: .5rem; color: var(--c800); font-size: .9rem; font-weight: 700; line-height: 1.3; text-align: center; text-decoration: none; }
.mp-main:hover { color: var(--c800); }
.mp-icon { display: flex; align-items: center; justify-content: center; width: 74px; height: 74px; border: 1.5px solid var(--c400); border-radius: 18px; background: var(--c50); color: var(--c600); font-size: 2rem; }
.mp-main:hover .mp-icon { border-color: var(--c600); background: var(--c100); }
.mp-item.active .mp-icon { border: 2px solid var(--c600); background: var(--c100); }
.mp-acts { position: absolute; top: 8px; left: calc(50% + 44px); display: flex; flex-direction: column; gap: 6px; }
.mp-acts a { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1.5px solid var(--c400); border-radius: 50%; background: #fff; color: var(--c600); font-size: .8rem; text-decoration: none; }
.mp-acts a:hover { border-color: var(--c600); background: var(--c600); color: #fff; }