/* 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 */

/* ── 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);
}
    --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;
}

/* 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;
}

/* General */
html, body {
    font-family: 'Aptos', 'Segoe UI', system-ui, -apple-system, sans-serif;
    background-color: var(--ampleo-bg);
    color: #444;
    line-height: 1.6;
}

h1, .h1, h2, .h2, h3, .h3 {
    font-family: 'Aptos', sans-serif;
    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;
}

/* Card enhancements */
.card {
    transition: box-shadow 0.15s ease-in-out;
}

.card:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1) !important;
}

/* 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);
}

.table > tbody > tr {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.table > tbody > tr:hover {
    background-color: rgba(42, 77, 105, 0.03) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.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;
}

/* 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);
}

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

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

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

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

/* Sidebar enhancements */
.sidebar {
    background-color: var(--ampleo-primary) !important;
    border-right: 1px solid rgba(42, 77, 105, 0.2);
    box-shadow: 1px 0 0 rgba(0, 0, 0, 0.05);
    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 h6 {
    color: rgba(255, 255, 255, 0.3) !important;
    margin-top: var(--space-xl) !important;
}

.sidebar .nav-link {
    color: rgba(255, 255, 255, 0.7);
    border-radius: 0.375rem;
    margin: var(--space-xs) 0.75rem;
    padding: 0.45rem var(--space-md);
    font-weight: 500;
    font-size: var(--font-sm);
    transition: all 0.2s;
}

.sidebar .nav-link i {
    opacity: 0.8;
    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: rgba(255, 255, 255, 0.06);
    color: #fff;
    transform: translateX(2px);
}

.sidebar .nav-link.active {
    background-color: var(--ampleo-accent) !important;
    color: #fff;
    font-weight: 600;
}

.sidebar .nav-link.active i {
    opacity: 1;
}

/* Main Content Harmony */
.main-content {
    background-color: #ffffff !important;
    background-image: none !important;
    border-left: 1px solid rgba(0, 0, 0, 0.05); /* Very thin anchor line */
}

.card {
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
    background-color: white;
}

/* 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(255, 255, 255, 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(255, 255, 255, 0.15);
    border-radius: 4px;
    transition: background-color 0.2s;
}

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

/* Blazor error UI */
#blazor-error-ui {
    background: #dc3545;
    color: white;
    bottom: 0;
    position: fixed;
    width: 100%;
    z-index: 1000;
    padding: 1rem;
    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 {
    background-color: #fafbfc !important;
    border-color: #dee2e6 !important;
}

.command-bar .btn {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* ── 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);
}

/* ── Help FAB button ────────────────────────────────────────────────────── */
.help-fab {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: none;
    background-color: var(--ampleo-primary);
    color: #fff;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease;
    z-index: 1040;
}

.help-fab:hover {
    background-color: var(--ampleo-secondary);
    transform: scale(1.08);
}

/* 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-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;
}