/* ==========================================================================
   Utility classes: text/background/border colour, spacing, sizing and hover helpers.

   Consolidated out of theme.css / theme-override.css. Loads immediately after
   theme-override.css, before components/, so every rule keeps the relative
   cascade position it had before the move.
   ========================================================================== */

/* ----- from theme.css ----- */

.text-primary, .text-primary a {
    color: var(--color-blue) !important;
}

.text-primary:hover, .text-primary a:hover {
    color: var(--color-blue) !important;
}

.text-secondary, .text-secondary a {
    color: var(--color-purple) !important;
}

.text-secondary:hover, .text-secondary a:hover {
    color: var(--color-purple) !important;
}

.text-info, .text-info a {
    color: #48ABF7 !important;
}

.text-info:hover, .text-info a:hover {
    color: #48ABF7 !important;
}

.text-success, .text-success a {
    color: #31CE36 !important;
}

.text-success:hover, .text-success a:hover {
    color: #31CE36 !important;
}

.text-warning, .text-warning a {
    color: #FFAD46 !important;
}

.text-warning:hover, .text-warning a:hover {
    color: #FFAD46 !important;
}

.text-warning::after {
    color: black !important;
}

.text-danger, .text-danger a {
    color: var(--color-red) !important;
}

.text-danger:hover, .text-danger a:hover {
    color: var(--color-red) !important;
}

.text-small {
    font-size: 11px;
}

/*   Font-weight    */

.fw-bold {
    font-weight: 600 !important;
}

/* 		Opacity  	*/

.op-6 {
    opacity: 0.6;
}

.border-left, .border-right, .border-bottom, .border-top {
    border-color: #F0F1F3 !important;
}

/*    margin-top negative   */

/*      Wrapper      */

.pull-left {
    float: left;
}


.border-dark {
    border-color: #24252a9c !important;
}


.gutters-0 {
    margin-right: 0;
    margin-left: 0;
}

.gutters-sm {
    margin-right: -0.5rem;
    margin-left: -0.5rem;
}

/*   Background   */
.bg-transparent {
    background: transparent !important;
}

.bg-black {
    background-color: var(--chrome-base) !important;
}

.bg-black2 {
    background-color: #24252a9c !important;
}

.bg-primary {
    background-color: var(--color-blue) !important;
}

.bg-secondary {
    background-color: var(--color-purple) !important;
}

/* ----- from theme-override.css ----- */

.nowrap {
    white-space: nowrap;
}

.hover-border:hover {
    border: 1px solid lightgray !important;
    cursor: pointer !important;
}

.hover-border a:hover {
    text-decoration: none;
}

.hover-text:hover {
    text-decoration: underline;
    color: lightblue;
    cursor: pointer;
}

.w-1px {
    width: 1px !important;
}

.hover-dark:hover {
    color: #343a40 !important;
}

.hover-light:hover {
    color: #f8f9fa !important;
}

.hover-pointer:hover {
    cursor: pointer;
}

/* For controls that act like links but have no href (HTMX-driven modal
   openers), so they still read as clickable. */
.cursor-pointer {
    cursor: pointer;
}

/* Collapse a button label to icon-only once the container gets too narrow to
   keep it on one line (user-detail identity header: Edit shrinks to its icon
   before the name/email would wrap under it). */
.label-collapse-container {
    container-type: inline-size;
}

@container (max-width: 300px) {
    .label-collapse {
        display: none;
    }
}

/* A list row that opens a modal on click (e.g. account rows). Action buttons
   inside the row stop propagation so they run their own handler instead. */
.row-clickable {
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.12s ease, box-shadow 0.12s ease;
}

.row-clickable:hover {
    background: var(--surface-3);
}

/* Quiet heading for a section that doesn't warrant a card header: same
   uppercase, letter-spaced treatment as a fieldset legend. */
.section-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-quiet);
}

/* Hairline between stacked sibling rows that are plain content rather than a
   bordered component. Sits on every row but the first, so the group gets
   separators without an outer edge. Bootstrap's .border-top can't do this
   job — it is pinned to a light grey !important further up this file. */
.row-divider + .row-divider {
    border-top: 1px solid var(--border-subtle);
}

/* Read-only detail grid: a label sitting on its value as one unit.

   Tight leading on both, and no gap between them, is what makes the pair read
   as one field rather than two stacked lines — the air belongs between fields,
   not inside one. The caps treatment matches .section-label but runs smaller
   and lighter, so a grid can carry it without competing with a section title
   above it. */
.field-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--text-quiet);
    margin-bottom: 0.25rem;
}

.field-value {
    line-height: 1.4;
    color: var(--text-primary);
    /* Phone numbers and counts sit in this grid; fixed-width digits stop them
       shivering when a value changes. */
    font-variant-numeric: tabular-nums;
}

.hover {
    color: blue;
}

/* Text sitting on a .bg-* tint or a coloured chrome bar. The tint is pale
   on light, so these resolve to ink there rather than white. */
.bg-primary.text-white,
.bg-info.text-white,
.bg-danger.text-white {
    color: var(--on-tint-fg) !important;
}

.text-white-75 {
    color: var(--text-secondary) !important;
}

.text-white-85 {
    color: var(--text-primary) !important;
}

/* ============================================
   UTILITIES - Background & Text colors
   ============================================ */

/* Background color utilities */
.bg-primary {
    background: rgba(var(--bs-primary-rgb), 0.15) !important;
}

.bg-secondary {
    background: rgba(var(--bs-secondary-rgb), 0.15) !important;
}

/* Paired surfaces: .bg-light + .text-dark and .bg-dark + .text-light have to
   stay legible on both themes, so each paints a fixed slab rather than a wash
   of the current page. */
.bg-light {
    background: var(--bs-light-well) !important;
}

/* The same paintable well every other *-dark variant uses, so .bg-dark is
   dark on both themes rather than an 8% wash of it. */
.bg-dark {
    background: var(--bs-dark-well) !important;
}

/* Surface-system overrides, for the instance that needs something other than
   its role's default fill. Three, deliberately: if a fourth is wanted, the
   role is wrong and should be fixed instead of patched here. */
.bg-raise { background: var(--bg-raise) !important; }
.bg-inset { background: var(--bg-inset) !important; }
.bg-flat  { background: transparent !important; }

/* Text color utilities */
.text-primary,
.text-primary:hover,
.text-primary:focus,
.text-primary a,
.text-primary a:focus {
    color: var(--bs-primary) !important;
}

a.text-primary:hover,
a.text-primary:focus,
.text-primary a:hover {
    color: rgba(var(--bs-primary-rgb), 0.75) !important;
}

.text-secondary,
.text-secondary:hover,
.text-secondary:focus,
.text-secondary a,
.text-secondary a:focus {
    color: var(--bs-secondary) !important;
}

a.text-secondary:hover,
a.text-secondary:focus,
.text-secondary a:hover {
    color: rgba(var(--bs-secondary-rgb), 0.75) !important;
}

.text-muted,
.text-muted:hover,
.text-muted:focus,
.text-muted a,
.text-muted a:focus {
    color: var(--text-muted) !important;
}

a.text-muted:hover,
a.text-muted:focus,
.text-muted a:hover {
    color: rgba(var(--text-muted-rgb), 0.75) !important;
}

.text-tertiary,
.text-tertiary:hover,
.text-tertiary:focus,
.text-tertiary a,
.text-tertiary a:focus {
    color: var(--text-tertiary) !important;
}

a.text-tertiary:hover,
a.text-tertiary:focus,
.text-tertiary a:hover {
    color: rgba(var(--text-tertiary-rgb), 0.75) !important;
}

.text-success,
.text-success:hover,
.text-success:focus,
.text-success a,
.text-success a:focus {
    color: var(--bs-success) !important;
}

a.text-success:hover,
a.text-success:focus,
.text-success a:hover {
    color: rgba(var(--bs-success-rgb), 0.75) !important;
}

.text-warning,
.text-warning:hover,
.text-warning:focus,
.text-warning a,
.text-warning a:focus {
    color: var(--bs-warning) !important;
}

a.text-warning:hover,
a.text-warning:focus,
.text-warning a:hover {
    color: rgba(var(--bs-warning-rgb), 0.75) !important;
}

.text-danger,
.text-danger:hover,
.text-danger:focus,
.text-danger a,
.text-danger a:focus {
    color: var(--bs-danger) !important;
}

a.text-danger:hover,
a.text-danger:focus,
.text-danger a:hover {
    color: rgba(var(--bs-danger-rgb), 0.75) !important;
}

.text-info,
.text-info:hover,
.text-info:focus,
.text-info a,
.text-info a:focus {
    color: var(--bs-info) !important;
}

a.text-info:hover,
a.text-info:focus,
.text-info a:hover {
    color: rgba(var(--bs-info-rgb), 0.75) !important;
}

/* Hover utilities */
.hover-lift {
    transition: transform 0.15s ease;
}

.hover-lift:hover {
    transform: translateY(-1px);
}

/* The .text-* utilities above lock their color on :hover (with !important), so
   a tinted element can't show a hover affordance on its own. Pair .text-hover-bright
   with any .text-* class to brighten whatever its color is on hover — `brightness`
   lifts the existing tint instead of overriding it, so it works with any text color. */
.text-hover-bright {
    transition: filter 0.12s ease;
    cursor: pointer;
}

.text-hover-bright:hover {
    filter: brightness(1.3);
}

.text-light, .text-light:hover, .text-light a, .text-light a:hover {
    color: var(--bs-dark-fg) !important;
}

.text-dark, .text-dark:hover, .text-dark a, .text-dark a:hover {
    color: var(--bs-light-well-fg) !important;
}

.text-purple {
    color: var(--color-purple) !important;
}

.text-blue {
    color: var(--color-blue) !important;
}

.text-green {
    color: var(--color-green) !important;
}

.text-orange {
    color: var(--color-orange) !important;
}

.text-red {
    color: var(--color-red) !important;
}

.text-purple-muted {
    color: rgba(var(--bs-info-rgb), 0.6) !important;
}

.text-blue-muted {
    color: rgba(var(--bs-primary-rgb), 0.6) !important;
}

.text-green-muted {
    color: rgba(var(--bs-success-rgb), 0.6) !important;
}

.text-orange-muted {
    color: rgba(var(--bs-warning-rgb), 0.6) !important;
}

.text-red-muted {
    color: rgba(var(--bs-danger-rgb), 0.6) !important;
}

.gap-1 {
    gap: 0.25rem !important;
}

.gap-1_5 {
    gap: 0.375rem !important;
}

.gap-2 {
    gap: 0.5rem !important;
}

.gap-2_5 {
    gap: 0.75rem !important;
}

.gap-3 {
    gap: 1rem !important;
}

.gap-4 {
    gap: 1.5rem !important;
}

.row-gap-1 {
    row-gap: 0.25rem !important;
}

.row-gap-1_5 {
    row-gap: 0.375rem !important;
}

.row-gap-2 {
    row-gap: 0.5rem !important;
}

.row-gap-2_5 {
    row-gap: 0.75rem !important;
}

.row-gap-3 {
    row-gap: 1rem !important;
}

.border-left, .border-right, .border-bottom, .border-top {
    border-color: var(--border-normal) !important;
}

.border-primary {
    border-color: var(--bs-primary) !important;
}

.border-secondary {
    border-color: var(--bs-secondary) !important;
}

.border-subtle {
    border-color: var(--border-subtle) !important;
}

.border-emphasis {
    border-color: var(--border-emphasis) !important;
}

.border-light {
    border-color: var(--bs-light) !important;
}

.border-dark {
    border-color: var(--bs-dark) !important;
}

.border-success {
    border-color: var(--bs-success) !important;
}

.border-info {
    border-color: var(--bs-info) !important;
}

.border-warning {
    border-color: var(--bs-warning) !important;
}

.border-danger {
    border-color: var(--bs-danger) !important;
}

.hover-opacity-25:hover {
    opacity: 25% !important;
}

.hover-opacity-50:hover {
    opacity: 25% !important;
}

.hover-opacity-75:hover {
    opacity: 75% !important;
}

.hover-opacity-100:hover {
    opacity: 100% !important;
}

/* Keyboard shortcut hint overlaid inside an input */
/* Fixed-width numerals so digits align vertically in columns. App-wide. */
.tabular-nums {
    font-variant-numeric: tabular-nums !important;
}

.fs-12px {
    font-size: 12px !important;
}

/* ======================================================================
   Merged in from theme.css / theme-override.css.
   ====================================================================== */

/* ----- from theme.css ----- */
.gutters-0 > .col, .gutters-0 > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
}

.gutters-sm > .col, .gutters-sm > [class*="col-"] {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

/* ----- from theme-override.css ----- */
@media only screen and (max-width: 700px) {
    .hideWhenSmall {
        display: none
    }
}

/* On small screens set flex-basis to 100% */
@media only screen and (max-width: 600px) {
    .flex-basis-100-sm {
        flex-basis: 100% !important;
    }
}

/* Natural size in a flex container: no grow, no shrink, basis auto.
   Bootstrap ships .flex-grow-0 but no basis utility, which is a trap for
   `.card`: it sets `flex: 1 1 0`, so cancelling only the grow leaves the zero
   basis behind and the card collapses to nothing. This resets all three. */
.flex-none {
    flex: none !important;
}