/* Common styles shared across entity list pages */

.ui-datatable table {
    table-layout: auto !important;
}


[role="gridcell"] .ui-button-icon-only {
    width: 1.75rem !important;
    height: 1.75rem;
    padding: 0;
    margin: 0 0.15rem;
}

.list-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.list-page-header .flex {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.list-title-link {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
}

.list-title-link:hover {
    text-decoration: underline;
}

.mln-title-col {
    font-weight: 600;
    max-width: 32ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.muted-cell {
    color: var(--text-color-secondary);
}

.dialog-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.dialog-footer .left-group,
.dialog-footer .right-group {
    display: flex;
    gap: 0.5rem;
}

.detail-label {
    font-weight: 700;
    display: block;
    margin-bottom: 0.25rem;
}

/* Course Dialog Specific */
.course-details .hasDatepicker {
    width: 100%;
}

.course-details .capacity-field, .number-field {
    display: flex;
    flex-direction: column;
}

.course-details .capacity-field input, .number-field input {
    width: 100%;
}

/*
  Fixed-height entity editor dialogs (person, land node, community).

  Laid out as a flex column rather than by percentage. The old rule gave the content a flat
  `height: 90%`, which assumes the titlebar and footer together fit in the remaining 10% —
  and they do not once the viewport is short. Measured on a 640px-tall window: the dialog is
  608px, chrome needs 126px (70 titlebar + 56 footer) but 10% leaves 94px, so the footer was
  pushed 32px BELOW the dialog's own bottom edge and the Back/Next buttons hung outside it.

  With flex the two chrome bars take their natural height and the content takes exactly
  what is left, at any viewport, so the footer can never escape and the content starts
  scrolling at precisely the right point.
*/
.dynamicHeight {
    height: 95vh !important;
    display: flex;
    flex-direction: column;
}

.dynamicHeight .ui-dialog-titlebar,
.dynamicHeight .ui-dialog-footer,
.dynamicHeight .ui-dialog-buttonpane {
    flex: 0 0 auto;
}

.dynamicHeight .ui-dialog-content {
    flex: 1 1 auto;
    /* Override PrimeFaces' inline/percentage height so flex owns the sizing. */
    height: auto !important;
    /* Without this a flex item refuses to shrink below its content, and the box would
       grow to fit instead of scrolling — which is the whole point of the fixed height. */
    min-height: 0;
    overflow: auto;
    /* Stops the wheel chaining to the page behind once the content hits its end. */
    overscroll-behavior: contain;
}

/*
  Dialogs WITHOUT a show/hide effect get an inline `display: block` from PrimeFaces, which
  outranks the stylesheet rule above and leaves them laid out as blocks — measured: the
  content pane hanging 32px past the dialog's bottom edge on person and land-node, while the
  community editor (which fades, so PrimeFaces toggles `visibility` instead and never writes
  an inline display) sat correctly at 0.

  Overriding it is safe ONLY while that inline value is `block`. A blanket
  `display: flex !important` would also outrank the inline `display: none` PrimeFaces uses to
  HIDE the dialog, and it would never close again — so the override is scoped by attribute to
  the shown state, and the hidden state is left completely alone. Both spacings are matched
  because the exact serialisation is PrimeFaces' business, not ours.
*/
.dynamicHeight[style*="display: block"],
.dynamicHeight[style*="display:block"] {
    display: flex !important;
}

/*
  Lock the page while ANY modal dialog is open, so the wheel never scrolls the page behind
  it — reported as "I scroll and the page scrolls on the back, not the dialog", which also
  happens when the dialog's content is short enough not to scroll at all.

  Keyed off PrimeFaces' own modal mask, which is a direct child of body and is removed only
  when the last modal closes. That makes the lock self-managing: no counter to keep, and it
  stays correct when a confirm dialog opens on top of an editor and then closes.
*/
body:has(> .ui-dialog-mask) {
    overflow: hidden;
}

/*
  Control box for short controls that share a grid row with text inputs.

  A p:toggleSwitch is ~25px tall; the p:inputText / p:inputNumber beside it is ~35px. Both
  start at the same y, so the switch top-aligns and reads as floating above its neighbour's
  line rather than sitting on it. Matching the input's height and centring inside it puts
  the two on one optical baseline.
*/
.mln-field-control {
    display: flex;
    align-items: center;
    min-height: 2.5rem;
    justify-content: center;
}

/* Review Dialog Specific */
.review-tab-grid strong {
    margin-right: 0.25rem;
}

.basic-tab .hasDatepicker, .location-grid .ui-inputnumber input {
    width: 100%;
}
/* ---------- D.1 field-visibility pills (admin dialogs) ----------
   Self-contained (does not depend on portal-theme.css vars), so the
   click-to-cycle visibility control renders correctly on the admin
   template which does not load the portal theme. Mycelium palette. */
.mln-visibility {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    font-size: 0.75rem;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
}
.mln-visibility-public    { background: rgba(0, 89, 76, 0.12);  color: #00594c; }
.mln-visibility-protected { background: rgba(45, 90, 142, 0.12); color: #2d5a8e; }
.mln-visibility-private   { background: rgba(0, 0, 0, 0.06);     color: #6c757d; }

/* ---- V1.3: directory-readiness notice in the land node edit dialog ---- */
.mln-dirready-warn {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin-top: 0.6rem;
    padding: 0.45rem 0.6rem;
    border-radius: 6px;
    background: rgba(255, 196, 61, 0.16);
    color: #8a5a00;
    font-size: 0.82rem;
    line-height: 1.4;
}