/* AmpleoCRM Brand Variables & Design Tokens */
:root {
    --ampleo-primary: #2A4D69;
    --ampleo-secondary: #62829D;
    --ampleo-vivid: #0037CE;
    --ampleo-accent: #9E7D5F;
    --ampleo-neutral: #D9D9D9;
    --ampleo-bg: #F8F9FA;

    /* Spacing tokens */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    /* Layout tokens */
    --density-sidebar-width: 16.5rem;

    /* Font-size tokens */
    --font-sm: 0.875rem;
    --font-md: 1rem;
    --font-lg: 1.125rem;
    --font-xl: 1.5rem;

    /* Radius tokens */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;

    /* App shell tokens: white panels floating on a canvas. The canvas and the hairlines are the warm paper
       of the public site (public-theme.css), the ink is Ampleo navy, and the quiet fills are a light navy
       tint, so the brand reads through tone rather than through large coloured areas. */
    --app-canvas: #F4F0E8;
    --app-surface: #FFFFFF;
    --app-surface-muted: #EEF2F6;
    --app-surface-hover: #E3EAF1;
    --app-ink: #2A4D69;
    --app-muted: #6B7A88;
    --app-line: #E8E3DA;
    --app-accent-text: #806A4E; /* the bronze accent darkened to 5:1 on white, for small text */
    --app-shell-gap: 0.625rem;
    --shadow-float: 0 1px 3px rgba(31, 59, 87, 0.06), 0 0 0 1px rgba(31, 59, 87, 0.05);
    --bs-border-color: #E3DDD2;

    /* Font tokens. Plus Jakarta Sans is self-hosted (wwwroot/css/fonts.css) and shared with the public site. */
    --font-app: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ── Settings hub cards ─────────────────────────────────────────────── */
.hub-card {
    transition: box-shadow 0.15s ease, transform 0.15s ease;
    border: 1px solid rgba(0,0,0,0.07) !important;
}

.hub-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.10) !important;
    transform: translateY(-2px);
}

.hub-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--ampleo-primary) 10%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--ampleo-primary);
}

/* Proportional root scaling - adjusts smoothly with viewport width and user preference */
html {
    font-size: calc(clamp(13px, 0.5vw + 5px, 15px) * var(--user-zoom, 1));
}

/* Hide the browser's empty date/datetime format hint (e.g. "dd/mm/yyyy") when the
   field has no value and is not focused. The component adds .dt-empty when _inputValue
   is null so this selector is precise: hides hint only for empty+unfocused fields. */
.dt-empty:not(:focus)::-webkit-datetime-edit {
    color: transparent;
}

/* DateTimePicker - time popup spinner */
.dt-time-popup .btn {
    line-height: 1;
    font-size: 0.85rem;
}

/* DateTimePicker calendar. The component draws its own popup, so the browser's is suppressed by hiding
   the only control that opens it: Chrome's popup cannot be styled or scripted, and it navigates one month
   per step, which puts a birth year hundreds of clicks away. The field itself is untouched - typing a date
   straight into it still works. */
.dt-date::-webkit-calendar-picker-indicator {
    display: none;
}

/* Above Bootstrap's modal (1055): the picker is used inside modals and grid cells. */
.dt-cal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1080;
}

.dt-cal-popup {
    position: fixed;
    z-index: 1081;
    width: 290px;
    background: #fff;
}

.dt-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.dt-cal-weekday {
    text-align: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: #888;
}

.dt-cal-day {
    border: 0;
    background: transparent;
    border-radius: 0.25rem;
    padding: 0.3rem 0;
    font-size: 0.85rem;
    line-height: 1.2;
}

.dt-cal-day:hover {
    background: var(--ampleo-bg);
}

.dt-cal-other {
    color: #bbb;
}

.dt-cal-today {
    outline: 1px solid var(--ampleo-primary);
}

.dt-cal-selected, .dt-cal-selected:hover {
    background: var(--ampleo-primary);
    color: #fff;
}

.dt-cal-year {
    max-width: 5.5rem;
}

/* General */
html, body {
    font-family: var(--font-app);
    background-color: var(--ampleo-bg);
    color: #444;
    line-height: 1.6;
}

h1, .h1, h2, .h2, h3, .h3 {
    font-family: var(--font-app);
    color: var(--ampleo-primary);
    font-weight: 700;
    letter-spacing: -0.5px;
}

h1:focus {
    outline: none;
}

/* Form validation */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

/* Error boundary */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA9NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDg2IDY2LjAxODMaIDI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

/* Form styling */
.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, 
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, 
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Table enhancements */
.table {
    border-collapse: separate;
    border-spacing: 0;
}

.table > thead {
    background-color: #fcfcfc;
    color: var(--ampleo-primary);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05rem;
}

.table > thead th {
    border-bottom: 2px solid var(--ampleo-neutral) !important;
    padding: var(--space-sm) var(--space-md);
}

/* Hover only tints the row; a row that lifts (transform plus shadow) jitters under the pointer. There is
   no generic card hover shadow either, so only cards made to be clicked, like the hub cards, lift. */
.table > tbody > tr {
    transition: background-color 0.15s ease;
}

.table > tbody > tr:hover {
    background-color: rgba(42, 77, 105, 0.03) !important;
}

/* The open-record link after a lookup value appears on the row being pointed at. Screens that cannot
   point (touch) keep it visible. */
@media (hover: hover) {
    tr .lookup-open {
        opacity: 0;
        transition: opacity 0.12s ease;
    }

    tr:hover .lookup-open,
    .lookup-open:focus-visible {
        opacity: 1;
    }
}

.table td {
    padding: var(--space-sm) var(--space-md);
    vertical-align: middle;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

/* Breadcrumb and Link enhancements */
a, .btn-link {
    color: var(--ampleo-secondary);
    text-decoration: none;
    transition: all 0.2s;
}

a:hover {
    color: var(--ampleo-primary);
    text-decoration: none;
}

.breadcrumb-item a {
    color: var(--ampleo-secondary);
}

.breadcrumb-item.active {
    color: var(--ampleo-accent);
}

/* Tab enhancements */
.nav-tabs {
    border-bottom: 1px solid var(--ampleo-neutral);
    gap: 1.5rem;
}

.nav-tabs .nav-link {
    color: var(--ampleo-secondary);
    border: none !important;
    border-bottom: 3px solid transparent !important;
    padding: var(--space-sm) var(--space-xs);
    font-weight: 600;
    font-size: var(--font-sm);
    background: transparent !important;
    transition: all 0.2s;
}

.nav-tabs .nav-link:hover {
    color: var(--ampleo-primary);
    border-bottom-color: var(--ampleo-neutral) !important;
}

.nav-tabs .nav-link.active {
    color: var(--ampleo-primary) !important;
    border-bottom-color: var(--ampleo-accent) !important;
}

/* Links and Back buttons */
.text-decoration-none.text-primary, .text-decoration-none:not([class*="text-"]) {
    color: var(--ampleo-secondary) !important;
}

.text-decoration-none:hover {
    color: var(--ampleo-primary) !important;
}

/* Follow-up banner (shown above the form card when followUpDate is set) */
.followup-banner {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    background: #fff8e1;
    color: #8a6d0b;
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    font-size: 0.8125rem;
}

.followup-banner.is-overdue {
    background: #fdecea;
    color: #b42318;
}

.followup-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* Related grids (Subgrids) */
.related-grid {
    border: 1px solid var(--ampleo-neutral) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
    margin-top: var(--space-md);
    overflow: hidden !important; /* clip rows at rounded corners so they don't spill out */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Editable grids need visible overflow so lookup dropdowns are not clipped */
.related-grid:has(.editable-grid) {
    overflow: visible !important;
}

.related-grid .card-header {
    background-color: #fff;
    border-bottom: 1px solid var(--ampleo-neutral);
    font-weight: 600;
    color: var(--ampleo-primary);
}

/* Rich grid list (avatar-style rows used when RichGrid is configured) */
.related-grid .rich-grid-list {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.related-grid .rich-grid-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    cursor: pointer;
    transition: background-color 0.12s ease;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

.related-grid .rich-grid-row:last-child {
    border-bottom: none;
}

.related-grid .rich-grid-row:hover {
    background-color: rgba(42, 77, 105, 0.04);
}

.related-grid .rich-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
    flex-shrink: 0;
}

.related-grid .rich-avatar.rich-avatar-badge {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.related-grid .rich-grid-body {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.related-grid .rich-grid-primary {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ampleo-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.related-grid .rich-grid-secondary {
    font-size: 0.75rem;
    color: var(--ampleo-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.related-grid .rich-grid-phone {
    font-size: 0.8125rem;
    color: var(--ampleo-vivid, #0037CE);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.related-grid .rich-grid-phone:hover {
    text-decoration: underline;
}

.related-grid .rich-grid-amount {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ampleo-primary, #2a4d69);
    white-space: nowrap;
    flex-shrink: 0;
}

.related-grid .rich-grid-status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    min-width: 64px;
    justify-content: flex-end;
    flex-shrink: 0;
}

.related-grid .rich-grid-status.is-active {
    color: #198754;
}

.related-grid .rich-grid-status.is-inactive {
    color: #6c757d;
}

.related-grid .rich-grid-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}

.related-grid .table thead {
    /* Uses .table-light override from below */
}

.related-grid .table td,
.related-grid .table th {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
}

/* Ensure lookup dropdowns inside editable grid cells render above sibling rows.
   Tables paint rows in DOM order, so position:absolute dropdowns in row N get
   covered by row N+1. Elevating the focused cell to a new stacking context fixes this.
   Note: the global tr:hover rule uses transform which always creates a new stacking
   context; we suppress that here since editable-grid rows are edited in place, not
   navigated, so the hover-lift animation has no UX value and breaks dropdown layering. */
.editable-grid tr {
    transition: background-color 0.2s;
}

.editable-grid tr:hover {
    transform: none !important;
    box-shadow: none !important;
}

.editable-grid td:focus-within {
    position: relative;
    z-index: 10;
}

/* The same problem one level up, for every table with inline editing - the entity list included,
   which carries no .editable-grid class because its rows ARE navigated and keep the hover lift.

   The trap is the hover rule above, on the row holding the dropdown rather than on any other row.
   Its transform makes that row a stacking context, which confines the dropdown's own z-index:1050
   to the inside of the row; the row itself then has z-index auto and loses to row N+1 on DOM order
   alone. And the pointer is over that row by definition - it is the row just clicked into - so the
   dropdown is covered from the moment it opens. Raising the cell (above) does not reach this: it
   only orders cells within the row that is already losing.

   Lifting the whole row is what fixes it - a stacking context at a z-index no unfocused row can
   reach, carrying everything inside it, dropdown included. Verified by reproducing both states in
   the browser against this stylesheet: with the row transformed and the rule suppressed, the point
   over a dropdown option hit-tests to the NEXT row's input; with the rule applied, it hits the
   option. */
.table > tbody > tr:has(td:focus-within) {
    position: relative;
    z-index: 20;
    /* The hover lift must not apply to this row, and not only to stop it jiggling under an open
       dropdown: js/anchored-dropdown.js pins the panel with position:fixed, and a transformed
       ancestor becomes the containing block for fixed descendants. Left in place, the transform
       would place the panel relative to this row instead of the viewport - measured as landing
       several hundred pixels off-screen. */
    transform: none !important;
}

/* A modal is rendered where it is opened, so any element with its own z-index above it - the sticky page
   header (z 20), a focused grid row (z 20) and its cell (z 10) - becomes a stacking context that holds the
   modal at that element's level, under the sidebar and the help button. While a modal is open inside one of
   them, the element itself is lifted to the modal layer. The side panel has the same rule in its own
   stylesheet. Each anchor is a named element, never a bare *:has(), so the browser only re-checks these.
   A new element with a z-index that can host a modal belongs in this list. */
.page-header:has(.modal.show),
.table > tbody > tr:has(.modal.show),
.editable-grid td:has(.modal.show) {
    z-index: 1055;
}

/* Tab contents */
.tab-content {
    background-color: #fff;
    padding: 1.5rem 0;
}

/* Loading spinner */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* Table enhancements refinements */
.table thead.table-light {
    background-color: rgba(42, 77, 105, 0.05) !important;
    color: var(--ampleo-primary);
}

.table th {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05rem;
    font-weight: 700;
}

.table-sm td {
    font-size: var(--font-sm);
    padding: var(--space-xs) var(--space-sm);
}

/* Button transitions */
.btn {
    transition: all 0.2s;
    font-weight: 600;
    border-radius: var(--radius-sm);
}

.btn-primary {
    background-color: var(--ampleo-primary);
    border-color: var(--ampleo-primary);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.btn-secondary {
    background-color: var(--ampleo-secondary);
    border-color: var(--ampleo-secondary);
}

.btn-outline-primary {
    color: var(--ampleo-primary);
    border-color: var(--ampleo-primary);
    /* Pressed or with its menu open, Bootstrap would fill it with its own blue. */
    --bs-btn-active-bg: var(--ampleo-primary);
    --bs-btn-active-border-color: var(--ampleo-primary);
    --bs-btn-active-color: #fff;
    --bs-btn-focus-shadow-rgb: 42, 77, 105;
}

.btn-outline-primary:hover {
    background-color: var(--ampleo-primary);
    color: #fff;
}

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

/* Re-tints Bootstrap .bg-primary to the brand colour while keeping .bg-opacity-* working.
   A plain background-color drops --bs-bg-opacity, so .bg-primary.bg-opacity-10 rendered as solid
   navy - and every icon tile built from that pair (dashboards, My Day) showed a dark block with an
   invisible brand-coloured icon on it. The other Bootstrap colours were never overridden and so
   never had the problem, which is why only the primary tiles looked wrong. */
.bg-primary {
    background-color: color-mix(in srgb, var(--ampleo-primary) calc(var(--bs-bg-opacity, 1) * 100%), transparent) !important;
}

.spinner-border.text-primary {
    color: var(--ampleo-accent) !important;
}

/* App shell: the sidebar and the content float as panels on the canvas */
.app-shell {
    background-color: var(--app-canvas);
}

/* Sidebar enhancements */
.sidebar {
    background-color: var(--app-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-float);
    margin: var(--app-shell-gap) 0 var(--app-shell-gap) var(--app-shell-gap);
    z-index: 100;
    flex-shrink: 0;
    flex-grow: 0;
    width: var(--density-sidebar-width);
    min-width: var(--density-sidebar-width);
    max-width: var(--density-sidebar-width);
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    height: 4rem;
    padding: 0 1.25rem;
    flex-shrink: 0;
    text-decoration: none;
}

.sidebar-brand img {
    height: 1.4rem;
}

.sidebar-brand span {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: var(--ampleo-primary);
}

.sidebar-divider {
    border-top: 1px solid var(--app-line);
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
}

.sidebar-section {
    padding: 0 0.75rem 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--app-muted);
}

.sidebar .nav-link {
    position: relative;
    color: #3D5266;
    border-radius: var(--radius-md);
    margin: 1px 0;
    padding: 0.45rem 0.75rem;
    font-weight: 500;
    font-size: var(--font-sm);
    transition: background-color 0.15s, color 0.15s;
}

.sidebar .nav-link i {
    color: var(--ampleo-secondary);
    flex-shrink: 0;
}

/* Keep labels on one line so the rail width stays constant across areas
   regardless of the longest label in the current area. */
.sidebar .nav-link span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.sidebar .nav-link:hover {
    background-color: var(--app-surface-muted);
    color: var(--app-ink);
}

.sidebar .nav-link.active {
    background-color: #E6EDF4;
    color: var(--ampleo-primary);
    font-weight: 600;
}

.sidebar .nav-link.active i {
    color: var(--ampleo-accent);
}

/* Bronze marker on the panel's inner edge; the nav list's px-2 padding is the 0.5rem it sits in. */
.sidebar .nav-link.active::before {
    content: "";
    position: absolute;
    left: -0.5rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background-color: var(--ampleo-accent);
}

.sidebar-footer {
    padding: 0.625rem;
    border-top: 1px solid var(--app-line);
}

.sidebar-area-toggle {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: 0;
    border-radius: var(--radius-lg);
    background-color: var(--app-surface-muted);
    color: var(--app-ink);
    text-align: start;
}

.sidebar-area-toggle:hover,
.sidebar-area-toggle[aria-expanded="true"] {
    background-color: var(--app-surface-hover);
}

.sidebar-area-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: var(--radius-md);
    background-color: var(--ampleo-primary);
    color: #fff;
    flex-shrink: 0;
}

.sidebar-area-label {
    display: block;
    font-size: 0.7rem;
    line-height: 1.2;
    color: var(--app-muted);
}

.sidebar-area-name {
    display: block;
    font-size: var(--font-sm);
    font-weight: 600;
    line-height: 1.3;
}

/* Main Content Harmony */
.main-content {
    background-color: var(--app-canvas);
    padding: var(--app-shell-gap) 0.75rem var(--space-md); /* 0.75rem sides absorb the negative margin of Bootstrap .row gutters */
}

.card {
    --bs-card-border-radius: var(--radius-lg);
    border: 1px solid var(--app-line) !important;
    box-shadow: 0 1px 3px rgba(31, 59, 87, 0.05) !important;
    background-color: white;
}

/* The list takes exactly the rest of the page and scrolls inside itself. A short list then ends where a
   long one does instead of leaving a smaller box above empty canvas, and on a long one the column
   headers and the horizontal scrollbar stay in view. Infinite scroll follows along: its sentinel sits in
   the same scroll container and the observer picks the nearest scrolling ancestor as its root. The
   overflow clips the header and footer to the rounded corners; the column menus open inside the table's
   scroll container and were clipped by it already. */
.entity-list-card {
    flex: 1 1 0;
    overflow: hidden;
}

.entity-list-card > .card-body,
.entity-list-card .table-responsive {
    min-height: 0;
}

.entity-list-card .table-responsive {
    overflow: auto;
}

/* On the thead, not the th: the header cells carry Bootstrap's position-relative (!important) for their
   column menu. */
.entity-list-table > thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* The z-index above holds a column's menu at the header's level, under the click-outside layer the list
   puts behind it (1040), so every click on the menu landed on that layer and only closed the menu. While
   a menu is open the header is lifted above the layer. */
.entity-list-table > thead:has(.dropdown-menu.show) {
    z-index: 1045;
}

/* The view switch (list, board, split, map ...) as a segmented control, in the header's quiet style. */
.view-toggle {
    gap: 2px;
    padding: 3px;
    border-radius: var(--radius-lg);
    background-color: var(--app-surface-muted);
}

.view-toggle > .btn {
    --bs-btn-padding-y: 0.2rem;
    --bs-btn-padding-x: 0.6rem;
    --bs-btn-color: var(--ampleo-secondary);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--ampleo-primary);
    --bs-btn-hover-bg: var(--app-surface-hover);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-disabled-color: var(--ampleo-primary);
    --bs-btn-disabled-bg: var(--app-surface);
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-disabled-opacity: 1;
    margin-left: 0 !important;
    border-radius: var(--radius-md) !important; /* beats .btn-group's squared inner corners */
}

/* The active view renders as a disabled button; it reads as the selected segment, not as unavailable. */
.view-toggle > .btn:disabled {
    box-shadow: 0 1px 2px rgba(31, 59, 87, 0.14);
}

/* Page header: back link, record title and the page's actions on one floating bar that stays in view.
   The ::before strip paints the canvas gap above the stuck bar, so content scrolling underneath does not
   show through between the bar and the top edge. */
.page-header {
    position: sticky;
    top: 0; /* measured from the main area's padding edge, which already holds the gap */
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 0.875rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    background-color: var(--app-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-float);
}


/* Bootstrap's .sticky-top sits at z 1020, far above the page header (z 20), so a sticky table header in
   the page painted over the page header once the page scrolled. Kept just under it. */
.main-content .sticky-top {
    z-index: 15;
}

.page-header::before {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    bottom: 100%;
    height: var(--app-shell-gap);
    background-color: var(--app-canvas);
}

.page-header-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-lg);
    background-color: var(--app-surface-muted);
    color: var(--ampleo-secondary);
    flex-shrink: 0;
}

.page-header-back:hover {
    background-color: var(--app-surface-hover);
    color: var(--ampleo-primary);
}

/* The title and the actions share one row whatever the title's length. The title takes the room the
   actions leave and is cut with an ellipsis; only below its minimum do the actions wrap, inside their
   own group, so a long record name never pushes the buttons onto a row of their own. */
.page-header > h1,
.page-header-title {
    flex: 1 1 0;
    min-width: 10rem;
}

/* A record page's command bar is wide enough to squeeze the record name down to that minimum while its
   buttons wrap anyway, so the name keeps a quarter of the header (at most 22rem) and the buttons wrap a
   little sooner. Narrow screens fall back to the 10rem above. */
.page-header:has(> .command-bar) > .page-header-title {
    min-width: clamp(10rem, 25%, 22rem);
}

.page-header-overline {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--app-accent-text);
    line-height: 1.3;
}

.page-header-subtitle {
    margin: 0.125rem 0 0;
    font-size: 0.82rem;
    color: var(--app-muted);
    line-height: 1.4;
}

.page-header h1 {
    margin: 0;
    font-size: 1.45rem;
    line-height: 1.25;
    color: var(--app-ink);
    letter-spacing: -0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-header-actions {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Pages that keep their own action markup (a d-flex group) get the same behaviour as .page-header-actions. */
.page-header > .d-flex:not(.page-header-title) {
    min-width: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* A fixed width rather than Bootstrap's 100%: a percentage width does not count towards the group's
   natural width, so the group would measure itself too narrow and wrap with room to spare. */
.page-header-actions > .input-group,
.page-header > .d-flex > .input-group {
    width: 18rem;
}

/* User Section Sidebar Refinement */
.hover-bg-light-opacity:hover {
    background-color: rgba(255, 255, 255, 0.08);
    cursor: pointer;
}

.card-header {
    background-color: #fafbfc;
    border-bottom: 2px solid var(--ampleo-neutral);
    font-weight: 700;
    color: var(--ampleo-primary);
    padding: var(--space-sm) 1.25rem;
    text-transform: none;
}

/* Sidebar scrollbar */
.sidebar-scroll {
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(16, 24, 40, 0.15) transparent;
    /* Fade top/bottom edges so content softly disappears into the sidebar */
    mask-image: linear-gradient(to bottom, transparent 0%, black 2rem, black calc(100% - 2rem), transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 2rem, black calc(100% - 2rem), transparent 100%);
}

/* Webkit (Chrome, Edge, Safari) */
.sidebar-scroll::-webkit-scrollbar {
    width: 4px;
}

.sidebar-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(16, 24, 40, 0.15);
    border-radius: 4px;
    transition: background-color 0.2s;
}

.sidebar-scroll::-webkit-scrollbar-thumb:hover {
    background-color: rgba(16, 24, 40, 0.3);
}

/* Blazor error UI.
   Defined only here. It was previously styled both here and in MainLayout.razor.css, and the scoped
   rule won on specificity: it set a pale background but no color, so this block's white text stayed and
   the message rendered invisible. Keep the banner's styling in one file so the two cannot drift apart. */
#blazor-error-ui {
    background: #dc3545;
    color: white;
    bottom: 0;
    left: 0;
    position: fixed;
    width: 100%;
    box-sizing: border-box;
    /* Above everything, modals and the side panel included: it says the connection is gone. */
    z-index: 1100;
    padding: 1rem;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
}

#blazor-error-ui .reload {
    color: white;
    text-decoration: underline;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 1rem;
}

/* ─── Tiptap Editor ─── */

.tiptap-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.125rem;
    padding: 0.375rem 0.5rem;
    border-bottom: 1px solid #dee2e6;
    background: #fafbfc;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.tiptap-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.875rem;
    height: 1.875rem;
    padding: 0 0.375rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: none;
    color: #444;
    font-size: 0.8125rem;
    cursor: pointer;
    line-height: 1;
}

.tiptap-btn:hover {
    background: #e9ecef;
    border-color: #dee2e6;
}

.tiptap-btn.active {
    background: var(--ampleo-primary);
    color: #fff;
    border-color: var(--ampleo-primary);
}

.tiptap-separator {
    display: inline-block;
    width: 1px;
    height: 1.25rem;
    background: #dee2e6;
    margin: 0 var(--space-xs);
    vertical-align: middle;
}

.tiptap-editor-content {
    min-height: 500px;
    max-height: 700px;
    overflow-y: auto;
}

.tiptap-prosemirror {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 11pt;
    line-height: 1.6;
    padding: var(--space-md) 1.25rem;
    outline: none;
    min-height: 500px;
}

.tiptap-prosemirror:focus {
    outline: none;
}

/* Placeholder */
.tiptap-prosemirror p.is-editor-empty:first-child::before {
    content: attr(data-placeholder);
    color: #adb5bd;
    pointer-events: none;
    float: left;
    height: 0;
}

/* Merge fields */
.tiptap-prosemirror .merge-field,
.email-subject-prosemirror .merge-field,
.merge-field {
    display: inline;
    background: #e8f0fe;
    border: 1px solid #4285f4;
    border-radius: 4px;
    padding: 1px 6px;
    color: #1a73e8;
    font-size: 0.9em;
    font-weight: 500;
    white-space: nowrap;
}

/* Email subject field – contenteditable with merge-field pills */
.email-subject-field {
    white-space: nowrap;
    overflow: hidden;
    min-height: auto;
}
.email-subject-field:empty::before {
    content: attr(data-placeholder);
    color: #adb5bd;
    pointer-events: none;
}
.email-subject-field .merge-field {
    cursor: default;
}

/* Merge table markers */
.tiptap-prosemirror .merge-table-marker,
.merge-table-marker {
    display: block;
    background: #fef7e0;
    border: 1px dashed #f9ab00;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 0.8em;
    color: #e37400;
    margin-bottom: 4px;
}

/* Merge tables */
.tiptap-prosemirror table.merge-table,
table.merge-table {
    border-collapse: collapse;
    width: 100%;
    margin: 12px 0;
}

.tiptap-prosemirror table.merge-table td,
.tiptap-prosemirror table.merge-table th,
table.merge-table td,
table.merge-table th {
    border: 1px solid #d0d0d0;
    padding: 6px 10px;
}

.tiptap-prosemirror table.merge-table thead th,
table.merge-table thead th {
    background: #f1f3f4;
    font-weight: 600;
}

/* Tiptap native table styles */
.tiptap-prosemirror table {
    border-collapse: collapse;
    margin: 0;
    overflow: hidden;
    table-layout: fixed;
    width: 100%;
}

.tiptap-prosemirror td,
.tiptap-prosemirror th {
    border: 1px solid #d0d0d0;
    box-sizing: border-box;
    min-width: 1em;
    padding: 6px 10px;
    position: relative;
    vertical-align: top;
}

.tiptap-prosemirror th {
    background-color: #f1f3f4;
    font-weight: 600;
}

.tiptap-prosemirror .selectedCell:after {
    background: rgba(66, 133, 244, 0.15);
    content: "";
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    pointer-events: none;
    position: absolute;
    z-index: 2;
}

/* Table column resize handle */
.tiptap-prosemirror .column-resize-handle {
    background-color: #4285f4;
    bottom: -2px;
    pointer-events: none;
    position: absolute;
    right: -2px;
    top: 0;
    width: 4px;
}

.tiptap-prosemirror.resize-cursor {
    cursor: col-resize;
}

.tableWrapper {
    overflow-x: auto;
}

/* Images */
.tiptap-prosemirror img.template-image {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 8px 0;
}

.tiptap-prosemirror img.ProseMirror-selectednode {
    outline: 2px solid var(--ampleo-vivid);
    border-radius: 4px;
    resize: both;
    overflow: hidden;
    cursor: nwse-resize;
}

/* Horizontal rule */
.tiptap-prosemirror hr {
    border: none;
    border-top: 2px solid #dee2e6;
    margin: 16px 0;
}

/* Document preview in modal */
.document-preview {
    max-height: 60vh;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.6;
}
.document-preview table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
}
.document-preview td,
.document-preview th {
    border: 1px solid #dee2e6;
    padding: 6px 10px;
}
.document-preview th {
    background-color: #f8f9fa;
    font-weight: 600;
}

/* Command bar */
.command-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.page-header .command-bar {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    justify-content: flex-end;
}

.command-bar > .btn,
.command-bar > .dropdown > .btn,
.page-header-actions > .btn {
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-font-size: var(--font-sm);
    --bs-btn-font-weight: 500;
    --bs-btn-border-radius: var(--radius-lg);
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Outline variants become one quiet neutral button; the variant survives only as the icon's tint, so
   the bar has a single filled (primary) action and colour still hints at what a command does. */
.command-bar > [class*="btn-outline-"],
.command-bar > .dropdown > .btn,
.page-header-actions > [class*="btn-outline-"] {
    --bs-btn-color: var(--ampleo-primary);
    --bs-btn-bg: var(--app-surface-muted);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--app-ink);
    --bs-btn-hover-bg: var(--app-surface-hover);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--app-ink);
    --bs-btn-active-bg: var(--app-surface-hover);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: #8796A5;
    --bs-btn-disabled-bg: var(--app-surface-muted);
    --bs-btn-disabled-border-color: transparent;
}

.command-bar > .btn-outline-primary i { color: var(--ampleo-primary); }
.command-bar > .btn-outline-info i { color: #0B7285; }
.command-bar > .btn-outline-success i { color: #1E7B45; }
.command-bar > .btn-outline-warning i { color: #B7791F; }
.command-bar > .btn-outline-danger i { color: #C0392B; }

.command-bar .dropdown-toggle::after {
    display: none;
}

/* ── Pagination ─────────────────────────────────────────────────────────── */
.page-link {
    color: var(--ampleo-primary);
    border-color: var(--ampleo-neutral);
}

.page-link:hover,
.page-link:focus {
    color: var(--ampleo-primary);
    background-color: color-mix(in srgb, var(--ampleo-primary) 8%, transparent);
    border-color: var(--ampleo-secondary);
}

.page-item.active .page-link {
    background-color: var(--ampleo-primary);
    border-color: var(--ampleo-primary);
    color: #fff;
}

.page-item.disabled .page-link {
    color: var(--ampleo-neutral);
    border-color: var(--ampleo-neutral);
}

/* The help button is styled in HelpButton.razor.css. */

/* Metric cards - Ampleo palette */
.metric-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.metric-card {
    background: #f4f7fa;
    border: 1px solid rgba(42, 77, 105, 0.08);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
    transition: box-shadow 0.15s ease;
}

.metric-card:hover {
    box-shadow: 0 2px 6px rgba(42, 77, 105, 0.08);
}

.metric-value {
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.3;
    color: var(--ampleo-primary);
}

.metric-value.is-empty {
    color: #A9B4BF;
}

.metric-label {
    font-size: 0.75rem;
    color: var(--ampleo-secondary);
    margin-bottom: 0.25rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* Section headers on forms */
.form-section-header {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--ampleo-secondary);
    letter-spacing: 0.02em;
    margin-bottom: 0.75rem;
    margin-top: 0.25rem;
    text-transform: none;
}

/* Section divider within a form column: a bold uppercase heading with a coloured accent
   bar on the left and generous space above, so each section reads as a distinct block on
   the same page instead of fields lumping together. */
.form-section-divider {
    margin-top: 1.85rem;
    margin-bottom: 1rem;
}

    .form-section-divider .form-section-header {
        margin: 0;
        padding-left: 0.6rem;
        border-left: 3px solid var(--ampleo-accent);
        font-weight: 700;
        font-size: 0.9375rem;
        line-height: 1.15;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--ampleo-primary);
    }

/* Form labels - compact and muted, matching prototype */
.form-label {
    font-size: 0.75rem;
    color: var(--ampleo-secondary);
    font-weight: 500;
    margin-bottom: 0.25rem;
    letter-spacing: 0.01em;
}

/* Form inputs - consistent compact sizing */
.form-control,
.form-select {
    font-size: 0.875rem;
}

/* Status badge styling */
.status-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2em 0.6em;
    border-radius: 0.35rem;
}

/* Overdue date accent */
.field-overdue {
    color: #dc3545;
    font-weight: 600;
}

/* Rich grid avatar initials */
.avatar-initials {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background-color: var(--ampleo-primary);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.03em;
}

/* Probability badge – standalone version for main list grids */
.avatar-probability-badge {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: -0.02em;
    flex-shrink: 0;
}

.probability-inline-badge {
    display: inline-block;
    padding: 0.15em 0.55em;
    border-radius: 6px;
    font-size: 0.8em;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.4;
}

/* Colored option badge for list views */
.option-badge {
    display: inline-block;
    padding: 0.2em 0.65em;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    background: color-mix(in srgb, var(--option-color) 15%, transparent);
    color: color-mix(in srgb, var(--option-color) 70%, #000);
}

/* Related column avatar bubbles */
.related-avatar-bubble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 0.65rem;
    font-weight: 600;
    color: #fff;
    cursor: default;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    flex-shrink: 0;
}

.related-avatar-bubble:not(:first-child) {
    margin-left: -6px;
}

/* Currency value styling for list views */
.currency-value {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.currency-symbol {
    font-size: 0.75em;
    font-weight: 500;
    color: var(--bs-secondary-color, #6c757d);
}

.currency-amount {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--bs-body-color, #212529);
}

/* ============================================================
   Print - minimal: just hide UI chrome for dashboard printing
   ============================================================ */
@media print {
    @page { size: A4 landscape; margin: 10mm; }

    .sidebar,
    .command-bar,
    .help-button,
    .help-panel,
    .help-guide,
    #blazor-error-ui,
    .toast-container,
    button,
    .btn,
    select,
    .form-select {
        display: none !important;
    }

    .d-flex.vh-100.overflow-hidden {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
    }

    .main-content {
        padding: 0 !important;
        overflow: visible !important;
        width: 100% !important;
    }

    body { background: #fff !important; }
    * { box-shadow: none !important; overflow: visible !important; }
}

/* ===== Comparison tables (Compare pages) ===== */
.compare-table td,
.compare-table th {
    vertical-align: middle;
    padding: 0.75rem 1rem;
}
.compare-table td.cmp-val {
    vertical-align: middle;
    padding-left: 2.5rem;
}
.cmp-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.cmp-cell .bi {
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}

/* ─── Rich Text Editor (form field) ─── */
.rich-text-editor-wrapper .ProseMirror {
    padding: 0.75rem;
    outline: none;
    min-height: 120px;
    font-size: 0.875rem;
    line-height: 1.5;
}

.rich-text-editor-wrapper .ProseMirror:focus {
    outline: none;
}

.rich-text-editor-wrapper .ProseMirror p {
    margin-bottom: 0.25rem;
}

.rich-text-editor-wrapper .ProseMirror ul,
.rich-text-editor-wrapper .ProseMirror ol {
    padding-left: 1.5rem;
}

.rich-text-editor-wrapper .ProseMirror blockquote {
    border-left: 3px solid #dee2e6;
    padding-left: 0.75rem;
    margin-left: 0;
    color: #6c757d;
}

/* ── Responsive modal widths ────────────────────────────────────────────────
   Bootstrap pins .modal-lg to a fixed 800px (and .modal-xl to 1140px) on any screen wide enough,
   which leaves the larger edit dialogs (forms, scheduler, bulk edit, create-record) needlessly
   narrow on laptops. Instead let them grow with the viewport up to a sensible cap: near-full-width
   on small/medium screens, comfortably wide on large ones. The !important and shared cap override
   Bootstrap's own breakpoint rules at every size. */
.modal-lg {
    max-width: min(1100px, calc(100vw - 2rem)) !important;
}

.modal-xl {
    max-width: min(1400px, calc(100vw - 2rem)) !important;
}


/* A section that starts the column: keep the heading, drop the space that separates it from
   the fields above - there are none. */
.form-section-divider-first {
    margin-top: 0;
}

/* ── File drop zones (DocumentGrid, EmailAttachmentPicker) ──────────────
   The class on the zone is set and cleared by wwwroot/js/file-drop.js, so the highlight
   never crosses the circuit. */
.file-drop-zone {
    position: relative;
}

.file-drop-overlay {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 5;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--ampleo-vivid);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--ampleo-vivid) 6%, #fff);
    color: var(--ampleo-primary);
    font-weight: 600;
    /* Without this, moving over the overlay reads as leaving the zone and the highlight flickers. */
    pointer-events: none;
}

.file-drop-zone.file-drop-over .file-drop-overlay {
    display: flex;
}

/* ── Multi-line fields grow with their text ──────────────────────────────
   The height is set by wwwroot/js/textarea-autogrow.js; this is the ceiling it
   grows into. Past it the box scrolls rather than pushing the rest of the form
   down the page - a long description must not turn the form into a scroll hunt
   for the Save button. resize stays available for the rare case someone wants
   more than the cap. */
textarea.form-control.autogrow {
    max-height: 24rem;
    overflow-y: auto;
    resize: vertical;
}

/* Bootstrap Icons has no bubble chart. Drawn as a mask so it takes the text colour like the font icons do. */
.bi-bubble-chart::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    --bi-bubble-chart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 1v14h14' fill='none' stroke='black' stroke-width='1.5'/%3E%3Ccircle cx='5.5' cy='10' r='2'/%3E%3Ccircle cx='10.5' cy='5.5' r='3'/%3E%3Ccircle cx='12' cy='11.5' r='1.5'/%3E%3C/svg%3E");
    -webkit-mask: var(--bi-bubble-chart) no-repeat center / contain;
    mask: var(--bi-bubble-chart) no-repeat center / contain;
}