/* App layout from react/<product>/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; }
}

/* html is overflow:hidden (the shell scrolls its own panels), so the login screen is its own viewport-high scroller.
   The card centres with auto margins rather than align-items:center, which would push its top out of reach when the
   window is shorter than the card. */
.jmt-login { height: 100vh; height: 100dvh; overflow-y: auto; }
.jmt-login > * { margin-top: auto; margin-bottom: 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 { flex: 0 0 100%; max-width: 100%; font-weight: 500; margin-bottom: .25rem; }
  .jmt-field .p-inputgroup > .p-inputtext, .jmt-field .p-inputgroup > select { flex: 1 1 0; }
}

/* 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: a narrow stack in the bottom-right corner;
   the container lets clicks through, only the messages themselves catch them */
.p-toast { position: fixed; bottom: 16px; right: 16px; z-index: 1200; width: auto; max-width: min(25rem, calc(100vw - 32px)); pointer-events: none; }
.p-toast-message { pointer-events: auto; }
.p-toast-message-success .p-toast-message-content { padding: 0.5rem 0.75rem; }
.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); }

.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); }


/* 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; }

/* Top bar cog + sign-out (colours inline from config.THEME, as React sets them) */
.jmt-topbar-button:focus-visible { outline: 2px solid var(--primary-color, #3B82F6); outline-offset: 2px; }

/* Side menu: the current page (jmt_app.jsx activeMenuCSS) */
.jmt-menu-item-active .p-menuitem-link { background-color: var(--jmt-button-bg, #133518) !important; border-radius: 6px; margin: 4px; }
.jmt-menu-item-active .p-menuitem-icon, .jmt-menu-item-active .p-menuitem-text { color: #fff !important; }

/* Dark mode (jmt_theme_provider.jsx): panels and tables follow the dark palette */
.jmt-dark .p-panel .p-panel-header, .jmt-dark .p-panel .p-panel-content, .jmt-dark .p-card,
.jmt-dark .p-datatable .p-datatable-thead > tr > th, .jmt-dark .p-datatable .p-datatable-tbody > tr { background: #1e1e1e; color: #f5f5f5; }

/* XlsxUpload preview */
.jmt-upload-preview td { white-space: nowrap; }

/* 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-button-bg, #133518); border-right-color: transparent; border-radius: 50%;
  animation: jmt-spin .8s linear infinite;
}
@keyframes jmt-spin { to { transform: rotate(360deg); } }


/* ---- jmtdev additions ---- */
/* JMT_FIELD_CHECKBOX: lavender strip holding the box */
.jmt-field-check .jmt-field-checkbox { background-color: lavender; min-height: 25px; }
.jmt-field-check .p-inputgroup-addon { height: 25px; border: 0; border-radius: 0; }
.jmt-field-multi { flex-wrap: wrap; gap: .25rem .75rem; }
.jmt-multi-option { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.jmt-field-edit select.p-inputtext { padding: 0 3px; }
/* JMT_FIELD_DOUBLE_LABEL */
.jmt-double { flex: 1 1 auto; display: flex; gap: 4px; }
.jmt-double-value { flex: 1; text-align: center; background-color: lavender; padding: 2px; min-height: 22px; }
.jmt-double-headers { display: flex; font-size: .9em; color: #555; font-weight: bold; }
.jmt-double-headers .jmt-field-caption { flex: 0 1 300px; }
.jmt-double-head { flex: 1; text-align: center; }

/* JMT_API_BUTTON tile variant (dashboard buttons with height + buttonColor) */
.jmt-tile { min-height: 80px; padding: 10px; border-radius: 15px; font-size: .8em; color: #fff; text-align: center; }
.jmt-tile-icon { padding: 8px; font-size: 2em; color: #000; background: #fff; border-radius: 10px; }

/* JMT_LOADING_PANEL toggleable */
.jmt-panel-toggleable > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.jmt-panel-toggleable > summary::-webkit-details-marker { display: none; }
.jmt-panel-toggleable:not([open]) .jmt-panel-toggle { transform: rotate(-90deg); }

/* JMT_DATATABLE tools row */
.jmt-table-tools { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; align-items: center; }
.jmt-table-tools .jmt-api-button { margin: 0; }

/* Cog menu in dark mode (React: #000 panel, white text) */
.jmt-options-dark { background: #000; border-color: #333; }
.jmt-options-dark .jmt-option { color: #fff; border-bottom-color: #222; }
.jmt-options-dark .jmt-option:hover { background: #222; }
a.jmt-topbar-button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* Menu entries whose icon is an image (capacitylog: Shopify) */
.jmt-menu-img { width: 1rem; height: 1rem; object-fit: contain; }

/* Debug dumps (<pre>{JSON.stringify(...)}</pre>) */
.jmt-pre { white-space: pre-wrap; font-size: .75rem; max-height: 50vh; overflow: auto; background: rgba(0,0,0,.04); padding: .5rem; }

/* Rows highlighted by a page (rowClassName) */
.jmt-row-red td { background-color: #ffcdd2 !important; }
.jmt-row-green td { background-color: #c8e6c9 !important; }
.jmt-row-amber td { background-color: #ffe0b2 !important; }
.jmt-row-blue td { background-color: #bbdefb !important; }
.jmt-row-selected td { background-color: var(--highlight-bg, #EFF6FF) !important; font-weight: 600; }

/* JMT_SMART_PANEL */
.jmt-smart-panel { background: #fff; color: var(--text-color, #4b5563); }
.jmt-smart-panel > summary { list-style: none; }
.jmt-smart-panel > summary::-webkit-details-marker { display: none; }
.jmt-smart-panel:not([open]) .jmt-smart-chevron { transform: rotate(180deg); }

/* The hidden attribute always wins (dialog masks and flex rows set display themselves) */
[hidden] { display: none !important; }

/* JMT_API_MONITOR: ListBox with count pills, uptime strips */
.jmt-listbox .p-listbox-list { list-style: none; margin: 0; padding: .25rem 0; }
.jmt-listbox .p-listbox-item { padding: 0; }
.jmt-listbox-link { display: flex; justify-content: space-between; align-items: center; padding: .4rem .75rem; color: inherit; text-decoration: none; }
.jmt-pill { background: #ef4444; color: #fff; border-radius: 9999px; padding: 1px 7px; font-size: .75rem; font-weight: 600; min-width: 20px; text-align: center; margin-left: 5px; }
.jmt-strips { border: 1px solid #ccc; padding: 5px; border-radius: 5px; min-height: 120px; }
/* Request/response dumps */
.jmt-code-block { color: #fff; background-color: #0065B3; padding: 10px; border-radius: 5px; white-space: pre-wrap; word-break: break-word; }
/* SelectButton built from links */
.jmt-selectbutton { display: inline-flex; flex-wrap: wrap; }
.jmt-selectbutton .p-button { text-decoration: none; }
/* Rows logged in the last 15 minutes (jmtdash recent-log-row) */
.jmt-row-recent td { background-color: #ffcccc !important; color: #990000 !important; font-weight: bold !important; }
/* JMTDash: "Enable Notifications" only on Safari */
.jmtdash-safari-only { display: none; }
.jmtdash-safari .jmtdash-safari-only { display: inline-flex; }
.p-datatable-wrapper { overflow-x: auto; }

/* JMT_MOBILE_* fields (flexybook): caption above the input at every width — wrap a form in .jmt-stacked */
.jmt-stacked .jmt-field { border-bottom: none; margin-bottom: .5rem; }
.jmt-stacked .jmt-field .p-inputgroup { flex-wrap: wrap; }
.jmt-stacked .jmt-field-caption { flex: 0 0 100%; max-width: 100%; font-weight: 500; margin-bottom: .25rem; padding: 0; }
.jmt-stacked .jmt-field .p-inputtext { height: auto; padding: .5rem; border-radius: 6px 0 0 6px; }
.jmt-stacked .jmt-field .p-inputgroup-addon { height: auto; border: 1px solid #d1d5db; border-left: 0; border-radius: 0 6px 6px 0; }
.jmt-stacked .jmt-field-multi { padding: .4rem .5rem; }
/* Booking detail (label: value grid in the Book dialogs) */
.jmt-detail-grid { display: grid; grid-template-columns: 40% 60%; row-gap: 4px; }
.jmt-detail-grid > b { padding-right: .5rem; }
.jmt-notice { text-align: center; background-color: #fff8e1; padding: 1rem; border: 1px solid var(--surface-border, #dee2e6); border-radius: 6px; }
.jmt-badges { font-size: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: .25rem 0 .5rem; }
.jmt-badges .p-badge { border-radius: 3px; }
.jmt-field .jmt-field-checkbox { flex: 1 1 0; min-width: 0; }

/* Inline dataset cells (JMT_TEXTBOX & co.): lavender, yellow once changed */
.jmt-cell { padding: 1px; }
.jmt-cell-row { padding: 2px; }
.jmt-cell-caption { flex: 0 1 300px; max-width: 45%; padding: 2px; display: flex; align-items: center; }
.jmt-cell-input { width: 100%; background-color: lavender; border: 1px solid #e2e2f0; border-radius: 0; padding: 3px; min-height: 28px; }
select.jmt-cell-input { padding: 0 3px; }
.jmt-cell-readonly { background-color: lightgrey; }
.jmt-cell-changed, .jmt-cell-changed.jmt-cell-input { background-color: yellow !important; }
.jmt-cell-check, .jmt-cell-multi { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: center; }
.jmt-color { display: flex; align-items: center; gap: .5rem; }
.jmt-color-input { width: 2.5rem; height: 24px; padding: 0; border: 0; background: none; }
.jmt-status-filter { display: inline-flex; flex-wrap: wrap; gap: .25rem .75rem; font-weight: normal; font-size: .9em; }
.jmt-panel-tools { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
@media (max-width: 768px) { .jmt-cell-row .p-inputgroup { flex-wrap: wrap; } .jmt-cell-caption { flex: 0 0 100%; max-width: 100%; } }

/* ---- extraatom additions ---- */
/* Top bar tenant switcher (JMT_APP_TOPBAR): "<Tenant> (<Role>)" pill on buttonBgColor, black text, list below */
.jmt-tenant { position: relative; }
.jmt-tenant > summary { list-style: none; }
.jmt-tenant > summary::-webkit-details-marker { display: none; }
.jmt-tenant-pill { display: flex; align-items: center; height: 2.8rem; min-height: 2.357rem; padding: 0 12px; border-radius: 10px; color: #000;
                   font-size: .875rem; font-weight: 600; white-space: nowrap; }
.jmt-tenant-trigger { cursor: pointer; }
.jmt-tenant-options { right: 0; top: 48px; }
.jmt-tenant-options .jmt-option input { pointer-events: none; }
.jmt-tenant-loading { position: fixed; inset: 0; background-color: rgba(214, 14, 9, .12); z-index: 999999; align-items: center; justify-content: center; }
.htmx-request .jmt-tenant-loading, .jmt-tenant-loading.htmx-request { display: flex; }
.jmt-spinner { width: 80px; height: 80px; border: 4px solid #d60e09; border-right-color: transparent; border-radius: 50%; animation: jmt-spin .8s linear infinite; }
@media (max-width: 768px) { .jmt-tenant-pill { height: 2.25rem; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; } }

/* JMT_CARD */
.jmt-card { background: var(--surface-card, #fff); border: 1px solid var(--surface-border, #dee2e6); border-radius: 6px;
            box-shadow: 0 2px 12px rgba(0,0,0,.1); overflow: hidden; padding: 10px; color: var(--text-color, #4b5563); }

/* JMT_PAGE_HEADER */
.jmt-page-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; padding: 12px 20px;
                   margin-bottom: 15px; color: #fff; border-radius: 14px; box-shadow: 0 8px 20px rgba(0,0,0,.18); }
.jmt-header-left { display: flex; align-items: center; gap: 14px; }
.jmt-header-icon { width: 50px; height: 50px; border-radius: 12px; background: rgba(255,255,255,.12); display: flex; align-items: center;
                   justify-content: center; font-size: 1.5rem; flex-shrink: 0; }
.jmt-header-title { font-size: 1.15rem; font-weight: 700; margin-bottom: 2px; }
.jmt-header-desc { font-size: .82rem; opacity: .9; max-width: 700px; }
.jmt-header-sub { display: inline-flex; margin-top: 6px; padding: 4px 10px; font-size: .72rem; background: rgba(255,255,255,.12);
                  border: 1px solid rgba(255,255,255,.15); border-radius: 999px; }
.jmt-header-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jmt-header-stat { background: rgba(255,255,255,.12); padding: 8px 14px; border-radius: 10px; display: flex; align-items: center; gap: 8px;
                   font-size: .85rem; white-space: nowrap; }

/* JMT_CUSTOM_BUTTON tiles */
.jmt-tiles { display: flex; flex-wrap: wrap; gap: 6px; }
.jmt-tile2 { width: 100px; height: 65px; border-radius: 12px; padding: 5px; color: #fff; cursor: pointer; box-shadow: 0 8px 20px rgba(0,0,0,.15);
             transition: all .25s ease; user-select: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
             gap: 6px; flex-shrink: 0; overflow: hidden; text-align: center; text-decoration: none; }
.jmt-tile2:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,.25); color: #fff; }
.jmt-tile2-large { width: 280px; height: 120px; border-radius: 18px; padding: 15px; }
.jmt-tile2-disabled { cursor: not-allowed; opacity: .5; }
.jmt-tile2-disabled:hover { transform: none; box-shadow: 0 8px 20px rgba(0,0,0,.15); }
.jmt-tile2-icon { width: 30px; height: 30px; min-width: 30px; border-radius: 10px; background-color: rgba(255,255,255,.25); display: flex;
                  align-items: center; justify-content: center; font-size: 1.2rem; line-height: 1; }
.jmt-tile2-icon .pi { font-size: 1rem; color: #fff; }
.jmt-tile2-caption { font-size: .9rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
                     padding-bottom: 2px; border-bottom: 3px solid transparent; }
.jmt-tile2-selected { font-weight: 800; border-bottom-color: #fff; }

/* Read-only lookup (enabled={false}) and the scanner's barcode button */
.jmt-lookup-disabled { opacity: .5; cursor: not-allowed; }
.jmt-busy { opacity: .6; pointer-events: none; cursor: progress; }

/* JMT_TIMESHEET head line */
.jmt-timesheet-head { overflow: hidden; }

/* Galleria */
.jmt-gallery { max-width: 600px; margin: auto; }
.jmt-gallery-stage { position: relative; }
.jmt-gallery-main { width: 100%; display: block; }
.jmt-gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,.35); color: #fff; border: 0; width: 2.5rem;
                   height: 2.5rem; border-radius: 50%; cursor: pointer; z-index: 1; }
.jmt-gallery-nav:first-child { left: .5rem; }
.jmt-gallery-nav:last-child { right: .5rem; }
.jmt-gallery-thumbs { display: flex; gap: .5rem; overflow-x: auto; padding: .5rem 0; background: rgba(0,0,0,.9); justify-content: center; }
.jmt-gallery-thumb { width: 100px; height: 60px; object-fit: cover; cursor: pointer; opacity: .5; }
.jmt-gallery-thumb.active, .jmt-gallery-thumb:hover { opacity: 1; }

/* PrimeReact SelectButton (with badges) */
.jmt-select-option { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; background: #fff; color: var(--text-color, #4b5563);
                     border: 1px solid var(--surface-border, #d1d5db); }
.jmt-select-option.p-highlight { background: var(--primary-color, #3B82F6); color: #fff; }
.jmt-select-option .p-badge { min-width: 22px; height: 22px; line-height: 22px; font-size: .8rem; }

/* JMT_API_BUTTON with a badge */
.jmt-api-button .p-badge { margin-left: .5rem; min-width: 1.2rem; height: 1.2rem; line-height: 1.2rem; font-size: .7rem; }

/* JMT_ADV_PAGE */
.jmt-adv-banner { border-radius: 14px; padding: 30px; color: #fff; box-shadow: 0 4px 20px rgba(0,0,0,.15); background-size: 400% 400% !important;
                  animation: jmt-gradient-move 10s ease infinite; }
@keyframes jmt-gradient-move { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.jmt-adv-title { font-size: 42px; margin-bottom: 10px; font-weight: 700; color: #fff; }
.jmt-adv-text { font-size: 18px; line-height: 30px; margin-bottom: 20px; opacity: .95; }
.jmt-adv-chips, .jmt-adv-features { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 25px; }
.jmt-adv-features { justify-content: center; gap: 15px; margin-top: 25px; }
.jmt-adv-chip { background-color: #d60d0a; padding: 10px 16px; border-radius: 50px; font-size: 14px; font-weight: 600; }
.jmt-adv-feature { background-color: #d60d0a; color: #fff; padding: 14px 24px; border-radius: 10px; font-weight: 600; min-width: 140px; text-align: center; }
.jmt-adv-button { background-color: #d60d0a !important; border: none !important; width: 100%; justify-content: center; padding: 12px; font-size: 1.1rem;
                  font-weight: bold; border-radius: 12px; color: #fff; text-decoration: none; }
.jmt-adv-why { max-width: 900px; margin: 0 auto; color: #d60d0a; line-height: 28px; font-size: 16px; }
.jmt-adv-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; background: #f8fafc; border-radius: 12px;
                 padding: 25px; border: 1px solid #e2e8f0; margin-top: 1rem; }
.jmt-adv-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.jmt-adv-card h3 { margin-top: 0; color: #d60d0a; font-size: 20px; }
.jmt-adv-box { margin-top: 20px; background: #fff; border-radius: 12px; padding: 30px; border: 1px solid #e5e7eb; }
.jmt-adv-blue { background: #eff6ff; }
.jmt-adv-big { font-size: 48px; margin-bottom: 10px; }
.jmt-adv-red { color: #d60d0a; }
.jmt-adv-footer { margin-top: 30px; background: #111827; color: #fff; border-radius: 14px; padding: 40px; text-align: center; }
.jmt-adv-footer h2 { font-size: 34px; color: #fff; }

/* Dark mode for the extraatom composites */
.jmt-dark .jmt-card { background: #1e1e1e; color: #f5f5f5; border-color: #333; }
/* JMT_SCANNER's barcode button: blue like the lookup's search button, on an editable row */
.jmt-field .p-inputgroup-addon.jmt-scan-button { background-color: #3B82F6; color: #fff; cursor: pointer; }