/* Accounting screens (UI-GL-01..12): SRS Appendix A list layout - card with dark grid header and an inline filter row,
   right-hand action panel (Add / Refresh / Close, filters for non-displayed fields, summary cards), Dr/Cr signed amounts. */

.gl-shell { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 14px; align-items: start; }
.gl-shell.wide-only { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1100px) { .gl-shell { grid-template-columns: minmax(0, 1fr); } .gl-shell > .gl-side { order: -1; } }

.gl-card { background: #fff; border: 1px solid #E3E8EE; border-radius: 12px; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); overflow: hidden; min-width: 0; }
.gl-card + .gl-card { margin-top: 14px; }
.gl-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid #EEF1F5; }
.gl-head .ttl { font-size: 1.12rem; font-weight: 600; color: #1D2939; display: inline-flex; align-items: center; gap: 8px; }
.gl-head .ttl .mud-icon-root { color: #1F5468; }
.gl-head .ent { color: #7A8796; font-size: .86rem; }
.gl-head .ent::before { content: "· "; }
.gl-head .grow { flex: 1 1 auto; }
.gl-head .show { display: inline-flex; align-items: center; gap: 6px; color: #667085; font-size: .84rem; }
.gl-head select, .gl-side select, .gl-filters select {
    border: 1px solid #D0D5DD; border-radius: 8px; padding: 5px 8px; background: #fff; font: inherit; font-size: .86rem; color: #1D2939; }

/* grid */
.gl-scroll { overflow: auto; max-height: calc(100vh - 250px); }
.gl-scroll.free { max-height: none; }
table.gl-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .875rem; }
table.gl-table thead th { position: sticky; top: 0; z-index: 2; background: #34495E; color: #fff; text-transform: uppercase; letter-spacing: .06em;
    font-size: .74rem; font-weight: 600; padding: 10px 10px; text-align: left; white-space: nowrap; }
table.gl-table thead tr.flt th { top: 37px; background: #4A6076; padding: 6px 8px; text-transform: none; letter-spacing: 0; }
table.gl-table thead tr.flt input { width: 100%; min-width: 60px; border: 0; border-radius: 6px; padding: 5px 8px; font: inherit; font-size: .8rem;
    background: #fff; color: #1D2939; }
table.gl-table thead tr.flt input::placeholder { color: #98A2B3; }
table.gl-table thead th.r, table.gl-table td.r { text-align: right; }
table.gl-table thead th.c, table.gl-table td.c { text-align: center; }
table.gl-table tbody td { padding: 8px 10px; border-bottom: 1px solid #EEF1F5; white-space: nowrap; color: #1D2939; vertical-align: middle; }
table.gl-table tbody tr:hover td { background: #F5F8FB; }
table.gl-table tbody tr.sel td { background: #E8F1FA; }
table.gl-table tbody tr.click { cursor: pointer; }
table.gl-table td.wrap { white-space: normal; min-width: 200px; }
table.gl-table td.code, .gl-mono { font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .84rem; }
table.gl-table td.name { font-weight: 600; white-space: normal; min-width: 200px; }
table.gl-table td.soft-wrap { white-space: normal; min-width: 130px; }
table.gl-table td.name.header { font-style: italic; color: #475467; }
table.gl-table td.ico { width: 34px; padding: 4px 2px; text-align: center; }
table.gl-table td.ico .mud-icon-button { padding: 4px; }
table.gl-table tfoot td { position: sticky; bottom: 0; background: #F2F5F8; font-weight: 600; padding: 9px 10px; border-top: 2px solid #D5DDE5; white-space: nowrap; }
table.gl-table tr.group td { background: #F7F9FB; font-weight: 600; color: #344054; text-transform: uppercase; font-size: .76rem; letter-spacing: .05em; }
table.gl-table tr.subtotal td { background: #FBFCFD; font-weight: 600; border-bottom: 1px solid #D5DDE5; }
.gl-empty { padding: 28px 16px; text-align: center; color: #667085; }

/* signed amounts (SRS 6.1 / Appendix A): debit "Dr", credit red in parentheses "Cr" */
.gl-amt { font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .84rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gl-amt.cr { color: #C0392B; }
.gl-amt.zero { color: #98A2B3; }
.gl-amt.dep { color: #1E8E5A; }
.gl-amt .s { color: #667085; margin-left: .35em; font-size: .78rem; }
.gl-amt.cr .s { color: #C0392B; }

/* footer / pager */
.gl-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid #EEF1F5; color: #475467; font-size: .85rem; }
.gl-foot .grow { flex: 1 1 auto; }
.gl-pager { display: inline-flex; gap: 4px; align-items: center; }
.gl-pager button { border: 1px solid #D0D5DD; background: #fff; border-radius: 8px; min-width: 34px; height: 32px; padding: 0 10px; font: inherit;
    font-size: .84rem; color: #344054; cursor: pointer; }
.gl-pager button:disabled { color: #C4CBD4; cursor: default; }
.gl-pager button.on { background: #1F5468; border-color: #1F5468; color: #fff; font-weight: 600; }

/* right action panel */
.gl-side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 76px; }
@media (max-width: 1100px) {
    .gl-side { position: static; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; align-items: end; }
    .gl-side > .gl-note { display: none; }
    .gl-side .gl-btn { min-height: 38px; }
    .gl-side .gl-box { padding: 4px 8px; }
    .gl-side .gl-total, .gl-side .gl-fy { padding: 8px; }
}
.gl-side .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 10px; min-height: 44px; padding: 0 16px;
    font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer; color: #fff; text-decoration: none; box-shadow: 0 1px 2px rgba(16, 24, 40, .12);
    transition: filter .15s ease, transform .05s ease; }
.gl-btn:hover { filter: brightness(1.07); }
.gl-btn:active { transform: translateY(1px); }
.gl-btn:disabled { opacity: .5; cursor: default; filter: none; }
.gl-btn.add { background: #1F5468; }
.gl-btn.ok { background: #2E9E62; }
.gl-btn.close { background: #E5872E; }
.gl-btn.blue { background: #2563EB; }
.gl-btn.ghost { background: #fff; color: #344054; border: 1px solid #D0D5DD; box-shadow: none; }
.gl-btn.sm { min-height: 34px; padding: 0 12px; font-size: .84rem; border-radius: 8px; }
.gl-btn .mud-icon-root { font-size: 1.15rem; }
.gl-box { background: #fff; border: 1px solid #E3E8EE; border-radius: 10px; padding: 10px 12px; }
.gl-box.check { display: flex; align-items: center; gap: 4px; }
.gl-box.check.on { background: #EEF5FB; border-color: #CFE0EF; }
.gl-side label.lbl, .gl-filters label.lbl { display: block; font-size: .78rem; font-weight: 600; color: #475467; margin: 2px 0 4px; }
.gl-side select { width: 100%; padding: 9px 10px; }
.gl-total { background: #fff; border: 1px solid #E3E8EE; border-radius: 10px; padding: 12px; text-align: center; color: #475467; }
.gl-total b { color: #1D2939; }
.gl-fy { background: #1F5468; color: #fff; border-radius: 10px; padding: 11px; text-align: center; font-weight: 700; letter-spacing: .02em; }
.gl-note { font-size: .78rem; color: #667085; line-height: 1.45; }
.gl-note b { color: #344054; }

/* filter bar (transaction list, inquiry, trial balance) */
.gl-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; padding: 12px 16px; border-bottom: 1px solid #EEF1F5; background: #FBFCFD; }
.gl-filters .f { display: flex; flex-direction: column; min-width: 150px; }
.gl-filters .f.wide { min-width: 240px; flex: 1 1 240px; }
.gl-filters input[type=date], .gl-filters input[type=text], .gl-filters input[type=number] {
    border: 1px solid #D0D5DD; border-radius: 8px; padding: 6px 8px; font: inherit; font-size: .86rem; color: #1D2939; background: #fff; }
.gl-chip { display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 10px; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; background: #EEF2F6; color: #475467; }
.gl-chip.open { background: #DDF5EA; color: #127A4B; }
.gl-chip.posted { background: #E1EFFE; color: #1E56A0; }
.gl-chip.pending { background: #FFF1D6; color: #9A5B00; }
.gl-chip.draft { background: #EEF2F6; color: #475467; }
.gl-chip.bad { background: #FDE2E1; color: #B42318; }
.gl-chip.locked { background: #E7E9EE; color: #344054; }
.gl-chip.soft { background: #EFE7FF; color: #5B3DB5; }
.gl-badge { display: inline-flex; align-items: center; gap: 4px; border-radius: 8px; padding: 4px 10px; background: #EEF5FB; color: #1F5468; font-weight: 700; font-size: .8rem; }

/* account register entry panel (Appendix A 'Account Register') */
.gl-entry { background: #FBF7EC; border-bottom: 1px solid #EFE6CF; padding: 14px 16px; }
.gl-entry .top { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.gl-entry .top h2 { font-size: 1.05rem; font-weight: 700; margin: 0; color: #1D2939; }
.gl-entry .top .hint { color: #7A8796; font-size: .82rem; }
.gl-entry .top .fig { color: #667085; font-size: .86rem; }
.gl-entry .top .fig b { font-family: "Roboto Mono", ui-monospace, monospace; color: #1F5468; margin-left: 4px; }
.gl-entry .grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 14px; align-items: end; }
@media (max-width: 1000px) { .gl-entry .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .gl-entry .grid { grid-template-columns: minmax(0, 1fr); } }
.gl-entry .acc { font-weight: 700; color: #1F5468; }
.gl-entry .acc small { display: block; font-weight: 400; color: #7A8796; font-family: "Roboto Mono", ui-monospace, monospace; font-size: .74rem; }
.gl-entry .actions { display: flex; gap: 8px; justify-content: flex-end; }

/* fiscal years board (Appendix A 'Fiscal Years & Periods') */
.fy-card { background: #F7F9FB; border: 1px solid #E3E8EE; border-left: 4px solid #1F5468; border-radius: 12px; margin-bottom: 14px; overflow: hidden; }
.fy-card.closed { border-left-color: #98A2B3; }
.fy-card .hd { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid #E3E8EE; background: #fff; }
.fy-card .hd h3 { margin: 0; font-size: 1.15rem; }
.fy-card .hd .dates { font-family: "Roboto Mono", ui-monospace, monospace; font-size: .8rem; color: #667085; }
.fy-card .hd .grow { flex: 1 1 auto; }
.fy-card .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 14px 16px; }
.fy-tile { display: flex; align-items: center; gap: 8px; border-radius: 10px; padding: 9px 10px 9px 12px; border: 1px solid #CDE7E2; background: #E9F6F3; }
.fy-tile .t { flex: 1 1 auto; min-width: 0; }
.fy-tile .t b { display: block; font-size: .92rem; color: #1D2939; }
.fy-tile .t span { font-size: .76rem; color: #5B6B7A; }
.fy-tile.future { background: #fff; border-color: #E3E8EE; border-style: dashed; }
.fy-tile.soft { background: #F3EEFF; border-color: #DDD0FA; }
.fy-tile.locked { background: #EEF1F4; border-color: #D9DEE5; }
.fy-tile.adj { outline: 2px dotted #C9B37E; outline-offset: -3px; }
.fy-tile .mud-icon-button { background: #fff; border: 1px solid #E3E8EE; border-radius: 8px; padding: 5px; }

/* posting rules split view, journal entry */
.gl-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 1200px) { .gl-split { grid-template-columns: minmax(0, 1fr); } }
.gl-section { padding: 12px 16px; }
.gl-section h4 { margin: 0 0 8px; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: #667085; }
.gl-totals { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; padding: 10px 16px; background: #F2F5F8; border-top: 1px solid #E3E8EE; position: sticky; bottom: 0; z-index: 3; }
.gl-totals .k { color: #667085; font-size: .82rem; }
.gl-totals .v { font-family: "Roboto Mono", ui-monospace, monospace; font-weight: 700; color: #1D2939; margin-left: 6px; }
.gl-balanced { background: #DDF5EA; color: #127A4B; border-radius: 999px; padding: 3px 12px; font-weight: 700; font-size: .8rem; }
.gl-unbalanced { background: #FDE2E1; color: #B42318; border-radius: 999px; padding: 3px 12px; font-weight: 700; font-size: .8rem; }
.gl-lock { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: #EEF5FB; color: #1F5468; font-weight: 500; border-bottom: 1px solid #DCE8F3; }

/* system account setup form (Appendix A 'System Account Defaults') */
.sa-help { color: #667085; font-size: .84rem; padding: 12px 16px 0; }
.sa-row { display: grid; grid-template-columns: minmax(180px, 300px) minmax(0, 520px) minmax(0, 1fr); gap: 4px 16px; align-items: start; padding: 10px 16px;
    border-bottom: 1px dashed #EEF1F5; }
.sa-row .lab { text-align: right; font-weight: 600; color: #344054; padding-top: 9px; }
.sa-row .lab .req { color: #D92D20; margin-left: 2px; }
.sa-row .cap { font-size: .76rem; color: #7A8796; margin-top: 3px; }
.sa-row .side { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-top: 6px; font-size: .8rem; color: #667085; }
@media (max-width: 900px) { .sa-row { grid-template-columns: minmax(0, 1fr); } .sa-row .lab { text-align: left; padding-top: 0; } }

@media print {
    .gl-side, .gl-filters, .gl-entry, .gl-pager, .no-print { display: none !important; }
    .gl-shell { grid-template-columns: 1fr; }
    .gl-scroll { max-height: none; overflow: visible; }
    table.gl-table thead th { position: static; background: #fff !important; color: #000 !important; border-bottom: 1px solid #000; }
    table.gl-table thead tr.flt { display: none; }
}