/* Site-wide custom styles */

/* Navbar — semantic classes with sensible defaults.
   Sites override these in their own CSS (e.g. cfs.css). */
.site-navbar {
    background-color: #f8f9fa;
}

.site-navbar-brand {
    /* inherits Bootstrap navbar-brand defaults */
}

.site-navbar-logo {
    height: 32px;
}

.site-navbar-cta {
    text-decoration: none;
    font-size: .875rem;
    font-weight: 600;
    padding: .4rem 1.2rem;
    border-radius: 4px;
    white-space: nowrap;
}

.site-navbar-login {
    /* inherits Bootstrap nav-link defaults */
}

/* System admin workspace navbar — neutral blue, common library workspace.
 *
 * To change it for a site, paste this into that site's stylesheet and set
 * your own color — it loads after this file and wins:
 *
 *     .site-navbar.site-navbar-system-admin {
 *         background-color: #9c4f3f;
 *     }
 */
.site-navbar.site-navbar-system-admin {
    background-color: #3a5a8c;
    color: #fff;
}
.site-navbar.site-navbar-system-admin .navbar-brand,
.site-navbar.site-navbar-system-admin .nav-link {
    color: rgba(255, 255, 255, 0.85);
}
.site-navbar.site-navbar-system-admin .nav-link:hover {
    color: #fff;
}
.site-navbar.site-navbar-system-admin .avatar-circle {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Avatar circle - used in navbar and anywhere user initials are displayed */
.avatar-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background-color: #6c757d;
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Layout field rendering — consistent dimensions in display and edit modes.
   Both classes share identical box model so switching modes causes no bounce. */
.layout-field,
.layout-field-display {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: .25rem .5rem;
    font-family: inherit;
    font-size: inherit;
    line-height: 1.5;
    border: 1px solid transparent;
    border-radius: .25rem;
    background: transparent;
}

.layout-field {
    border-color: #ced4da;
    background-color: #fff;
}

.layout-field:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .25);
}

select.layout-field {
    padding-right: 2rem;
    appearance: auto;
}

/* A multiple select needs room to be a LIST. Left at the shared field height
   it collapses to about one row, which reads as an empty box rather than as
   something to choose from — and with one option it looks like nothing is
   there at all. Sized to show a few, and to grow no further: a long list
   scrolls rather than pushing the rest of the form down the page. */
select.layout-field[multiple] {
    min-height: 5.5rem;
    max-height: 11rem;
    padding-right: .5rem;
}

/* Layout tables — vertically center cell content (Bootstrap defaults to top,
   which looks off when action buttons make rows taller than text). */
.table td {
    vertical-align: middle;
}

/* Selectable table rows — clickable when a select action is present */
tr.js-selectable-row {
    cursor: pointer;
}

tr.js-selectable-row:hover > td {
    background-color: rgba(13, 110, 253, .08);
}

/* Traffic-light status colors — semantic classes for common library.
   Own colors, not Bootstrap variables. Override in site CSS as needed.
   !important required to override Bootstrap's .table variable cascade. */
.status-green  { color: #198754 !important; }
.status-yellow { color: #cc9a06 !important; }
.status-red    { color: #dc3545 !important; }

.status-bg-green  { background-color: #d1e7dd !important; }
.status-bg-yellow { background-color: #fff3cd !important; }
.status-bg-red    { background-color: #f8d7da !important; }
/* ---------------------------------------------------------------------------
   Counts panel — "what is waiting", on a workspace dashboard.

   A table so the numbers line up. Two rules carry that: the count column is
   right-aligned at a fixed width, and the action column shrinks to its own
   content so the count stays beside its label instead of drifting toward the
   card's edge.
   --------------------------------------------------------------------------- */
.counts-panel-count {
    width: 4rem;
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.counts-panel-action {
    width: 1%;
    white-space: nowrap;
}

/* Layout image fields — a picture where the filename would otherwise be.

   Both sizes are capped by their container rather than given a fixed width, so
   an image field in a narrow column shrinks with it. `contain` via max-width
   alone: nothing here crops, because a cropped record photo misrepresents what
   it is a photo of. */
.layout-field-image {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Beside a title and a caption. Small enough that the picture is one attribute
   among several, which is what a record layout is. */
.layout-field-image-thumb {
    max-height: 120px;
    width: auto;
}

/* For the page that is genuinely ABOUT the image. Takes the column it is given
   — the cost of the original is bytes, not layout. */
.layout-field-image-full {
    width: 100%;
}

/* ==========================================================================
   Tag widget — one record's tags, one type at a time
   ========================================================================== */

.tag-widget {
    margin: 0.75rem 0 0.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* "Tags", over the sections. One heading for the whole thing, so the type
   names below read as parts of it rather than as separate features. */
.tag-widget-heading {
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #666;
}

/* A type's heading — a button, because it opens and closes the section. Reset
   first: a <button> arrives with padding, a border and centred text, none of
   which belongs on what reads as a sub-heading. */
.tag-section-heading {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.2rem 0;
    font: inherit;
    font-weight: 600;
    text-align: left;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}
.tag-section-heading::before {
    content: '▾ ';
    display: inline-block;
    width: 1rem;
    color: #888;
}
/* Collapsed. Bootstrap sets aria-expanded on the control itself, so the glyph
   follows the state without any JavaScript of ours. */
.tag-section-heading[aria-expanded="false"]::before {
    content: '▸ ';
}
.tag-section-count {
    font-weight: 400;
    color: #777;
}
.tag-section-body {
    padding: 0.25rem 0 0.6rem 1rem;
}

/* Both sides of the widget are real action buttons — danger-subtle for a tag
   that would be removed, success-subtle for one that would be added. Bootstrap
   and the site's own `.btn-action-*` overrides supply every bit of their
   appearance and hover.

   ⚠️ This block used to hand-style pills: border, radius, colour, line-height,
   hover, and a bare × with its own reset. Every styling problem in this widget
   came from that — an unthemed control has to reinvent what the system already
   provides, and each reinvention drifts from the buttons beside it. The only
   thing left here is the pill SHAPE, which Bootstrap has no opinion about. */
/* Spacing comes from the flex gap on the rows above; a margin here would be
   added on top of it. Attached tags keep a row margin of their own because
   their container is not a flex row. */
.tag-widget-tag {
    margin: 0 0.4rem 0.4rem 0;
}

/* The input sits on a line of `btn btn-sm` buttons and has to match their BOX.
   Bootstrap already gives both the same padding (.25rem .5rem) and font-size
   (.875rem), so the mismatch was never padding — it was the FONT. A site styles
   `.btn` with its own family and weight (MUD: Arial 600) while an input
   inherits the page's body font (Georgia 400), and two typefaces at one size
   produce different line boxes, so the two controls end up different heights.
   No amount of vertical-align fixes controls that are genuinely not the same
   size.

   `width: auto` because .form-control is display:block, width:100% by default,
   which would put the input on its own line. */
/* Wide enough to type a tag name into and see it, and fixed rather than
   `auto`: an auto-width input inside a flex row collapses toward its
   placeholder and then grows as you type, moving everything beside it. */
.tag-widget-input {
    width: 14rem;
    flex: 0 0 auto;
    font: inherit;
    font-size: 0.875rem;
}

.tag-widget-empty {
    font-size: 0.875rem;
    color: #777;
}

/* The two groups — what the record HAS, and how to add more — were divided only
   by an incidental line break. A gap says they are different things; a second
   <hr> in a block this short would read as fencing, with one already closing the
   whole section. */
.tag-widget-current {
    margin-bottom: 0.9rem;
}

/* The add line: the search box, its Add button, and the shortcut tags, all on
   one row and all the same kind of control.

   ⚠️ `.tag-widget-offers` was `display: inline`, which is what made its buttons
   sit slightly high: an inline box does not GROW to contain inline-block
   children, so it has no height of its own and they aligned against the
   parent's text baseline instead. Its sibling `.tag-widget-create` had no such
   rule and behaved normally — hence one wrapper taller than the other.

   Flex on the row itself now, so both wrappers are laid out by the same rule
   and neither needs its own. `align-items: center` lines the boxes up; `wrap`
   keeps a long list of tags from running off the edge. */
.tag-widget-add {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}
/* The box and its Add button are ONE control and must not be split across
   lines — `nowrap`, and the wrapper keeps its own width rather than being
   squeezed by the tags beside it. */
.tag-widget-create {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    flex: 0 0 auto;
    gap: 0.4rem;
    /* The suggestion list is absolutely positioned; this is what it anchors to.
       ⚠️ It lived in a SECOND `.tag-widget-create` rule further down which also
       set `display: inline-block` — silently overriding the flex above and
       putting the input and its Add button on separate lines. Two rules for one
       selector is how that hides. */
    position: relative;
}

/* The shortcuts DO wrap — there can be ten of them — and they take whatever
   room is left on the row.

   A wider gap before them than between them: the seam between "type a name"
   and "or pick one of these" is a change of KIND, while the tags themselves are
   a list of like things. The row's own gap keeps the two groups from touching;
   this makes the join read as a join. */
.tag-widget-offers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex: 1 1 auto;
    gap: 0.4rem;
    margin-left: 0.85rem;
}

/* Closes the section. Quieter than a full rule — it separates without
   announcing itself as a divider between equals. */
.tag-widget-end {
    margin: 0.75rem 0 0;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.tag-widget-note {
    margin: 0.35rem 0 0;
    font-size: 0.75rem;
    color: #777;
}

/* The suggestion list. Positioned under the input rather than inline, so
   appearing does not push the rest of the panel down as somebody types.
   Anchored by `position: relative` on .tag-widget-create above. */
.tag-widget-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    min-width: 12rem;
    margin-top: 2px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.tag-widget-suggestion {
    padding: 0.3rem 0.6rem;
    font-size: 0.875rem;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
}
.tag-widget-suggestion:hover {
    background-color: rgba(0, 0, 0, 0.06);
}
/* The create option is last and is a different KIND of choice — it makes
   something rather than picking something. */
.tag-widget-suggestion-create {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    font-style: italic;
}