/* COPY OF trip project's CSS file (can override values here) */
/*
 * The page's one growl stacks above EVERY dialog (2026-11-07). PrimeFaces gives it the next z-index when it
 * shows, which a dialog opened or raised later outranks (a modal's overlay even paints over it), so a message
 * raised while a dialog is up, including the generic "Something went wrong" of TripAjaxExceptionHandler, sat
 * unseen beneath it. !important beats the inline z-index PrimeFaces writes.
 */
body .ui-growl { z-index: 2000000 !important; }
.table-title-button {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    flex-wrap:wrap;
    font-size:1.3em;
}
/*
 * Property-sheet label cells. NO display override: p:panelGrid emits columnClasses onto <td> elements, and
 * the display:block that used to live here took those cells out of table layout -- the cell shrank to its
 * label text and its background stopped filling the row, leaving ragged gaps beside any tall value cell
 * (calendars, multi-selects, the family dialog's inputs). First patched per-dialog (editEventDlg/contentDlg/
 * templateDlg); made global 2026-08-10 after confirming every .propSheetLabel in the app is a panelGrid
 * cell -- keep it that way, or give a non-cell usage its own class.
 */
.propSheetLabel {
    vertical-align:top;
    text-align:right;
    font-weight:bold;
}
.propSheetValue {
    vertical-align:top;
}
/*
 * Dialog property sheets fill the dialog's width (2026-09-11). A dialog that stacks several p:panelGrids (the
 * trip-event dialog's type-aware sections) rendered a staircase: each table sized itself to its own content,
 * so the shared background stepped in and out row by row. One rectangle for every dialog, and the text
 * inputs inside the value cells share one width so the fields line up as well as the background.
 */
.ui-dialog .ui-panelgrid { width: 100%; }
/* A dialog's fixed width= is a desktop number; on a phone it ran past the right edge (2026-09-12). */
body .ui-dialog { max-width: calc(100vw - 16px); }
body .ui-dialog .ui-dialog-content { overflow-x: auto; }
.ui-dialog td.propSheetValue > input.ui-inputfield,
.ui-dialog td.propSheetValue > textarea.ui-inputfield,
.ui-dialog td.propSheetValue > .ui-selectonemenu { width: 100%; max-width: 520px; box-sizing: border-box; }
/*
 * The Edit Content dialog (WEB-INF/contentDialog.xhtml, 2026-11): 90% of the window, capped on wide screens (the
 * inline width PrimeFaces writes wins over a CSS width, so the cap is a max-width). Its rich-text editors carry
 * the Visual | HTML | Preview tabs from quillEditor.xhtml (tabbedEditor); p:textEditor's height= is unitless and
 * ignored, so the editor is sized here. The template picker is a grid of cards whose thumbnail is the template
 * rendered at the band's real width (1200px, .band-inner's max) and scaled to a quarter, under pointer-events
 * none so the whole card is one click (the stretched link's ::after covers it).
 */
body .ui-dialog.contentDlg { max-width: min(1400px, calc(100vw - 16px)); }
.contentDlg .propSheetLabel { width: 170px; }
.contentDlg .tabbedEditor .ui-editor-container { height: auto; }
.contentDlg .tabbedEditor .ql-editor { min-height: 260px; max-height: 55vh; overflow-y: auto; }
.contentDlg .tabbedEditor textarea.tripSourceArea { min-height: 260px; max-height: 55vh; }
.contentDlg .tripEdTabs { display: flex; gap: 2px; border-bottom: 1px solid var(--surface-border, #ccc); margin: 4px 0 0 0; }
.contentDlg .tripEdTab { background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 6px 14px;
    font: inherit; font-weight: 600; color: var(--text-color-secondary, #666); cursor: pointer; }
.contentDlg .tripEdTab:hover { color: var(--text-color, #333); }
.contentDlg .tripEdTab:focus-visible { outline: 2px solid var(--primary-color, #36f); outline-offset: -2px; }
.contentDlg .tripEdTab.tripEdTabOn { color: var(--primary-color, #36f); border-bottom-color: var(--primary-color, #36f); }
.contentDlg .tripEdPreview { min-height: 120px; padding: 10px; border: 1px solid var(--surface-border, #ccc); background: #fff; overflow: auto; }
.contentDlg .tripEdPreview .band { margin: 0; }
.contentDlg .tripEdPreviewNote { font-size: 0.85em; opacity: 0.75; }
.contentDlg .tplCards { display: grid; grid-template-columns: repeat(auto-fill, 300px); justify-content: center; gap: 14px; }
.contentDlg .tplCard { position: relative; width: 300px; border: 1px solid var(--surface-border, #ccc); border-radius: 8px;
    background: var(--surface-card, #fff); padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.contentDlg .tplCard:hover { border-color: var(--primary-color, #36f); box-shadow: 0 2px 10px rgba(0,0,0,0.12); }
.contentDlg .tplCardHead { display: flex; align-items: center; gap: 8px; }
.contentDlg .tplCardIcon { color: var(--primary-color, #36f); }
.contentDlg .tplCardLink { font-weight: 700; flex: 1 1 auto; }
.contentDlg .tplCardLink::after { content: ''; position: absolute; inset: 0; }
.contentDlg .tplCardLink:focus-visible::after { outline: 2px solid var(--primary-color, #36f); border-radius: 8px; }
.contentDlg .tplKind { font-size: 0.7em; text-transform: uppercase; letter-spacing: .04em; padding: 2px 6px; border-radius: 10px;
    background: var(--surface-ground, #eee); color: var(--text-color-secondary, #666); }
.contentDlg .tplThumbBox { width: 284px; height: 160px; overflow: hidden; position: relative; pointer-events: none;
    border: 1px solid var(--surface-border, #ddd); border-radius: 4px; background: #fff; }
.contentDlg .tplThumb { position: absolute; top: 0; left: 0; width: 1136px; transform: scale(.25); transform-origin: top left; }
.contentDlg .tplThumb img[src=""], .contentDlg .tplThumb iframe[src=""] { display: block; width: 320px; height: 180px; background: #ddd; }
.contentDlg .tplThumbIcon { width: 284px; height: 160px; display: flex; align-items: center; justify-content: center;
    font-size: 3rem; color: var(--text-color-secondary, #999); border: 1px dashed var(--surface-border, #ddd); border-radius: 4px; }
.contentDlg .tplCardDesc { font-size: 0.85em; opacity: 0.85; }
/*
 * The Registration Pricing dialog (WEB-INF/tripPricingDialog.xhtml, 2026-11-02): one column that never scrolls
 * sideways. pricingCell stacks two small inputs in one table cell, so a discount code is two lines tall instead of
 * nine columns wide; pricingOff mutes the policy while "Registration requires payment" is off.
 */
.pricingSwitch { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
.pricingSwitchLabel { font-weight: 700; }
.pricingHint { font-size: 0.85em; opacity: 0.8; margin: 4px 0 10px 0; }
.pricingH { margin: 14px 0 6px 0; }
.pricingIndent { margin-left: 28px; }
/* The "Selected file" line under a library pick list (the Trip Page dialog): a long path wraps, never clips. */
.pickChosen { font-size: 0.9em; margin: 4px 0 8px 0; overflow-wrap: anywhere; }
.pickChosenName { font-weight: 700; }
.pricingRow { margin-top: 10px; }
.pricingOff { opacity: 0.45; pointer-events: none; }
/* The muted policy still explains itself: its help cards open while the fields stay inert. */
body .pricingOff .fieldHelpBtn { pointer-events: auto; }
.pricingWarn { background: #fff3cd; color: #5c4400; border-left: 4px solid #e0a800; padding: 6px 10px; margin: 8px 0; }
.pricingSet { margin-top: 12px; }
.ui-dialog .pricingGrid.ui-panelgrid { width: auto; }
.pricingGrid td { padding: 4px 10px 4px 0; }
.ui-dialog .pricingCell { display: block !important; width: 100% !important; box-sizing: border-box; margin: 0 0 4px 0; }
.ui-dialog .pricingCell .ui-inputfield { width: 100%; box-sizing: border-box; }
.co-deposit { margin: 6px 0; }
.co-deposit div { margin: 2px 0; }
/* The friendly reading of a 24-hour date/time field (trip-js/dateHint.js), under the field it explains. */
.dateHint { display: block; font-size: 0.85em; opacity: 0.75; margin: 2px 0 0 2px; min-height: 1.1em; }
.editorHover:hover {
    background-color: #186bae;
    color: #ffffff;
}
.editorHover {
    border:none;
    display:block;
}
.ui-datatable-header {
    min-height: 59px;
}
body .ui-datatable thead th {
    padding: 3px 3px 3px 12px;
}
.siteheading {
    font-family: "Comic Sans MS", cursive, sans-serif;
    font-size: 40px;
    letter-spacing: -3px;
    word-spacing: -8px;
    color: #D03F68;
    text-shadow: -1px -1px 0 #BBB, 1px -1px 0 #BBB, -1px 1px 0 #BBB, 1px 1px 0 #BBB;
    font-weight: 700;
    text-decoration: none;
    font-variant: normal;
    text-transform: none;
    text-align: center;
}
.small-p P {
    margin:0px;
}

/* ============ Privacy masking (WEB-INF/privacyMask.xhtml) ============
   A withheld value an admin may still access is in the page but hidden behind this placeholder until a
   click adds privRevealed (client-side, no round trip). The blur keeps the look of a hidden value. A value
   the viewer may not see at all is never rendered, so nothing here guards it. */
.privMaskedText {
    filter: blur(4px);
    cursor: pointer;
    color: inherit;
    text-decoration: none;
}
.privMasked:not(.privRevealed) > .privMaskValue,
.privRevealed > .privMaskedText {
    display: none;
}
.privRevealAll {
    margin-left: 8px;
    font-size: 12px;
}
/* "Show private values" (WEB-INF/privacyRevealAll.xhtml) is offered only while its scope (the nearest privScope,
   else the fieldset; the same lookup as its onclick) holds a mask still closed. The link is always rendered, so
   this rule is the ONLY thing that decides it, from what rendered rather than restated per host: a viewer with no
   MASK verdict gets no privMasked span, a mask whose `blank` demoted it carries none, and a revealed one carries
   privRevealed, so the link also goes away once it (or the last single click) has opened everything. */
.ui-fieldset:not(:has(.privMasked:not(.privRevealed))) .privRevealAll,
.privScope:not(:has(.privMasked:not(.privRevealed))) .privRevealAll {
    display: none;
}
.privTag {
    color: #888888;
    font-size: 12px;
    margin-left: 8px;
}
.privNote {
    color: #888888;
    font-size: 12px;
    margin: 2px 0 8px 4px;
}

/*
 * Field help (WEB-INF/fieldHelp.xhtml, 2026-11-02): a quiet round "i" after a property-sheet label that
 * opens a small card explaining the field. The icon stays muted so a column of them reads as part of the
 * label, and lights up on hover or keyboard focus. "body" outranks freya's layout css, which loads after us.
 * The icon is a foreground on the page surface, so --primary-color is safe here (never a text color ON it).
 */
.fieldLabel { white-space: nowrap; }
/* On a phone a long label ("TSA Known Traveler ID Number:") would push the page wider than the screen. */
@media (max-width: 640px) {
    body .fieldLabel { white-space: normal; }
}
body .ui-button.fieldHelpBtn {
    width: 1.5rem; height: 1.5rem; padding: 0; margin: -3px 0 0 2px; vertical-align: middle;
    color: var(--text-color-secondary, #6c757d); background: transparent; border: none; box-shadow: none;
}
body .ui-button.fieldHelpBtn .ui-icon { font-size: 0.95rem; }
body .ui-button.fieldHelpBtn:enabled:hover,
body .ui-button.fieldHelpBtn:enabled:focus-visible,
body .ui-button.fieldHelpBtn[aria-expanded="true"] {
    color: var(--primary-color); background: var(--surface-hover, rgba(0, 0, 0, 0.04));
}
body .ui-overlaypanel.fieldHelpPnl {
    /* !important: PrimeFaces writes an inline max-width (the viewport) on every overlay it positions. */
    max-width: min(360px, calc(100vw - 24px)) !important; border-radius: 10px; border: 1px solid var(--surface-border);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.08);
    /* No animation of our own: PrimeFaces' connected-overlay TRANSITION is the entrance, and the widget
       binds its click-outside dismissal only when that transition ends. A keyframe animation on transform
       swallowed the transitionend, so the card never finished opening and never closed on an outside click. */
}
body .ui-overlaypanel.fieldHelpPnl .ui-overlaypanel-content { padding: 12px 34px 14px 16px; }
body .fieldHelpTitle {
    display: flex; align-items: center; gap: 6px; font-weight: 600; margin-bottom: 6px;
    color: var(--text-color);
}
body .fieldHelpTitle .pi { color: var(--primary-color); font-size: 0.95rem; }
body .fieldHelpBody { font-size: 0.9em; line-height: 1.45; color: var(--text-color); text-align: left;
    white-space: normal; font-weight: normal; }
/* A registry row's setting key, under the text: for scripts and support, so it stays quiet. */
body .fieldHelpKey { margin-top: 8px; font-family: monospace; font-size: 0.8em; opacity: 0.75;
    color: var(--text-color); text-align: left; white-space: normal; font-weight: normal; }
/* Bold table headers, a compare grid's row headings and h4 labels have different line boxes than a label. */
body .ui-datatable thead th .fieldHelpBtn, body .rowHeading .fieldHelpBtn { margin-top: -2px; }
body h4 .fieldHelpBtn { margin-top: -4px; }
/* After a float-label span: inside it, the icon would break the input ~ label float rules. */
body .fieldHelpAfterFloat { display: inline-block; vertical-align: bottom; margin-left: 4px; }

/*
 * The trip editor's staff rows and dialog (WEB-INF/tripStaffDialog.xhtml). The preview beside "edit" is the
 * home page's own staff line, set in a dashed frame so it reads as "this is what visitors see".
 */
body .staffPreview {
    display: inline-block; margin-left: 12px; padding: 3px 10px; border: 1px dashed var(--surface-border, #ccc);
    border-radius: 6px; font-size: 0.92em; vertical-align: middle; max-width: 520px;
}
body .staffPreview .leader { display: inline; }
body .staffPreviewEmpty { opacity: 0.6; font-style: italic; }
body .staffDlg { padding: 4px 6px; width: 440px; max-width: calc(100vw - 64px); }
body .staffStep { font-weight: 600; margin: 2px 0 8px; }
body .staffStep2 { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--surface-border, #ddd); }
body .staffChips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; margin-bottom: 10px; }
body .staffNone { font-size: 0.9em; opacity: 0.65; font-style: italic; align-self: center; }
body .staffFind { display: flex; gap: 8px; align-items: center; }
body .staffFind .ui-autocomplete { flex: 1 1 auto; }
body .staffFind .ui-autocomplete input { width: 100%; }
body .staffLegacy.ui-inputfield { width: 100%; box-sizing: border-box; }
body .staffRule { display: flex; gap: 6px; align-items: baseline; margin-top: 6px; font-size: 0.85em;
    opacity: 0.8; }
body .staffFoot { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; gap: 12px; }
body .staffSaveNote { font-size: 0.85em; opacity: 0.7; }

/* The trip editor's "Registrations managed" radio and the two external fields it reveals. */
body .regHosting { margin-left: 12px; }
body .extFields { margin: 6px 0 2px 14px; padding: 8px 12px; border-left: 3px solid var(--primary-color);
    background: var(--surface-ground, #f6f6f6); border-radius: 0 6px 6px 0; }
body .extField { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 3px 0; }
body .extField label { min-width: 140px; font-weight: 600; }

/*
 * A short note under a property-sheet value (the trip editor's Payment Settings and Registration Pricing rows,
 * WEB-INF/noProcessorNote.xhtml): why a setting cannot be used yet, and the link that fixes it.
 */
body .rowNote { display: flex; gap: 8px; align-items: baseline; margin: 6px 0 2px 20px; padding: 6px 10px;
    max-width: 520px; font-size: 0.88em; line-height: 1.4; white-space: normal; border-radius: 6px;
    background: var(--surface-ground, #f6f6f6); color: var(--text-color); }
body .rowNoteWarn { border-left: 3px solid #c27c0e; border-radius: 0 6px 6px 0; }
body .rowNoteIcon { color: var(--text-color-secondary, #6c757d); flex: none; }
body .rowNoteWarn .rowNoteIcon { color: #c27c0e; }

/*
 * The Registration Options table (WEB-INF/regOptionsDialog.xhtml). Its text fields read as text until hovered
 * or focused, so the table looks like a list of questions rather than a grid of boxes; the help text sits under
 * the question, smaller and muted, and the placeholders are the greyed hints for an empty field.
 */
body .regOptsTable td { vertical-align: top; }
body .regOptsTable .regOptTextCol { width: auto; }
body .regOptsTable .regOptTypeCol { width: 210px; }
body .ui-inputfield.regOptQuiet {
    display: block; width: 100%; box-sizing: border-box; padding: 3px 6px;
    background: transparent; border-color: transparent; box-shadow: none;
}
body .ui-inputfield.regOptQuiet:hover { border-color: var(--surface-border, #ccc); }
body .ui-inputfield.regOptQuiet:focus { background: var(--surface-card, #fff); border-color: var(--primary-color); }
body .ui-inputfield.regOptQuiet::placeholder { color: var(--text-color-secondary, #6c757d); opacity: 0.7;
    font-style: italic; }
body .ui-inputfield.regOptName { font-weight: 600; }
body .ui-inputfield.regOptHelp { margin-top: 1px; font-size: 0.85em; color: var(--text-color-secondary, #6c757d);
    resize: none; overflow: hidden; line-height: 1.35; min-height: 0; }
body .regOptsTable .ui-selectonemenu.regOptType { width: 100%; min-width: 0; }
body .regOptChoices { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 6px; }
body .regOptChoice { padding: 1px 8px; border-radius: 10px; font-size: 0.8em; white-space: nowrap;
    background: var(--surface-ground, #f1f1f1); border: 1px solid var(--surface-border, #ddd); }
body .regOptChoiceOff { opacity: 0.55; text-decoration: line-through; }
body .regOptChoicePrice { color: var(--text-color-secondary, #6c757d); }
body .regOptNoChoices { font-size: 0.8em; font-style: italic; opacity: 0.65; }
body .regOptChoicesLink { font-size: 0.85em; margin-left: 2px; white-space: nowrap; }

/* A "you are about to leave this editor" dialog body: icon beside the explanation. */
body .leaveDlg { display: flex; gap: 14px; align-items: flex-start; max-width: 440px; }
body .leaveDlg p { margin: 0 0 8px; }
body .leaveDlgIcon { font-size: 1.6rem; color: #c27c0e; margin-top: 2px; }

/* A container's row template writes its child's title unconditionally; an untitled child (and any
   programmatic child, which titles itself from live data) would otherwise leave an empty heading box. */
.contentTitle:empty {
    display: none;
}

/* An organization site's text wordmark (topbar.xhtml): the org's name where the shared site shows its
   logo image, when the org has set no logo. Sized to sit centered in the 62px bar. */
.siteWordmark {
    display: inline-flex;
    align-items: center;
    height: 62px;
    font-size: 1.6rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--primary-color);
    text-decoration: none;
}

/* ---- date + time rows: a range picker for the first and last day, then a label glued to each time picker
   ("arriving 3:00 PM"). Used by the lodging dialogs, the trip editors' Trip Dates row and the trip-event
   dialog. A p:datePicker renders <span class="ui-calendar"><input><button></span>: a width on the COMPONENT
   sizes that span while the input keeps its own, so the calendar button drops onto a line of its own (the
   lodging "Default stay" row, 2026-09-07). Size the INPUT instead, and keep each label with its picker so a
   wrap moves the pair together. */
.dateRow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.dateRow .dateWhen { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.dateRow .dateTime input.ui-inputfield { width: 5.5rem; }
.dateRow .dateRange input.ui-inputfield { width: 13rem; }

/* ---- hub card grid: the organization Dashboard (admin/orgSettings.xhtml) and the trip's Reports dashboard
   (admin/reports/index.xhtml). A responsive grid of p:card tiles, each an icon and title, an optional big
   number, one line of small print, and ONE linkButton into the page it stands for. Shared here rather than
   copied into each page's pagecss so the two hubs cannot drift apart; the .card rules undo the theme's own
   bottom margin and let the tiles in a row match heights. */
.hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.hub-grid .card { margin-bottom: 0; height: 100%; }
.hub-head { font-size: 1.1em; font-weight: bold; margin-bottom: 6px; }
.hub-head .pi { margin-right: 8px; }
.hub-num { font-size: 1.9em; font-weight: bold; display: block; margin: 4px 0; }
.hub-sub { opacity: 0.75; font-size: 0.9em; display: block; margin-bottom: 10px; }
/* A card with more than one report: its buttons stack, each under the last, rather than wrapping in a row. */
.hub-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
/* The org Dashboard's two group headings ("Run" and "Set up"), each above its own .hub-grid. */
.hub-section { margin: 18px 0 8px 0; font-size: 1.05em; font-weight: bold; opacity: 0.85; }
.hub-section:first-of-type { margin-top: 6px; }
/* A card that explains why its page is not open to this viewer: present, but visibly not a door. */
.hub-muted { opacity: 0.7; }

/* ---- the Organization Settings page's tabs (admin/orgConfig.xhtml): a sub-heading inside a tab and the
   one line of small print that introduces a block of settings. */
.orgTabSub { margin: 16px 0 6px 0; font-size: 1em; }
.orgTabNote { display: block; font-size: 0.9em; opacity: 0.85; margin-bottom: 0.75rem; }

/* Screen-only chrome: a report's link back to its dashboard is useful on screen and noise on paper, and the
   print views are reached by their own URL (?print=true), so a rendered= gate would take the link away from
   the person reading that view in a browser. */
@media print {
    .noPrint { display: none !important; }
}

/* Privilege / role chips: the trip editor's manager roster, Org People's privilege column and the admin People
   page's read-only Privileges column. One rule here so the three never drift. In a table cell the chips wrap
   onto lines, so they get a little room; the trip editor's roster is a flex row with its own gap. */
.mgr-chip {display:inline-flex; align-items:center; gap:6px; padding:2px 10px; border-radius:11px;
    background:#e6e2f5; color:#3C3489; font-size:0.8em; white-space:nowrap;}
.mgr-chip-x, .mgr-chip-x:visited {color:#3C3489; font-weight:bold; text-decoration:none;}
.mgr-chip-x:hover {color:#a02020; text-decoration:none;}
.ui-datatable .mgr-chip {margin:1px 4px 1px 0;}

/* The one people-list search row (WEB-INF/peopleSearchRow.xhtml). */
.peopleSearchRow {display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin:8px 0;}
.peopleSearchRow .ui-inputtext {width:300px; max-width:100%;}
.peopleSearchRow .peopleTruncated {font-size:0.85em; font-style:italic; margin-left:4px;}