/* App layout from react/bookrun/src/components_static (jmt_app.jsx + index.css), plus the inline styles the React
   components set. PrimeReact's own structural CSS is in primereact.css (extracted from the component JS); colours,
   spacing and states come from the lara-light-blue theme. Avoid restyling .p-* classes here — that is what made the
   port drift from the React look. */
html { font-size: var(--app-font-size, 0.9rem); overflow: hidden; }
body { height: 100%; margin: 0; background: var(--surface-ground, #f8f9fa); font-family: var(--font-family); }

.app-root { height: 100vh; display: flex; flex-direction: column; }
.layout-topbar { position: sticky; top: 0; z-index: 1000; height: 56px; }
.layout-main { flex: 1; display: flex; min-height: 0; }
.layout-content { flex: 1; min-height: 0; overflow-y: auto; padding: 1rem; background: var(--surface-ground, #f8f9fa); border-top-left-radius: 10px; }

.jmt-topbar { display: flex; align-items: center; justify-content: space-between; padding: 0 1rem; }
.jmt-topbar-logo { height: 36px; margin-right: .75rem; border-radius: 8px; }
.jmt-topbar-title { font-weight: 700; font-size: 1.2rem; }

/* JMT_APP_SIDE_MENU: 170px column holding a PrimeReact Menu (styled by the theme), then logo + version */
.jmt-side-menu { width: 170px; padding: 2px 10px 10px 10px; overflow-y: auto; flex-shrink: 0; }
.jmt-side-menu .p-menu { width: 100%; }
body.jmt-menu-hidden .jmt-side-menu { display: none; }
@media (max-width: 768px) {
  .jmt-side-menu { position: fixed; top: 56px; bottom: 0; left: 0; z-index: 999; display: none; }
  body.jmt-menu-open .jmt-side-menu { display: block; }
  .jmt-topbar-title { display: none; }
}

.jmt-login { min-height: 100vh; overflow-y: auto; }
.jmt-login h1 { margin: .5rem 0 0; }

/* <a> styled as a button (LinkButton) */
a.p-button { text-decoration: none; }

/* JMT_FIELD_*: desktop layout from the React components — ruled row, 300px caption, 25px input, icon addon */
.jmt-field { padding: 0; border-bottom: 1px solid; }
/* 300px like React, but in a narrow panel the caption gives way before the input does */
.jmt-field-caption { flex: 0 1 300px; max-width: 45%; min-width: 0; padding: 2px; display: flex; align-items: center; overflow-wrap: anywhere; }
.jmt-field .p-inputgroup > .p-inputtext, .jmt-field .p-inputgroup > .jmt-field-checkbox { min-width: 5rem; }
.jmt-field .p-inputtext { height: 25px; padding: 3px; border-radius: 0; }
.jmt-field textarea.p-inputtext { height: auto; }
.jmt-field .p-inputgroup-addon { height: 25px; border: 0; border-radius: 0; }
.jmt-field-readonly .p-inputtext { background-color: lightgrey; border: 1px solid lightgrey; }
.jmt-field-edit .p-inputtext { border: 1px solid; border-bottom: 0; }
.jmt-field-edit .p-inputgroup-addon { background-color: white; }
.jmt-field-checkbox { flex: 1 1 auto; display: flex; align-items: center; padding: 0 3px; }
.jmt-field-lookup { border-bottom-width: 1px; }
.jmt-lookup-input { background-color: lightgreen; border-bottom: none; cursor: pointer; }
.jmt-lookup-button { background-color: #3B82F6; color: white; cursor: pointer; }
@media (max-width: 768px) {  /* React's mobile layout: caption above the input */
  .jmt-field { border-bottom: none; margin-bottom: .5rem; }
  .jmt-field .p-inputgroup { flex-wrap: wrap; }
  .jmt-field-caption { width: 100%; font-weight: 500; margin-bottom: .25rem; }
}

/* DataTable extras */
.p-datatable .p-sortable-column { white-space: nowrap; }
.jmt-group-total td { background-color: #aaffaa; }

/* Dialog: the mask's positioning is an inline style in PrimeReact (DialogBase); position="center" | "top" */
.p-dialog-mask { position: fixed; inset: 0; z-index: 1100; display: flex; justify-content: center; align-items: center; }
.p-dialog-mask.p-dialog-top { align-items: flex-start; }
.p-dialog-top .p-dialog { margin: .75rem; }
.p-dialog { max-width: 95vw; }
@media (max-width: 768px) { .p-dialog { width: 95vw !important; } }

/* Toast container placement (PrimeReact sets it inline) and long API errors */
.p-toast { position: fixed; top: 20px; right: 20px; z-index: 1200; max-width: calc(100vw - 40px); }
.p-toast-detail { white-space: pre-wrap; word-break: break-word; }

/* Global request indicator */
.jmt-global-loading { position: fixed !important; top: 0; left: 0; right: 0; z-index: 1300; }

/* htmx: indicators only show while a request is in flight */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: block; }

/* User endpoint permissions: one scrolling lane per folder (POPUP_USER_ENDPOINT_UPDATE) */
.jmt-lanes { display: flex; gap: 1rem; overflow-x: auto; align-items: flex-start; padding: .5rem 0 1rem; }
.jmt-lane { flex: 0 0 300px; max-height: 60vh; overflow-y: auto; background: var(--surface-card, #fff); border-radius: 6px;
            box-shadow: 0 2px 6px rgb(0 0 0 / .15); padding: .5rem .75rem; }
.jmt-lane summary { cursor: pointer; display: flex; align-items: center; }
.jmt-lane label { cursor: pointer; overflow-wrap: anywhere; }

/* JMT_API_BUTTON: style={{ margin: '-1px', height: '22px' }} (PrimeFlex mr-2/mb-2 still win on right/bottom) */
.jmt-api-button { height: 22px; margin: -1px; }

/* Top bar (JMT_APP_TOPBAR): round cog + sign-out buttons, cog opens the options list */
.jmt-topbar-title { text-decoration: none; margin-left: 10px; }
.jmt-topbar-button { width: 2.25rem; height: 2.25rem; cursor: pointer; }
.jmt-options-menu { position: relative; }
.jmt-options-menu > summary { list-style: none; }
.jmt-options-menu > summary::-webkit-details-marker { display: none; }
.jmt-options { position: absolute; top: 42px; right: 0; min-width: 190px; background: #fff; border: 1px solid #dcdcdc;
               border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.15); z-index: 9999; overflow: hidden; }
.jmt-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid #eee;
              background: none; cursor: pointer; font: inherit; color: var(--text-color, #4b5563); text-align: left; }
.jmt-option:last-child { border-bottom: none; }
.jmt-option:hover, .jmt-option:focus-visible { background: var(--surface-hover, #f3f4f6); }

/* Login splash (React: 2.5s black screen with the pulsing logo) */
.jmt-splash { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; background: #000;
              animation: jmt-splash-out .3s ease 2.5s forwards; }
.jmt-splash img { max-width: 80%; max-height: 80%; border-radius: 30%; animation: jmt-pulse 1.5s ease-in-out infinite; }
@keyframes jmt-pulse { 0% { transform: scale(1); } 50% { transform: scale(.85); } 100% { transform: scale(1); } }
@keyframes jmt-splash-out { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .jmt-splash { display: none; } }

/* Lookup dialog (jmt_field_lookup.jsx): Status / Sort By dropdowns — same panel look as the top bar menus */
.jmt-dropdown { position: relative; flex: 1 1 auto; width: 1%; display: block; background: var(--surface-0, #fff);
                border: 1px solid var(--surface-border, #d1d5db); transition: border-color .15s, box-shadow .15s; }
.jmt-dropdown:hover { border-color: var(--primary-color, #3B82F6); }
.jmt-dropdown[open] { border-color: var(--primary-color, #3B82F6); box-shadow: 0 0 0 .2rem #BFDBFE; z-index: 1; }
.jmt-dropdown > summary { list-style: none; }
.jmt-dropdown > summary::-webkit-details-marker { display: none; }
.jmt-dropdown-trigger { display: flex; align-items: center; gap: .5rem; height: 100%; min-height: 2.5rem; padding: 0 .75rem; cursor: pointer; user-select: none; }
.jmt-dropdown-trigger:focus-visible { outline: none; }
.jmt-dropdown-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jmt-dropdown-placeholder { color: var(--text-color-secondary, #6b7280); }
.jmt-dropdown-clear { color: var(--text-color-secondary, #6b7280); padding: .25rem; border-radius: 50%; }
.jmt-dropdown-clear:hover { background: var(--surface-hover, #f3f4f6); color: var(--text-color, #4b5563); }
.jmt-dropdown-chevron { font-size: .75rem; color: var(--text-color-secondary, #6b7280); transition: transform .15s; }
.jmt-dropdown[open] .jmt-dropdown-chevron { transform: rotate(180deg); }
.jmt-options.jmt-dropdown-panel { top: calc(100% + 4px); left: -1px; right: auto; min-width: calc(100% + 2px); max-height: 18rem; overflow-y: auto; z-index: 20; }
/* PrimeReact-style checkbox on the status rows */
.jmt-check-option { cursor: pointer; }
.jmt-check-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.jmt-check-box { flex-shrink: 0; width: 1.25rem; height: 1.25rem; display: inline-flex; align-items: center; justify-content: center;
                 border: 2px solid var(--surface-border, #d1d5db); border-radius: 6px; color: transparent; font-size: .75rem;
                 transition: background-color .15s, border-color .15s; }
.jmt-check-option:hover .jmt-check-box { border-color: var(--primary-color, #3B82F6); }
.jmt-check-input:checked + .jmt-check-box { background: var(--primary-color, #3B82F6); border-color: var(--primary-color, #3B82F6); color: #fff; }
.jmt-check-input:focus-visible + .jmt-check-box { outline: 2px solid var(--primary-color, #3B82F6); outline-offset: 2px; }
.jmt-pager .p-inputgroup-addon.jmt-pager-arrow { cursor: pointer; }
.jmt-pager .p-button { border-radius: 0; }
.jmt-pager .p-button-blank { background-color: white; color: blue; border: 1px solid var(--surface-border, #d1d5db); }

/* Top bar tenant switch: a pill showing the current tenant; opens the same menu style as the cog */
.jmt-tenant-menu > summary { list-style: none; }
.jmt-tenant-menu > summary::-webkit-details-marker { display: none; }
.jmt-tenant-button { display: inline-flex; align-items: center; gap: .5rem; height: 2.25rem; padding: 0 .9rem; cursor: pointer;
                     border-radius: 999px; background: rgba(255,255,255,.9); font-weight: 600; user-select: none;
                     transition: background-color .15s; }
.jmt-tenant-button:hover, .jmt-tenant-menu[open] > .jmt-tenant-button { background: #fff; }
.jmt-tenant-button:focus-visible { outline: 2px solid var(--primary-color, #3B82F6); outline-offset: 2px; }
.jmt-tenant-chevron { font-size: .75rem; transition: transform .15s; }
.jmt-tenant-menu[open] .jmt-tenant-chevron { transform: rotate(180deg); }
.jmt-options-header { padding: 8px 12px; font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
                      color: var(--text-color-secondary, #6b7280); border-bottom: 1px solid #eee; }
.jmt-option-current { font-weight: 700; color: var(--primary-color, #3B82F6); }
@media (max-width: 768px) { .jmt-tenant-name { max-width: 6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }


/* Flatpickr date picker, themed to match PrimeReact lara-light-blue */
.flatpickr-calendar { font-family: var(--font-family); box-shadow: 0 2px 12px rgba(0,0,0,.1); border-radius: 6px; z-index: 1150; }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.selected:focus {
  background: var(--highlight-bg, #EFF6FF); border-color: var(--highlight-bg, #EFF6FF); color: var(--highlight-text-color, #1D4ED8); font-weight: 700; }
.flatpickr-day.today { border-color: var(--primary-color, #3B82F6); }
.flatpickr-day:hover { background: var(--surface-hover, #f3f4f6); border-color: transparent; }
.flatpickr-months .flatpickr-month, .flatpickr-current-month .flatpickr-monthDropdown-months { font-weight: 600; }
.jmt-datepicker-buttonbar { display: flex; justify-content: space-between; padding: .25rem .5rem .5rem; border-top: 1px solid var(--surface-border, #dee2e6); }
.jmt-datepicker-toggle { cursor: pointer; }

/* Accounts: GL Exceptions panel gets a warning edge so it stands out under the Trial Balance */
.jmt-gl-exceptions { border-left: 4px solid var(--orange-500, #f97316); }

/* Top bar period switch: year in bold, its months beside it */
.jmt-period-menu .jmt-options { min-width: 240px; max-height: 70vh; overflow-y: auto; }
.jmt-period-year { font-weight: 600; min-width: 2.75rem; }
.jmt-period-months { color: var(--text-color-secondary, #6b7280); font-size: .85em; }

/* Top bar cog + sign-out: round versions of the period/tenant pills */
.jmt-topbar-button { background: rgba(255,255,255,.9); border: none; transition: background-color .15s; }
.jmt-topbar-button:hover, .jmt-options-menu[open] > .jmt-topbar-button { background: #fff; }
.jmt-topbar-button:focus-visible { outline: 2px solid var(--primary-color, #3B82F6); outline-offset: 2px; }

/* Menu navigation in flight (web.js, a.jmt-nav): dim the current page under a spinner until the next one swaps in */
body.jmt-navigating #content { opacity: .35; pointer-events: none; transition: opacity .15s ease-in; }
body.jmt-navigating .layout-content { position: relative; }
body.jmt-navigating .layout-content::after {
  content: ""; position: absolute; top: 8rem; left: 50%; width: 2.5rem; height: 2.5rem; margin-left: -1.25rem;
  border: 4px solid var(--jmt-spinner, #8a0b88); border-right-color: transparent; border-radius: 50%;
  animation: jmt-spin .8s linear infinite;
}
@keyframes jmt-spin { to { transform: rotate(360deg); } }