@font-face{font-family:"LedgerOne Shortcut";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/shortcut/inter-semibold-latin.woff2") format("woff2")}
/* Meaningful 3D transaction shortcuts; native permissions and actions remain authoritative. */
.topbar:has(#transactionShortcutBar){height:auto!important;flex-wrap:wrap!important;padding-top:8px;padding-bottom:5px;row-gap:4px}
.topbar #transactionShortcutBar{order:10!important;flex:1 1 100%!important;width:100%!important;height:86px!important;margin:2px 0 0!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:thin;scrollbar-color:#8eb8a2 transparent}
.topbar #transactionShortcutBar .shortcut-icons{gap:5px!important;padding:4px 6px 6px!important;margin-inline:auto!important}
html #transactionShortcutBar .shortcut-icons button[data-shortcut-index]{display:flex!important;flex-direction:column!important;align-items:center;justify-content:flex-start;gap:5px;width:74px!important;min-width:74px!important;height:72px!important;flex:0 0 74px!important;padding:2px 1px!important;background:transparent!important;border:1px solid transparent!important;border-radius:11px!important;box-shadow:none!important;backdrop-filter:none!important;text-shadow:none!important;white-space:normal!important}
html #transactionShortcutBar .shortcut-icons button[data-shortcut-index]:hover{background:#eaf4ee!important;border-color:#b7d3c3!important;transform:none!important;box-shadow:none!important}
#transactionShortcutBar .shortcut-icon-3d{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;box-sizing:border-box;padding:3px;color:var(--shortcut-ink,#24765a);border:1px solid #c4d9cc;border-radius:10px;background:linear-gradient(145deg,#f9fffc,#e0efe7 48%,#b6d3c3);box-shadow:inset 0 1px 1px #fff,0 3px 0 #a4c3b1,0 5px 9px #234b3520;transform:perspective(200px) rotateX(6deg) rotateY(-6deg);transition:transform .16s,box-shadow .16s}
#transactionShortcutBar .shortcut-icon-3d svg{display:block!important;width:25px!important;height:25px!important;overflow:visible}
#transactionShortcutBar .shortcut-name{display:block;max-width:68px;font-family:"LedgerOne Shortcut",Arial,sans-serif!important;line-height:14px!important;font-size:11px!important;font-weight:600!important;text-align:center;color:#284d3c;white-space:normal;letter-spacing:normal;font-kerning:normal;text-transform:none}
#transactionShortcutBar button:hover .shortcut-icon-3d,#transactionShortcutBar button:focus-visible .shortcut-icon-3d{transform:translateY(-1px);box-shadow:inset 0 1px #fff,0 3px 0 #a4c3b1,0 7px 10px #234b352b}
#transactionShortcutBar button:focus-visible{outline:2px solid #53ac80!important;outline-offset:1px}
html[data-ui-theme=dark] #transactionShortcutBar .shortcut-name{color:#e0eee5}
html[data-ui-theme=dark] #transactionShortcutBar .shortcut-icon-3d{background:linear-gradient(145deg,#edfff4,#c1dfca 46%,#82b293);border-color:#a1c4ab;box-shadow:inset 0 1px #ffffffc0,0 3px 0 #477858,0 6px 11px #0005}
html[data-ui-theme=dark] #transactionShortcutBar .shortcut-icons button[data-shortcut-index]:hover{background:#2b4b39!important;border-color:#587a63!important}
@media(max-width:600px){.topbar #transactionShortcutBar .shortcut-icons{margin-left:0!important}.topbar #transactionShortcutBar{height:84px!important}html #transactionShortcutBar .shortcut-icons button[data-shortcut-index]{width:72px!important;min-width:72px!important;flex-basis:72px!important}}
@media(prefers-reduced-motion:reduce){#transactionShortcutBar .shortcut-icon-3d{transition:none}}

/* One stable ribbon layout on Dashboard and transaction pages. */
#appView .topbar:has(#transactionShortcutBar){display:flex!important;flex-flow:row wrap!important;align-content:flex-start;column-gap:12px}
#appView .topbar #transactionShortcutBar{order:10!important;flex:0 0 100%!important;width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box;transform:none!important}
#appView .topbar #transactionShortcutBar .shortcut-icons{flex-wrap:nowrap!important;width:max-content!important;min-width:max-content!important;max-width:none!important;transform:none!important;zoom:1}
#transactionShortcutBar .shortcut-name{font-synthesis:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
#transactionShortcutBar .shortcut-icon-3d{width:32px!important;min-width:32px!important;height:32px!important;flex-shrink:0!important}

/* Two explicit header rows keep company controls left and utilities right. */
#appView .topbar:has(#transactionShortcutBar){display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;grid-template-rows:auto auto!important;align-items:center;column-gap:12px}
#appView .topbar:has(#transactionShortcutBar)>#menuBtn{grid-column:1;grid-row:1}
#appView .topbar:has(#transactionShortcutBar)>.company-picker{grid-column:2;grid-row:1;min-width:0}
#appView .topbar:has(#transactionShortcutBar)>.top-actions{grid-column:3;grid-row:1;justify-self:end;margin-left:0!important;margin-inline-start:0!important;min-width:0;max-width:100%}
#appView .topbar #transactionShortcutBar{grid-column:1/-1;grid-row:2;justify-self:stretch}
#appView .topbar #transactionShortcutBar .shortcut-icons{margin-left:auto!important;margin-right:auto!important}
@media(max-width:800px){
 #appView .topbar:has(#transactionShortcutBar){grid-template-columns:auto minmax(0,1fr)!important;grid-template-rows:auto auto auto!important}
 #appView .topbar:has(#transactionShortcutBar)>.top-actions{grid-column:1/-1;grid-row:2;justify-self:end;flex-wrap:wrap;justify-content:flex-end}
 #appView .topbar #transactionShortcutBar{grid-row:3}
 #appView .topbar #transactionShortcutBar .shortcut-icons{margin-left:0!important}
}

#appView .topbar #transactionShortcutBar::-webkit-scrollbar{display:block!important;height:6px}
#appView .topbar #transactionShortcutBar::-webkit-scrollbar-thumb{background:#91b7a3;border-radius:5px}

/* Compact the ribbon whitespace without shrinking the artwork or text. */
#appView .topbar #transactionShortcutBar{height:74px!important;margin-top:0!important}
#appView .topbar #transactionShortcutBar .shortcut-icons{gap:2px!important;padding:2px 4px 4px!important}
html #transactionShortcutBar .shortcut-icons button[data-shortcut-index]{width:68px!important;min-width:68px!important;flex-basis:68px!important;height:66px!important;gap:4px!important;padding:1px 0!important}
#transactionShortcutBar .shortcut-name{max-width:66px}
#appView .topbar:has(#transactionShortcutBar){row-gap:2px!important;padding-bottom:2px!important}

/* Requested readable 10pt labels (13.333 CSS px), including two-line names. */
#transactionShortcutBar .shortcut-name{font-size:10pt!important;line-height:16px!important;max-width:86px!important}
html #transactionShortcutBar .shortcut-icons button[data-shortcut-index]{width:90px!important;min-width:90px!important;flex-basis:90px!important;height:70px!important}
#appView .topbar #transactionShortcutBar{height:78px!important}

/* Company, transactions and utility controls share the upper header row. */
#appView .topbar:has(#transactionShortcutBar){grid-template-columns:auto auto minmax(0,1fr) auto!important;grid-template-rows:auto!important;column-gap:10px!important;align-items:center}
#appView .topbar:has(#transactionShortcutBar)>.company-picker{grid-column:2;grid-row:1;max-width:min(290px,25vw)}
#appView .topbar:has(#transactionShortcutBar)>.top-actions{grid-column:4;grid-row:1;flex-wrap:nowrap}
#appView .topbar #transactionShortcutBar{grid-column:3;grid-row:1;width:100%!important;min-width:0!important;max-width:100%!important}
#appView .topbar #transactionShortcutBar .shortcut-icons{margin-inline:0!important}
@media(max-width:600px){#appView .topbar:has(#transactionShortcutBar){column-gap:5px!important;padding-left:6px!important;padding-right:6px!important}#appView .topbar:has(#transactionShortcutBar)>.company-picker{max-width:100px!important}#appView .topbar .company-picker>span{display:none!important}#appView .topbar .company-picker select{max-width:100px!important}#appView .topbar .top-actions{gap:4px!important}}

#transactionShortcutBar .shortcut-name{font-size:8.5pt!important;line-height:14px!important}

/* Balanced single-row proportions at the selected 8.5pt label size. */
#appView .topbar:has(#transactionShortcutBar){column-gap:12px!important;padding-left:18px!important;padding-right:18px!important;padding-top:6px!important;padding-bottom:6px!important}
#appView .topbar:has(#transactionShortcutBar)>.company-picker{max-width:240px;gap:9px}
#appView .topbar:has(#transactionShortcutBar)>.company-picker>span{white-space:nowrap;line-height:1.4;flex:0 0 auto}
#appView .topbar:has(#transactionShortcutBar) .company-picker select{max-width:190px!important;min-width:0;width:100%}
#appView .topbar #transactionShortcutBar{height:78px!important}
#appView .topbar #transactionShortcutBar .shortcut-icons{gap:3px!important;padding:3px 4px 5px!important;margin-inline:auto!important}
html #transactionShortcutBar .shortcut-icons button[data-shortcut-index]{width:70px!important;min-width:70px!important;flex-basis:70px!important;height:68px!important;gap:4px!important}
#transactionShortcutBar .shortcut-name{max-width:68px!important;min-height:28px;line-height:14px!important;display:flex;align-items:flex-start;justify-content:center;text-wrap:balance}
#appView .topbar:has(#transactionShortcutBar)>.top-actions{gap:7px!important}
@media(max-width:1350px){#appView .topbar:has(#transactionShortcutBar)>.company-picker>span{display:none!important}#appView .topbar:has(#transactionShortcutBar)>.company-picker{max-width:180px!important}}
@media(max-width:800px){#appView .topbar:has(#transactionShortcutBar){column-gap:6px!important;padding-left:8px!important;padding-right:8px!important}#appView .topbar:has(#transactionShortcutBar)>.company-picker{max-width:130px!important}#appView .topbar #transactionShortcutBar .shortcut-icons{margin-inline:0!important}}
@media(max-width:600px){#appView .topbar:has(#transactionShortcutBar)>.company-picker{max-width:92px!important}}

/* No large tiles around shortcut actions in light mode. */
html:not([data-ui-theme=dark]) #transactionShortcutBar .shortcut-icons button[data-shortcut-index],html:not([data-ui-theme=dark]) #transactionShortcutBar .shortcut-icons button[data-shortcut-index]:hover{background:transparent!important;border-color:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;text-shadow:none!important}
