/*
* Custom Portanus Styles
* Author: Custom Canines Service Dog Academy
*/
/* Choices.js searchable selects: keep the open dropdown ABOVE page chrome
(header heroes, sticky bars, cards) everywhere it's used. Without this, a
select near the top of a page opens its list upward and the hero paints over
it. Global so every Choices field is covered, not one template at a time. */
.choices { position: relative; z-index: 1; }
.choices.is-open { z-index: 1060; }
.choices__list--dropdown,
.choices__list[aria-expanded] {
z-index: 1060;
}
/* Same guarantee for Select2 / django-autocomplete-light pickers (trainer hub
dog/trainer boxes): the open dropdown must sit above the header hero. */
.select2-container--open .select2-dropdown,
.select2-dropdown {
z-index: 1060;
}
.select2-container--open {
z-index: 1060;
}
/* ============================================================================
Modern Breadcrumb Navigation - Dark Theme
============================================================================ */
/* Wrapper for breadcrumb navigation */
nav[aria-label="breadcrumb"] {
background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
padding: 1rem 1.5rem;
border-radius: 0.5rem;
margin-bottom: 1.5rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* Override Bootstrap breadcrumb default styles */
nav[aria-label="breadcrumb"] .breadcrumb {
margin: 0;
padding: 0;
background: transparent;
border-radius: 0;
}
/* Breadcrumb items */
nav[aria-label="breadcrumb"] .breadcrumb-item {
color: rgba(255, 255, 255, 0.9);
font-size: 0.875rem;
font-weight: 500;
}
/* Custom arrow separator */
nav[aria-label="breadcrumb"] .breadcrumb-item + .breadcrumb-item::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border-top: 2px solid rgba(255, 255, 255, 0.6);
border-right: 2px solid rgba(255, 255, 255, 0.6);
transform: rotate(45deg);
margin: 0 0.75rem;
vertical-align: middle;
float: none;
padding: 0;
}
/* Breadcrumb links */
nav[aria-label="breadcrumb"] .breadcrumb-item a {
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
transition: all 0.2s ease;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
}
/* Breadcrumb link hover state */
nav[aria-label="breadcrumb"] .breadcrumb-item a:hover {
color: #ffffff;
background: rgba(255, 255, 255, 0.15);
}
/* Active breadcrumb item - simple styling without background */
nav[aria-label="breadcrumb"] .breadcrumb-item.active {
color: #ffffff;
font-weight: 600;
}
/* Icons in breadcrumbs */
nav[aria-label="breadcrumb"] i {
margin-right: 0.5rem;
font-size: 1rem;
}
/* ============================================================================
Page width + spacing normalization
============================================================================
Page-level Bootstrap containers (a direct child of .content) fill the
content area and align flush with the full-width breadcrumb, with one
consistent gap below it — matching the board_hub layout. Applied here
globally so every hub page is uniform without per-template wrapper edits.
The outer .container[data-layout] in base.html supplies the gutter
padding that absorbs a row's negative margins, so removing the nested
container's side padding is safe (rows behave exactly like board's).
============================================================================ */
.content > .container,
.content > .container-fluid {
max-width: 100% !important;
padding-top: 0 !important;
padding-right: 0 !important;
padding-left: 0 !important;
}
/* ============================================================================
Wizard choice lists — the option list rendered by CheckboxSelectMultiple
and RadioSelect in the application wizard. The widget container carries
the `wizard-choice-list` hook (the Bootstrap form-check-input class stays
on the individual inputs); these rules give each option a tidy row.
============================================================================ */
.wizard-choice-list > div {
margin-bottom: 0.4rem;
}
.wizard-choice-list label {
margin-bottom: 0;
cursor: pointer;
}
.wizard-choice-list .form-check-input {
margin-right: 0.5rem;
}
/* ============================================================================
Hub hero header — the standard page header used across every hub.
Defined here (global) so hubs that don't load people_hub.css still get
the consistent dark gradient header + subtitle + hero button styles.
============================================================================ */
.hub-hero {
background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0.5rem;
padding: 2rem 2.5rem;
margin-bottom: 1.5rem;
position: relative;
z-index: 10;
color: #ffffff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.hub-hero h1,
.hub-hero h2,
.hub-hero h3,
.hub-hero p {
color: #ffffff;
}
.hub-hero .hub-subtitle {
color: rgba(255, 255, 255, 0.75);
margin-bottom: 0;
}
.hub-hero .btn {
font-weight: 600;
padding: 0.5rem 1.25rem;
border-radius: 0.375rem;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: all 0.2s ease;
}
.hub-hero .btn-outline-light {
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.3);
color: #ffffff;
}
.hub-hero .btn-outline-light:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.hub-hero .btn-primary {
background: rgba(59, 130, 246, 0.95);
border: 2px solid rgba(59, 130, 246, 1);
color: #ffffff;
}
.hub-hero .btn-primary:hover {
background: rgba(59, 130, 246, 1);
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.hub-hero .btn-success {
background: rgba(34, 197, 94, 0.95);
border: 2px solid rgba(34, 197, 94, 1);
color: #ffffff;
}
.hub-hero .btn-success:hover {
background: rgba(34, 197, 94, 1);
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
/* ============================================================================
Modern Breadcrumb - Alternative class-based version
============================================================================
For pages using .modern-breadcrumb class directly
============================================================================ */
.modern-breadcrumb {
background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
padding: 1rem 1.5rem;
border-radius: 0.5rem;
margin-bottom: 1.5rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.modern-breadcrumb ol {
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.modern-breadcrumb li {
display: flex;
align-items: center;
color: rgba(255, 255, 255, 0.9);
font-size: 0.875rem;
font-weight: 500;
}
.modern-breadcrumb li:not(:last-child)::after {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border-top: 2px solid rgba(255, 255, 255, 0.6);
border-right: 2px solid rgba(255, 255, 255, 0.6);
transform: rotate(45deg);
margin: 0 0.75rem;
}
.modern-breadcrumb a {
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
transition: all 0.2s ease;
display: flex;
align-items: center;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
}
.modern-breadcrumb a:hover {
color: #ffffff;
background: rgba(255, 255, 255, 0.15);
}
.modern-breadcrumb .breadcrumb-icon {
margin-right: 0.5rem;
font-size: 1rem;
}
.modern-breadcrumb .active {
color: #ffffff;
font-weight: 600;
background: rgba(255, 255, 255, 0.2);
padding: 0.25rem 0.75rem;
border-radius: 0.25rem;
display: flex;
align-items: center;
}
/* Collapsible breadcrumb (Option A). The full trail stays in the DOM; on a
phone the middle crumbs collapse behind a tappable "…" so a deep path never
wraps, and tapping it re-expands the whole trail. Desktop shows everything.
The "…" is its own muted crumb (a button), NOT part of the active pill. */
.modern-breadcrumb .bc-ellipsis {
display: none; /* desktop: full trail, no toggle */
}
.modern-breadcrumb .bc-ellipsis .bc-expand {
background: none;
border: 0;
padding: 0.25rem 0.5rem;
color: rgba(255, 255, 255, 0.6);
font-weight: 700;
line-height: 1;
cursor: pointer;
border-radius: 0.25rem;
}
.modern-breadcrumb .bc-ellipsis .bc-expand:hover {
color: #ffffff;
background: rgba(255, 255, 255, 0.15);
}
@media (max-width: 575.98px) {
.modern-breadcrumb {
padding: 0.75rem 1rem;
}
.modern-breadcrumb ol {
flex-wrap: nowrap;
}
/* Collapsed (default): Home › … › Current. Hide the intermediate crumbs,
but never the toggle or the leaf. */
.modern-breadcrumb ol:not(.bc-expanded) li:not(:first-child):not(:last-child):not(.bc-ellipsis) {
display: none;
}
.modern-breadcrumb .bc-ellipsis {
display: flex;
align-items: center;
}
/* Truncate a long current page instead of widening the row (collapsed only). */
.modern-breadcrumb ol:not(.bc-expanded) li:last-child {
display: block;
min-width: 0;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Expanded (user tapped …): show every level, drop the toggle, allow wrap —
the explicit trade for seeing the full path on a small screen. */
.modern-breadcrumb ol.bc-expanded {
flex-wrap: wrap;
}
.modern-breadcrumb ol.bc-expanded .bc-ellipsis {
display: none;
}
}
/* Mobile nav-drawer backdrop + scroll lock.
Below xl the vertical sidebar is a `position:fixed` drawer (z-index 1019) that
is only as TALL as its menu items and has no backdrop — so Falcon left the page
behind/below it both scrollable AND clickable. `inert` on `.content` (base.html)
covers assistive tech, but a real overlay is what reliably blocks pointer taps
in the exposed area and a body scroll-lock is what stops background scroll.
The backdrop sits just under the drawer (1018) and over everything else; tapping
it closes the menu (wired in base.html). Never shown at >=xl where the sidebar
is permanent. */
.nav-drawer-backdrop {
position: fixed;
inset: 0;
z-index: 1018;
background: rgba(0, 0, 0, 0.45);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
.nav-drawer-backdrop.show {
opacity: 1;
pointer-events: auto;
}
body.nav-drawer-open {
overflow: hidden;
}
@media (min-width: 1200px) {
.nav-drawer-backdrop {
display: none !important;
}
body.nav-drawer-open {
overflow: auto;
}
}
/* Last drawer links unreachable on phones. Below xl the scrollable menu area
(.navbar-vertical-content) is capped by Falcon at `100vh - top-nav-height`,
but on mobile `100vh` is the TALL viewport — it counts the space under the
address bar and home indicator that you can't actually see — so the bottom
one or two links (the end of the Admin section) sit beneath the phone's own
chrome and can't be scrolled to or tapped. `100dvh` (dynamic viewport height)
measures the REAL visible area, and the extra bottom padding lifts the last
item clear of the home bar. */
@media (max-width: 1199.98px) {
.navbar-vertical .navbar-collapse .navbar-vertical-content {
max-height: calc(100dvh - var(--falcon-top-nav-height));
}
.navbar-vertical .navbar-vertical-content .navbar-nav {
padding-bottom: 2.5rem;
}
}
/* Footer overlap on mobile. Falcon pins `.footer` (position:absolute; bottom:0)
inside `.content` and reserves a FIXED `padding-bottom` for it. Below 576px the
footer wraps to several lines (the `d-sm-none`
s + a long tenant name), so
it grows taller than that reserve and overlaps the page content above it.
On phones, take the footer out of absolute positioning and let it sit at the
end of a flex column: it can't overlap, and `margin-top:auto` still keeps it
pinned to the bottom on short pages. */
@media (max-width: 575.98px) {
.content {
display: flex;
flex-direction: column;
padding-bottom: 0;
}
.content > .footer {
position: static;
margin-top: auto;
}
}
/* Responsive "stack" tables. On phones a wide table becomes one card per row,
each cell shown as a LABEL (from the column header, stamped onto the cell as
data-label by the script in base.html) above its value — no horizontal scroll,
every field readable. Opt in per table with the `table-stack` class; tables
that genuinely need the grid just leave it off and keep scrolling. */
@media (max-width: 575.98px) {
table.table-stack thead {
display: none;
}
table.table-stack,
table.table-stack tbody,
table.table-stack tr,
table.table-stack td {
display: block;
width: 100%;
}
table.table-stack tr {
border: 1px solid var(--falcon-border-color, #d8e2ef);
border-radius: 0.5rem;
margin-bottom: 0.75rem;
padding: 0.5rem 0.9rem;
}
/* Neutralise Bootstrap's per-cell bottom border/box-shadow in stacked mode. */
table.table-stack td {
border: 0 !important;
box-shadow: none !important;
/* !important so per-cell ps-4/pe-4 (padding-*: 1.5rem !important) can't
shove an individual row's label+value off the shared left rail. */
padding: 0.45rem 0 !important;
text-align: left;
}
/* Two-column key:value row — label in a fixed left column, value to its
right on the same line, so the card fills the width instead of leaving the
right half empty. A value that's too wide simply wraps below. */
table.table-stack td::before {
content: attr(data-label);
display: inline-block;
width: 7.5rem;
vertical-align: top;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--falcon-600, #6e7891);
}
/* A cell with no header label (data-label empty) shouldn't reserve space. */
table.table-stack td[data-label=""]::before {
display: none;
}
/* When a cell's value is itself a flex row (e.g. the dogs list NAME cell:
avatar + name in a ), that block would otherwise drop
BELOW the inline label. Make it inline-flex so it sits beside the label on
the same line, matching the plain-text rows. */
table.table-stack td > .d-flex {
display: inline-flex !important;
vertical-align: top;
}
/* Cells the desktop table center/right-aligns (Actions, Photos, Notes…)
should read left-aligned like the rest when stacked. Bootstrap's
text-* utilities are !important, so the override must be too.
EXCEPT full-width cells (colspan empty states / group headers, stamped
data-label="" by the JS) — those keep their own centering. */
table.table-stack td:not([data-label=""]).text-end,
table.table-stack td:not([data-label=""]).text-center {
text-align: left !important;
}
/* ---- Header-hero action buttons: full-width stacked on phones ----------
Every hub hero (.hub-hero) puts its action buttons in a small flex group
or a right-aligned column. On phones those stack into half-width or
wrapped boxes that read awkwardly. Make any hero container that actually
HOLDS buttons (matched with :has() so the title/avatar rows are left
alone) a full-width single-column grid, and stretch the controls to fill.
This applies the clean "full-width button" look globally — no per-template
edits, and it covers future hubs automatically. :has() is supported in
all current mobile browsers; older ones simply keep the old layout.
The :not(:has(input/select/textarea)) guard skips SEARCH/FILTER forms
(an input next to a button) so they aren't stacked like a button group. */
.hub-hero .d-flex:has(> .btn):not(:has(input, select, textarea)),
.hub-hero .d-flex:has(> .btn-group):not(:has(input, select, textarea)),
.hub-hero .d-flex:has(> .dropdown):not(:has(input, select, textarea)),
.hub-hero [class*="text-lg-end"]:has(> .btn):not(:has(input, select, textarea)),
.hub-hero [class*="text-lg-end"]:has(> .dropdown):not(:has(input, select, textarea)),
.hub-hero [class*="text-md-end"]:has(> .btn):not(:has(input, select, textarea)),
.hub-hero [class*="text-md-end"]:has(> .dropdown):not(:has(input, select, textarea)) {
display: grid !important;
grid-auto-flow: row;
gap: 0.5rem !important;
width: 100%;
}
/* Stretch the controls to fill the column (grid items stretch by default,
but a dropdown's toggle button needs an explicit width). */
.hub-hero [class*="text-lg-end"] > .btn,
.hub-hero [class*="text-md-end"] > .btn,
.hub-hero .btn-group,
.hub-hero .dropdown,
.hub-hero .dropdown > .btn,
.hub-hero .dropdown > .dropdown-toggle {
width: 100%;
}
/* A lone action control placed as a DIRECT child of the hero (no wrapping
flex/column) also goes full-width — it wraps onto its own line under the
title. Covers heroes like the client portal with a single button. */
.hub-hero > .btn,
.hub-hero > .btn-group,
.hub-hero > .dropdown {
width: 100%;
}
/* When the buttons are NESTED inside a hero side-block (e.g. a
`.text-lg-end` column that also holds status badges), that block must
span the full hero width on phones — otherwise the buttons' width:100%
only fills the narrow block, not the row. Any direct hero child that
contains a button/dropdown gets a full-width flex basis so it drops to
its own full-width line under the title. */
.hub-hero.d-flex > *:has(.btn),
.hub-hero.d-flex > *:has(.dropdown) {
flex-basis: 100% !important;
max-width: 100%;
}
/* A button wrapped in a