/**
 * Custom overrides for third-party plugins that do not automatically
 * inherit the Bootstrap 5 / Inspinia dark theme.
 *
 * Loaded after app.min.css so these rules take effect last.
 */

:root {
    /*
     * Offline resilience: Poppins is fetched from Google Fonts (see head-css.html).
     * If the CDN is unreachable, browsers fall back down this stack so body text
     * stays legible without any network fetch. This override wins over
     * app.min.css because custom-overrides.css is loaded last.
     */
    --ins-font-sans-serif: "Poppins", Inter, "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;

    --hippo-font-size-base: 13px;
    --hippo-form-control-padding-y: 0.38rem;
    --hippo-form-control-padding-x: 0.7rem;
    --hippo-form-control-min-height: calc(1.5em + 0.76rem + calc(var(--ins-border-width) * 2));
}

/*
 * app.min.css's light-theme --ins-secondary-color (#9ba6b7) is ~2.2:1 against
 * the page background — a WCAG AA color-contrast failure (needs 4.5:1) that
 * repeats everywhere the token is used: .breadcrumb-item.active, .form-text,
 * .active nav items, etc. Scoped to :not(dark) because the dark-theme value
 * (#8391a2, set under [data-bs-theme=dark] in app.min.css) already passes
 * against the dark background and must be left alone.
 */
:root:not([data-bs-theme=dark]) {
    --ins-secondary-color: #5a636b;
}

/*
 * Select2's vendored CSS hardcodes the placeholder colour (#999 on white,
 * ~2.84:1 — also a WCAG AA failure) instead of using a theme variable, so it
 * cannot be fixed by overriding a token. #999 already passes against the dark
 * theme's near-black background, so this is light-theme only, same as above.
 */
:root:not([data-bs-theme=dark]) .select2-selection__placeholder {
    color: #5a636b;
}

/*
 * app.min.css's .text-bg-warning forces white text (`color:#fff!important`)
 * against the warning gold (#f2c24c) — 1.66:1, the single largest contributor
 * to color-contrast failures across the app because it is the topbar
 * notification-count badge (partials/topbar.html), rendered on every page.
 * Black text on this background is ~12.6:1; !important is required to beat
 * app.min.css's own !important on the same property.
 */
.topbar-badge.text-bg-warning {
    color: #000 !important;
}

/*
 * Same class of bug as --ins-secondary-color above: light-theme
 * --ins-form-invalid-color (#ed5565) is ~3.1-3.45:1 against the app
 * background, below the 4.5:1 AA threshold, so every field validation
 * message fails color-contrast. Dark theme's value (#f499a3) already passes
 * against its near-black background and is left untouched.
 */
:root:not([data-bs-theme=dark]) {
    --ins-form-invalid-color: #c02942;
}

body,
button,
input,
optgroup,
select,
textarea,
.btn,
.badge,
.breadcrumb,
.card,
.dropdown-menu,
.dropdown-item,
.form-control,
.form-select,
.form-check-label,
.form-label,
.input-group-text,
.list-group,
.modal,
.nav,
.navbar,
.offcanvas,
.page-title-head,
.table,
.dataTables_wrapper,
.toast,
.alert {
    font-family: "Poppins", Inter, "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}

/*
 * Tabler icons (.ti .ti-...) are self-hosted via vendors.min.css (./fonts/).
 * Keep the icon font first; append a generic fallback so that if the woff2
 * ever fails to load the element still resolves a font-family and does not
 * collapse layout. Missing glyphs may render as boxes (acceptable last resort).
 */
.ti {
    font-family: "tabler-icons", sans-serif !important;
}

body,
button,
input,
optgroup,
select,
textarea,
.btn,
.dropdown-menu,
.dropdown-item,
.form-control,
.form-select,
.input-group-text,
.table,
.dataTables_wrapper,
.alert,
.breadcrumb,
.page-title-head {
    font-size: var(--hippo-font-size-base);
}

.form-label-note {
    display: none;
    margin-left: 0.35rem;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--ins-secondary-color);
    white-space: nowrap;
}

.form-required-indicator {
    margin-left: 0.2rem;
    color: var(--ins-danger);
}

.form-control:not(.form-control-sm):not(.form-control-lg),
.form-select:not(.form-select-sm):not(.form-select-lg) {
    min-height: var(--hippo-form-control-min-height);
    font-size: var(--hippo-font-size-base);
}

.form-control:not(.form-control-sm):not(.form-control-lg) {
    padding: var(--hippo-form-control-padding-y) var(--hippo-form-control-padding-x);
}

.form-select:not(.form-select-sm):not(.form-select-lg) {
    padding: var(--hippo-form-control-padding-y) 2.15rem var(--hippo-form-control-padding-y) var(--hippo-form-control-padding-x);
}

/* .app-search reserves 40px on the left for an absolutely-positioned icon
   (.app-search-icon in _widgets.scss). The :not() chain above gives
   .form-select higher specificity than the plain two-class
   ".app-search .form-control" rule, so a <select> inside .app-search loses
   its left padding and the icon overlaps its own text. Match the same
   :not() chain to win the specificity back. */
.app-search .form-select:not(.form-select-sm):not(.form-select-lg) {
    padding-left: 40px;
}

textarea.form-control:not(.form-control-sm):not(.form-control-lg) {
    min-height: calc(1.5em + 0.76rem + calc(var(--ins-border-width) * 2));
}

.input-group-text {
    padding: var(--hippo-form-control-padding-y) var(--hippo-form-control-padding-x);
}

.select2-container .select2-selection--single {
    height: var(--hippo-form-control-min-height);
}

.select2-container .select2-selection--single .select2-selection__rendered {
    line-height: calc(var(--hippo-form-control-min-height) - (var(--ins-border-width) * 2));
    padding-left: var(--hippo-form-control-padding-x);
}

.select2-container .select2-selection--single .select2-selection__arrow {
    height: calc(var(--hippo-form-control-min-height) - (var(--ins-border-width) * 2));
}

.choices__inner {
    min-height: var(--hippo-form-control-min-height);
    padding: var(--hippo-form-control-padding-y) var(--hippo-form-control-padding-x) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   Dark-mode overrides for daterangepicker plugin
   The plugin ships with hard-coded light colours (#fff, #eee …) and
   a low-specificity selector chain.  We use [data-bs-theme=dark]
   as an extra selector to guarantee higher specificity and proper
   CSS-variable resolution.
   ═══════════════════════════════════════════════════════════════════ */

[data-bs-theme=dark] .daterangepicker {
    background-color: var(--ins-secondary-bg);
    border-color: var(--ins-border-color);
}

[data-bs-theme=dark] .daterangepicker:before {
    border-bottom-color: var(--ins-border-color);
    border-top-color: var(--ins-border-color);
}

[data-bs-theme=dark] .daterangepicker:after {
    border-bottom-color: var(--ins-secondary-bg);
    border-top-color: var(--ins-secondary-bg);
}

[data-bs-theme=dark] .daterangepicker.drop-up:before {
    border-top-color: var(--ins-border-color);
}

[data-bs-theme=dark] .daterangepicker.drop-up:after {
    border-top-color: var(--ins-secondary-bg);
}

[data-bs-theme=dark] .daterangepicker .calendar-table {
    background-color: var(--ins-secondary-bg);
    border-color: var(--ins-secondary-bg);
}

[data-bs-theme=dark] .daterangepicker .calendar-table td,
[data-bs-theme=dark] .daterangepicker .calendar-table th {
    color: var(--ins-body-color);
}

[data-bs-theme=dark] .daterangepicker .calendar-table .next span,
[data-bs-theme=dark] .daterangepicker .calendar-table .prev span {
    border-color: var(--ins-body-color);
}

[data-bs-theme=dark] .daterangepicker td.available:hover,
[data-bs-theme=dark] .daterangepicker th.available:hover {
    background-color: var(--ins-tertiary-bg);
    color: var(--ins-body-color);
}

[data-bs-theme=dark] .daterangepicker td.off,
[data-bs-theme=dark] .daterangepicker td.off.in-range,
[data-bs-theme=dark] .daterangepicker td.off.start-date,
[data-bs-theme=dark] .daterangepicker td.off.end-date {
    background-color: var(--ins-secondary-bg);
    color: var(--ins-body-color);
    opacity: 0.4;
}

[data-bs-theme=dark] .daterangepicker td.in-range {
    background-color: var(--ins-tertiary-bg);
    color: var(--ins-body-color);
}

[data-bs-theme=dark] .daterangepicker td.week,
[data-bs-theme=dark] .daterangepicker th.week {
    color: var(--ins-secondary-color);
}

[data-bs-theme=dark] .daterangepicker .drp-buttons {
    border-top-color: var(--ins-border-color);
}

/* Month / year selects and time selects */
[data-bs-theme=dark] .daterangepicker select.monthselect,
[data-bs-theme=dark] .daterangepicker select.yearselect,
[data-bs-theme=dark] .daterangepicker select.hourselect,
[data-bs-theme=dark] .daterangepicker select.minuteselect,
[data-bs-theme=dark] .daterangepicker select.secondselect,
[data-bs-theme=dark] .daterangepicker select.ampmselect {
    background-color: var(--ins-tertiary-bg);
    border-color: var(--ins-border-color);
    color: var(--ins-body-color);
    color-scheme: dark;
}

[data-bs-theme=dark] .daterangepicker .ranges li {
    color: var(--ins-body-color);
}

[data-bs-theme=dark] .daterangepicker .ranges li:hover {
    background-color: var(--ins-tertiary-bg);
}

/* ═══════════════════════════════════════════════════════════════════
   Native <input type="date|time|datetime-local"> — ensure the browser
   renders the calendar pop-up in dark mode when the theme is dark.
   ═══════════════════════════════════════════════════════════════════ */

[data-bs-theme=dark] input[type="date"],
[data-bs-theme=dark] input[type="time"],
[data-bs-theme=dark] input[type="datetime-local"] {
    color-scheme: dark;
}

/* ═══════════════════════════════════════════════════════════════════
   Locked catalog-line fields
   Used via data-locked="true" attribute added by JS when a field is
   locked by the product schema.  Provides dark-mode awareness.
   #fffbe6 — warm yellow tint; #3a3018 — equivalent dark-mode amber.
   ═══════════════════════════════════════════════════════════════════ */

input[data-locked="true"] {
    background-color: #fffbe6 !important; /* warm-yellow lock indicator (light mode) */
    cursor: not-allowed;
}

[data-bs-theme=dark] input[data-locked="true"] {
    background-color: #3a3018 !important; /* dark-amber lock indicator (dark mode) */
    cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════
   Sidebar favourites
   Injected by menu-favorites.js so users can mark favourite links
   without cluttering the navigation.
   ═══════════════════════════════════════════════════════════════════ */

.side-nav .side-nav-item.has-favorite-toggle {
    position: relative;
}

.side-nav .side-nav-item.has-favorite-toggle > .side-nav-link {
    padding-right: calc(var(--ins-sidenav-item-padding-x) + 1.75rem);
}

.side-nav .sub-menu .side-nav-item.has-favorite-toggle > .side-nav-link {
    padding-right: calc(var(--ins-sidenav-sub-item-padding-x) + 1.75rem);
}

.menu-favorite-toggle {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--ins-secondary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.side-nav .side-nav-item.has-favorite-toggle:hover > .menu-favorite-toggle,
.menu-favorite-toggle:focus-visible,
.menu-favorite-toggle.is-favorite {
    opacity: 1;
}

.menu-favorite-toggle:hover,
.menu-favorite-toggle:focus-visible,
.menu-favorite-toggle.is-favorite {
    color: var(--ins-warning);
}

.menu-favorite-toggle:focus-visible {
    background-color: var(--ins-tertiary-bg);
    outline: none;
}

.menu-favorite-toggle:disabled {
    cursor: wait;
}

.topbar-favorites-menu {
    min-width: 18rem;
}

/* ═══════════════════════════════════════════════════════════════════
   Sidebar i18n support
   Allow longer localized labels, such as French navigation text, to
   wrap onto multiple lines instead of being truncated.
   ═══════════════════════════════════════════════════════════════════ */

.side-nav .side-nav-item .side-nav-link,
.side-nav .sub-menu .side-nav-item .side-nav-link {
    align-items: flex-start;
    white-space: normal;
}

.side-nav .side-nav-item .side-nav-link .menu-text {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

.side-nav .side-nav-item .side-nav-link .menu-icon,
.side-nav .side-nav-item .side-nav-link .menu-arrow,
.side-nav .side-nav-item .side-nav-link .badge {
    flex: 0 0 auto;
    margin-top: 0.1rem;
}

/* ═══════════════════════════════════════════════════════════════════
   Topbar notifications
   Allow long translated messages, hostnames, and IP addresses to wrap
   instead of overflowing outside of the dropdown.
   ═══════════════════════════════════════════════════════════════════ */

.notification-container .notification-item {
    white-space: normal;
}

.notification-container .notification-item .notification-item-layout {
    width: 100%;
    min-width: 0;
    align-items: flex-start;
}

.notification-container .notification-item .notification-item-content {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.35;
}

.notification-container .notification-item .notification-item-message,
.notification-container .notification-item .notification-item-time {
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.notification-container .notification-item .notification-dismiss-btn {
    align-self: flex-start;
    margin-top: 0.1rem;
}

/* ═══════════════════════════════════════════════════════════════════
   Global form parity — matches the /forms/elements look on every page.
   Layout-surface rules remain scoped to .form-demo-theme; form-control
   rules are promoted to global scope so no per-page class is needed.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Global: form labels ──────────────────────────────────────────── */
.form-label,
.form-label.small {
    margin-bottom: 0.55rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ins-body-color);
}

/* ── Global: form controls (input, select, textarea, plaintext) ───── */
.form-control,
.form-select,
.form-control-sm,
.form-select-sm,
.input-group-text,
.form-control-plaintext {
    border-color: var(--ins-border-color);
    border-radius: var(--ins-border-radius);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.form-control,
.form-select,
.form-control-sm,
.form-select-sm,
.form-control-plaintext {
    min-height: 2.55rem;
    padding: 0.55rem 0.85rem;
    font-size: 0.88rem;
    line-height: 1.5;
    background-color: var(--ins-secondary-bg);
    color: var(--ins-body-color);
    box-shadow: inset 0 1px 2px rgba(var(--ins-dark-rgb), 0.04);
}

textarea.form-control,
textarea.form-control-sm {
    min-height: auto;
}

.form-control::placeholder,
.form-select::placeholder,
.form-control-sm::placeholder,
.form-select-sm::placeholder {
    color: var(--ins-secondary-color);
    opacity: 1;
}

.form-control:focus,
.form-select:focus,
.form-control-sm:focus,
.form-select-sm:focus,
.form-check-input:focus {
    border-color: rgba(var(--ins-primary-rgb), 0.55);
    box-shadow: 0 0 0 0.2rem rgba(var(--ins-primary-rgb), 0.15);
}

.input-group-text {
    background-color: var(--ins-tertiary-bg);
    color: var(--ins-secondary-color);
    padding: 0.55rem 0.85rem;
    border-color: var(--ins-border-color);
}

/* ── Global: check & switch ───────────────────────────────────────── */
.form-check {
    min-height: 1.6rem;
}

.form-check-input {
    border-color: var(--ins-border-color);
    background-color: var(--ins-secondary-bg);
}

.form-check-input:checked {
    background-color: var(--ins-primary);
    border-color: var(--ins-primary);
}

/* ── Global: helper / error text ──────────────────────────────────── */
.form-text,
small.text-muted {
    color: var(--ins-secondary-color) !important;
}

.invalid-feedback,
.text-danger small {
    display: block;
    margin-top: 0.45rem;
    font-size: 0.78rem;
}

.form-control.is-invalid,
.form-select.is-invalid,
.form-control-sm.is-invalid,
.form-select-sm.is-invalid {
    border-color: var(--ins-danger);
}

.form-control-plaintext {
    background-color: var(--ins-tertiary-bg);
    color: var(--ins-body-color);
}

/* ── Global: Quill rich-text editor ───────────────────────────────── */
.ql-toolbar.ql-snow,
.ql-container.ql-snow {
    border-color: var(--ins-border-color);
    border-radius: var(--ins-border-radius);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ql-toolbar.ql-snow {
    background-color: var(--ins-tertiary-bg);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.ql-container.ql-snow {
    min-height: 10rem;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background-color: var(--ins-secondary-bg);
    color: var(--ins-body-color);
    box-shadow: inset 0 1px 2px rgba(var(--ins-dark-rgb), 0.04);
}

.ql-container.ql-snow:focus-within {
    border-color: rgba(var(--ins-primary-rgb), 0.55);
    box-shadow: 0 0 0 0.2rem rgba(var(--ins-primary-rgb), 0.15);
}

.ql-editor.ql-blank::before {
    color: var(--ins-secondary-color);
    font-style: normal;
}

/* ── Global: misc form helpers ────────────────────────────────────── */
.form-section-note {
    margin-bottom: 1rem;
    font-size: 0.82rem;
    color: var(--ins-secondary-color);
}

.form-label-note {
    margin-left: 0.35rem;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--ins-secondary-color);
}

.form-required-indicator {
    margin-left: 0.2rem;
    color: var(--ins-danger);
}

.readonly-value-card {
    border-radius: var(--ins-border-radius-lg);
    background: var(--ins-tertiary-bg);
}

/* ── Scoped: page layout surfaces (cards, tabs, toolbar) ──────────── */
.form-demo-theme .form-tab-pane {
    padding-top: 0.5rem;
}

.form-demo-theme .page-shell-intro {
    margin: -0.35rem 0 1.25rem;
    font-size: 0.9rem;
    color: var(--ins-secondary-color);
}

.form-demo-theme .page-toolbar-card,
.form-demo-theme .page-surface-card,
.form-demo-theme .page-empty-state,
.form-demo-theme .page-sticky-sidebar,
.form-demo-theme .table-surface-card {
    border: 1px solid var(--ins-border-color);
    border-radius: 1rem;
    background-color: var(--ins-secondary-bg);
    box-shadow: 0 0.45rem 1.25rem rgba(var(--ins-dark-rgb), 0.04);
}

.form-demo-theme .page-toolbar-card,
.form-demo-theme .page-empty-state {
    padding: 1rem 1.1rem;
}

.form-demo-theme .page-surface-card > .card-header,
.form-demo-theme .table-surface-card > .card-header,
.form-demo-theme .page-sticky-sidebar > .card-header {
    padding: 0.95rem 1.1rem 0.75rem;
    border-bottom-color: var(--ins-border-color-translucent);
}

.form-demo-theme .page-surface-card > .card-body,
.form-demo-theme .table-surface-card > .card-body,
.form-demo-theme .page-sticky-sidebar > .card-body {
    padding: 1.1rem;
}

.form-demo-theme .page-toolbar-card .app-search {
    min-width: 14rem;
}

.form-demo-theme .page-toolbar-card .form-select,
.form-demo-theme .page-toolbar-card .form-control {
    min-height: 2.7rem;
}

.form-demo-theme .page-section-title {
    margin-bottom: 0.25rem;
    font-size: 1rem;
    font-weight: 700;
}

.form-demo-theme .page-section-copy {
    margin-bottom: 0;
    font-size: 0.84rem;
    color: var(--ins-secondary-color);
}

.form-demo-theme .page-empty-state {
    text-align: center;
}

.form-demo-theme .page-empty-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 0.9rem;
    border-radius: 999px;
    background: var(--ins-tertiary-bg);
    color: var(--ins-secondary-color);
}

.form-demo-theme .page-empty-state h4,
.form-demo-theme .page-empty-state h5 {
    margin-bottom: 0.45rem;
}

.form-demo-theme .page-empty-state p {
    margin-bottom: 0;
    color: var(--ins-secondary-color);
}

.form-demo-theme .page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.form-demo-theme .page-actions > .btn,
.form-demo-theme .page-actions > form > .btn {
    white-space: nowrap;
}

.form-demo-theme .nav.nav-tabs.nav-bordered {
    gap: 0.15rem;
    border-bottom-color: var(--ins-border-color);
}

.form-demo-theme .nav.nav-tabs.nav-bordered .nav-link,
.form-demo-theme .card-header-tabs .nav-link {
    border-radius: 0.85rem 0.85rem 0 0;
    padding: 0.75rem 1rem;
    font-weight: 600;
}

.form-demo-theme .nav.nav-tabs.nav-bordered .nav-link.active,
.form-demo-theme .card-header-tabs .nav-link.active {
    background-color: var(--ins-secondary-bg);
    border-bottom-color: var(--ins-secondary-bg);
}

.form-demo-theme .table-surface-card .table,
.form-demo-theme .page-surface-card .table {
    width: 100% !important;
}

.form-demo-theme .table-surface-card .table-light,
.form-demo-theme .page-surface-card .table-light {
    --ins-table-bg: var(--ins-tertiary-bg);
    --ins-table-color: var(--ins-body-color);
    --ins-table-border-color: var(--ins-border-color-translucent);
}

.form-demo-theme .table-surface-card .table thead th,
.form-demo-theme .page-surface-card .table thead th,
.form-demo-theme .table-surface-card .table-light > :not(caption) > * > *,
.form-demo-theme .page-surface-card .table-light > :not(caption) > * > * {
    background-color: var(--ins-tertiary-bg);
    color: var(--ins-body-color);
    border-bottom-color: var(--ins-border-color-translucent);
}

.form-demo-theme .table-surface-card .table thead th,
.form-demo-theme .page-surface-card .table thead th {
    white-space: nowrap;
}

.form-demo-theme .page-sticky-sidebar {
    position: sticky;
    top: 6rem;
}

/* ── Scoped: record header, form subsections, sticky action bar ───── */

/*
 * Identity header — the always-visible summary of the record being edited,
 * pinned above the tab strip so the person's name, status and quick actions
 * stay on screen no matter which tab is open. Sits below the app topbar,
 * matching the 6rem offset used by .page-sticky-sidebar.
 */
.form-demo-theme .record-identity-header {
    position: sticky;
    top: 5.75rem;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--ins-border-color);
    border-radius: 0.9rem;
    background-color: var(--ins-tertiary-bg);
}

.form-demo-theme .record-identity-avatar {
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid var(--ins-border-color);
    background-color: var(--ins-secondary-bg);
    cursor: pointer;
}

.form-demo-theme .record-identity-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--ins-secondary-color);
}

.form-demo-theme .record-identity-name {
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
}

.form-demo-theme .record-identity-subtitle {
    margin-bottom: 0;
    font-size: 0.8rem;
    color: var(--ins-secondary-color);
}

/*
 * Subsection heading — groups related fields inside a single tab pane now
 * that Personal Information carries identity, channels and preferences.
 */
.form-demo-theme .form-subsection {
    margin-bottom: 0.85rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--ins-border-color-translucent);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ins-secondary-color);
}

.form-demo-theme .form-subsection + .form-section-note {
    margin-top: -0.5rem;
}

.form-demo-theme .form-subsection-group + .form-subsection-group {
    margin-top: 1.5rem;
}

/* Avatar editor block inside the Personal Information tab. */
.form-demo-theme .avatar-editor-preview {
    width: 8rem;
    height: 8rem;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid var(--ins-border-color);
    background-color: var(--ins-tertiary-bg);
}

/*
 * Sticky action bar — Save stays reachable without scrolling past a long
 * tab pane. The negative margins let it span the full card body width.
 */
.form-demo-theme .form-sticky-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin: 1.5rem -1.1rem -1.1rem;
    padding: 0.85rem 1.1rem;
    border-top: 1px solid var(--ins-border-color);
    border-radius: 0 0 1rem 1rem;
    background-color: var(--ins-secondary-bg);
}

/* ── Scoped: company record summary rail ──────────────────────────── */

/*
 * Completeness meter — a conic-gradient ring driven by the --completeness
 * custom property (0-100), set from JS as fields are filled.
 */
.form-demo-theme .completeness-meter {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.form-demo-theme .completeness-ring {
    position: relative;
    flex: 0 0 auto;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 999px;
    background: conic-gradient(var(--ins-primary) calc(var(--completeness) * 1%), var(--ins-tertiary-bg) 0);
}

.form-demo-theme .completeness-ring::after {
    content: '';
    position: absolute;
    inset: 0.4rem;
    border-radius: 999px;
    background: var(--ins-secondary-bg);
}

.form-demo-theme .completeness-value {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
}

.form-demo-theme .completeness-gaps {
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.8rem;
}

.form-demo-theme .completeness-gaps li + li {
    margin-top: 0.3rem;
}

.form-demo-theme .completeness-gaps button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--ins-primary);
    text-align: left;
}

.form-demo-theme .summary-facts dt {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ins-secondary-color);
}

.form-demo-theme .summary-facts dd {
    margin-bottom: 0.6rem;
    font-size: 0.85rem;
    word-break: break-word;
}

/* ── Scoped: company contacts tab ─────────────────────────────────── */
.form-demo-theme .contact-group-header {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0.9rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--ins-border-color-translucent);
}

.form-demo-theme .contact-card {
    display: flex;
    gap: 0.75rem;
    height: 100%;
    padding: 0.85rem;
    border: 1px solid var(--ins-border-color);
    border-radius: 0.9rem;
    background-color: var(--ins-secondary-bg);
}

/* Affiliated people belong elsewhere; the muted ground keeps the two
   groups from reading as one list even when scrolled together. */
.form-demo-theme .contact-card.contact-card-affiliated {
    background-color: var(--ins-tertiary-bg);
    border-style: dashed;
}

.form-demo-theme .contact-card-avatar {
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    border-radius: 999px;
    object-fit: cover;
    background-color: var(--ins-tertiary-bg);
}

.form-demo-theme .contact-card-name {
    margin-bottom: 0.1rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.form-demo-theme .contact-card-meta {
    margin-bottom: 0;
    font-size: 0.78rem;
    color: var(--ins-secondary-color);
}

.form-demo-theme .form-dirty-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background-color: rgba(var(--ins-warning-rgb), 0.15);
    color: var(--ins-warning-text-emphasis, var(--ins-warning));
}

.form-demo-theme .card.border {
    border-color: rgba(var(--ins-dark-rgb), 0.08) !important;
    border-radius: 1rem;
    box-shadow: 0 0.45rem 1.25rem rgba(var(--ins-dark-rgb), 0.04);
}

.form-demo-theme .card-header + .card-body {
    padding-top: 1rem;
}

.form-demo-theme .profile-user-avatar,
.form-demo-theme .country-flag-preview {
    border-color: var(--ins-border-color);
    background-color: var(--ins-tertiary-bg);
}

.form-demo-theme .country-flag-preview {
    min-width: 3.25rem;
    justify-content: center;
}

.form-demo-theme .country-flag-img {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 999px;
}

.form-demo-theme .btn.btn-xs {
    min-height: 2.2rem;
    padding: 0.45rem 0.8rem;
    border-radius: var(--ins-border-radius);
}

/* Global search field: 1.5× wider than the default 230px */
.app-topbar .topbar-search {
    width: 345px;
}

/* ── Dark-mode overrides (global) ─────────────────────────────────── */
[data-bs-theme=dark] .form-control,
[data-bs-theme=dark] .form-select,
[data-bs-theme=dark] .form-control-sm,
[data-bs-theme=dark] .form-select-sm,
[data-bs-theme=dark] .form-control-plaintext,
[data-bs-theme=dark] .form-check-input,
[data-bs-theme=dark] .ql-container.ql-snow {
    background-color: var(--ins-secondary-bg);
    color: var(--ins-body-color);
}

[data-bs-theme=dark] .input-group-text,
[data-bs-theme=dark] .form-control-plaintext,
[data-bs-theme=dark] .ql-toolbar.ql-snow,
[data-bs-theme=dark] .country-flag-preview {
    background-color: var(--ins-tertiary-bg);
    color: var(--ins-body-color);
}

/* ── Dark-mode overrides (scoped layout surfaces) ─────────────────── */
[data-bs-theme=dark] .form-demo-theme .card.border,
[data-bs-theme=dark] .form-demo-theme .readonly-value-card,
[data-bs-theme=dark] .form-demo-theme .page-toolbar-card,
[data-bs-theme=dark] .form-demo-theme .page-surface-card,
[data-bs-theme=dark] .form-demo-theme .page-empty-state,
[data-bs-theme=dark] .form-demo-theme .page-sticky-sidebar,
[data-bs-theme=dark] .form-demo-theme .table-surface-card {
    border-color: var(--ins-border-color) !important;
    background-color: var(--ins-secondary-bg);
    box-shadow: 0 0.45rem 1.25rem rgba(0, 0, 0, 0.16);
}

[data-bs-theme=dark] .form-demo-theme .page-empty-state-icon {
    background-color: var(--ins-tertiary-bg);
    color: var(--ins-body-color);
}

[data-bs-theme=dark] .form-demo-theme .profile-user-avatar {
    background-color: var(--ins-tertiary-bg);
}

.auth-logo {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1.8rem;
    margin: 0;
    color: var(--ins-black);
    text-decoration: none;
    display: inline-block;
}
[data-bs-theme="dark"] .auth-logo {
    color: var(--ins-white);
}