/*
    Incandera Revolution
    Version: R5
    View overrides/fixes CSS
*/

/* Ensure page content fills full viewport height (prevents gap on theme switch) */
.page-content {
    min-height: 100vh;
}

/* Global header — bottom border (offset to avoid overlapping the sidebar brand-box) */
#page-topbar::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 250px;
    right: 0;
    height: 1px;
    background-color: #f1d5db;
}

.vertical-collpsed #page-topbar::after {
    left: 70px;
}

/* Dark Mode — header bottom border */
[data-layout-mode="dark"] #page-topbar::after {
    background-color: var(--bs-border-color);
}

/* Collapsed sidebar — remove theme's hardcoded 1760px min-height on body that creates massive empty space */
body[data-sidebar="dark"].vertical-collpsed {
    min-height: auto !important;
}

/* Maximize content rendering to available Viewport height */
.card-body-defaultheight {
    height: calc(100vh - 250px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* DataTables ColVis checkmarks fix */
.dt-button-collection .dt-button.active::after,
.dt-button-collection .dt-button:not(.disabled).active::after {
    content: "\2713";
    position: absolute;
    right: 23px;
    color: #556ee6;
    font-weight: bold;
}

.dt-button-collection .dt-button {
    position: relative;
    padding-right: 30px;
}

/* DataTables ColVis dropdown positioning and styling */
.dt-buttons {
    position: relative;
}

div.dt-button-collection {
    right: 9px !important;
    left: auto !important;
}

/* Dark Mode Harmonization for DataTables Buttons */
[data-layout-mode="dark"] div.dt-button-collection {
    border-color: var(--bs-gray-300) !important; /* Seamless border */
    background-color: var(--bs-gray-300) !important;
}

[data-layout-mode="dark"] div.dt-button-collection .dt-button {
    background-color: var(--bs-gray-300) !important;
    color: var(--bs-body-color) !important;
    border: none !important;
}

[data-layout-mode="dark"] div.dt-button-collection .dt-button:hover,
[data-layout-mode="dark"] div.dt-button-collection .dt-button.active {
    background-color: var(--bs-gray-300) !important;
    color: var(--bs-body-color) !important;
}

/* jQuery Steps skipped step styling */
.steps li.skipped-step a,
.steps li.skipped-step a:hover {
    color: #ccc !important;
}

/* Dark Mode Harmonization */

/* Modal Footer */
.modal-footer-colored {
    background-color: #f2f2f2; /* Light mode default */
}

[data-layout-mode="dark"] .modal-footer-colored {
    background-color: var(--bs-gray-200); /* Dark mode card background */
    border-top-color: var(--bs-border-color);
}

/* DataTables / Tables */
[data-layout-mode="dark"] .table thead th {
    background-color: var(--bs-gray-200);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

[data-layout-mode="dark"] .table {
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

[data-layout-mode="dark"] .table-bordered td,
[data-layout-mode="dark"] .table-bordered th {
    border-color: var(--bs-border-color);
}

/* DataTables Layout & Styling */
.dataTables_wrapper .top {
    display: flex;
    justify-content: space-between;
    background-color: #f3f4f6; /* Default Light Mode */
    padding: 0;
}

[data-layout-mode="dark"] .dataTables_wrapper .top {
    background-color: var(--bs-gray-200); /* Dark Mode Background */
}

.dataTables_wrapper thead {
    border-bottom: 1px solid #b0b0b0;
}

[data-layout-mode="dark"] .dataTables_wrapper thead {
    border-bottom-color: var(--bs-border-color);
}

.dataTables_wrapper .filter-length {
    display: flex;
    justify-content: space-between;
    padding-top: 9px;
    padding-left: 13px;
}

.dataTables_wrapper .bottom {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
}

/* DataTables Filter Input */
.dataTables_filter input {
    width: 200px;
}

.dataTables_filter label {
    font-weight: 600; /* fw-semibold */
}

/* DataTables Length Select */
.dataTables_length {
    margin-left: 1.25em;
}

/* Authentication Pages */
.auth-full-bg {
    background-image: url('/images/bg-auth-light.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.auth-full-bg .bg-overlay {
    background-color: rgba(0, 0, 0, 0.21);
    opacity: 0.63;
}

/* Authentication Pages Dark Mode */
[data-layout-mode="dark"] .auth-body-bg {
    background-color: var(--bs-body-bg) !important;
}

[data-layout-mode="dark"] .auth-full-bg {
    background-color: var(--bs-card-bg) !important;
    background-image: url('/images/bg-auth.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

[data-layout-mode="dark"] .auth-full-page-content {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

[data-layout-mode="dark"] .auth-logo .auth-logo-dark {
    display: none !important;
}

[data-layout-mode="dark"] .auth-logo .auth-logo-light {
    display: block !important;
}

[data-layout-mode="dark"] .text-muted {
    color: var(--bs-gray-400) !important;
}

[data-layout-mode="dark"] .text-primary,
[data-layout-mode="dark"] .auth-full-bg h4,
[data-layout-mode="dark"] .auth-full-bg h4 span,
[data-layout-mode="dark"] .auth-full-bg p {
    color: #fff !important;
}

[data-layout-mode="dark"] .auth-full-bg .bg-overlay {
    background-color: rgba(0, 0, 0, 0.0);
    opacity: 0.42;
}

/* Page Title Icons Styling */
h1 i.ph-duotone {
    position: relative;
    top: 0.15rem;
}

/*
   Override for vertical tabs (checkout-tabs) to be less overpowering.
   Changes the active state from solid primary fill to a light background with a border indicator.
*/
.checkout-tabs .nav-pills .nav-link.active {
    background-color: rgba(85, 110, 230, 0.1) !important;
    color: #556ee6 !important;
    border-left: 4px solid #556ee6;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Sidebar "Toolbox" Styling (used in Referrals/New, Patients/New, and Forms) */
.card-toolbox {
    background-color: #f8f9fa; /* Light mode: Very light gray */
    border: 1px solid #f1d5db; /* More defined border w/a splash of color */
    overflow: hidden; /* Fixes "bitten off" corners by clipping child backgrounds */
}

[data-layout-mode="dark"] .card-toolbox {
    background-color: var(--bs-gray-300); /* Dark mode: Slightly lighter than standard card */
    border-color: var(--bs-border-color);
}

.card-toolbox .card-title {
    font-weight: 600;
}

/* Unified Sidebar Table Density (Matching /Referrals/New ideal) */
.card-toolbox .table-sm tbody td,
.card-toolbox .table-sm thead th {
    padding: 0.3rem 0.5rem !important;
}

/* DataTables Controls in Sidebar */
.card-toolbox .dataTables_wrapper .top {
    padding: 8px;
}

.card-toolbox .dataTables_filter input {
    width: 100% !important;
    max-width: 140px;
    font-size: 0.8rem;
}

.card-toolbox .dataTables_filter input::placeholder {
    font-size: 0.75rem;
}

/* Remove margin-bottom from search label to fix vertical centering */
.card-toolbox .dataTables_filter label {
    margin-bottom: 0;
}

.card-toolbox .dataTables_length label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    margin-bottom: 0;
    white-space: nowrap;
}

.card-toolbox .dataTables_length select {
    padding: 0.2rem 1.5rem 0.2rem 0.5rem;
    font-size: 0.75rem;
}

.card-toolbox .dataTables_info {
    font-size: 0.75rem;
    padding-top: 0.5rem !important;
}

.card-toolbox .dataTables_paginate {
    padding-top: 0.25rem !important;
}

.card-toolbox .dataTables_paginate .paginate_button {
    padding: 0 !important;
}

.card-toolbox .dataTables_paginate .paginate_button .page-link {
    padding: 0.2rem 0.5rem !important;
    font-size: 0.75rem;
}

/* Fix for "doubled up" borders when an accordion is inside a toolbox card */
.card-toolbox .accordion,
.card-toolbox .accordion-item,
.card-toolbox .accordion-header,
.card-toolbox .accordion-button {
    border: none !important;
    background-color: transparent !important;
}

.card-toolbox .accordion-button:not(.collapsed) {
    box-shadow: none !important;
    background-color: rgba(85, 110, 230, 0.1) !important; /* Subtle light blue for active item */
    color: #556ee6 !important;
}

[data-layout-mode="dark"] .card-toolbox .accordion-button:not(.collapsed) {
    background-color: rgba(85, 110, 230, 0.15) !important;
    color: #7b8fda !important;
}

/* ============================================================================
   SIDEBAR-SPECIFIC OVERRIDES
   These apply ONLY to specific sidebar tables (Referrals/New, Patients/New, Forms/Index)
   using table ID selectors to avoid affecting other card-toolbox tables like Forms/New
   ============================================================================ */

/* Sidebar Quick Lookup DataTables - Specific table overrides */
#patients-available-table_wrapper .top,
#referrals-available-table_wrapper .top,
#available-forms-table_wrapper .top {
    padding-top: 8px;
}

/* Font size overrides for specific sidebar tables only */
#patients-available-table_wrapper .dataTables_length label,
#referrals-available-table_wrapper .dataTables_length label,
#available-forms-table_wrapper .dataTables_length label {
    font-size: 0.7rem;
}

#patients-available-table tbody td,
#referrals-available-table tbody td,
#available-forms-table tbody td {
    font-size: 0.7rem;
}

#patients-available-table_wrapper .dataTables_info,
#referrals-available-table_wrapper .dataTables_info,
#available-forms-table_wrapper .dataTables_info {
    font-size: 0.7rem;
    margin-top: 10px;
}

/* ============================================================================
   HEADER UNIVERSAL SEARCH DROPDOWN
   ============================================================================ */

.header-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 320px;
    width: max-content;
    max-width: 450px;
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 0.375rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1050;
    margin-top: 4px;
}

/* Reset any inherited styles that might interfere */
.header-search-dropdown * {
    box-sizing: border-box;
}

/* Override .app-search span { position: absolute } from app.css */
.header-search-dropdown span {
    position: static !important;
    z-index: auto !important;
    right: auto !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

[data-layout-mode="dark"] .header-search-dropdown {
    background-color: var(--bs-gray-200);
    border-color: var(--bs-border-color);
}

/* Category Headers */
.search-category-header {
    display: block;
    position: relative;
    padding: 8px 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #6c757d;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
}

[data-layout-mode="dark"] .search-category-header {
    background-color: var(--bs-gray-300);
    color: var(--bs-gray-400);
    border-color: var(--bs-border-color);
}

/* Result Items */
.search-result-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    position: relative !important;
    padding: 10px 12px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    border-bottom: 1px solid #f0f0f0;
    background-color: #fff;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover,
.search-result-item.active {
    background-color: rgba(85, 110, 230, 0.1);
}

[data-layout-mode="dark"] .search-result-item {
    background-color: var(--bs-gray-200);
    border-color: var(--bs-border-color);
}

[data-layout-mode="dark"] .search-result-item:hover,
[data-layout-mode="dark"] .search-result-item.active {
    background-color: rgba(85, 110, 230, 0.2);
}

/* Result Icon */
.search-result-icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    background-color: #f0f0f0;
    border-radius: 50%;
    color: #556ee6;
}

[data-layout-mode="dark"] .search-result-icon {
    background-color: var(--bs-gray-300);
}

.search-result-icon i {
    font-size: 1rem;
}

/* Result Content */
.search-result-content {
    flex: 1 1 auto;
    min-width: 150px;
    overflow: hidden;
}

.search-result-text {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #343a40 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

[data-layout-mode="dark"] .search-result-text {
    color: #e9ecef !important;
}

.search-result-subtext {
    display: block;
    font-size: 0.75rem;
    color: #6c757d !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

[data-layout-mode="dark"] .search-result-subtext {
    color: #adb5bd !important;
}

/* No Results State */
.search-no-results {
    padding: 20px;
    text-align: center;
    color: #6c757d;
    font-size: 0.875rem;
}

[data-layout-mode="dark"] .search-no-results {
    color: var(--bs-gray-400);
}

/* Loading State */
.search-loading {
    padding: 20px;
    text-align: center;
    color: #6c757d;
}

.search-loading::after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #556ee6;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
    margin-left: 8px;
    vertical-align: middle;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Position relative for the search container */
.app-search .position-relative {
    position: relative !important;
}

/* Wider search input field */
.app-search .form-control {
    width: 290px;
}

/* ============================================================================
   TABLE DENSITY PREFERENCES
   ============================================================================ */

body[data-table-density="dense"] .main-content table.dataTable tbody tr td,
body[data-table-density="dense"] .main-content table.dataTable thead tr th {
    padding: 0.25rem 0.5rem !important;
}

body[data-table-density="spacious"] .main-content table.dataTable tbody tr td,
body[data-table-density="spacious"] .main-content table.dataTable thead tr th {
    padding: 1.25rem 1rem !important;
}

/* ============================================================================
   QUILL RICH TEXT EDITOR
   Shared styling for all Quill editor instances (via RichTextEditor utility
   and the Notification-specific implementation).
   ============================================================================ */

/* --- Shared Quill Styles (apply to all editors) --- */

/* Override Quill's .ql-container { height: 100% } which breaks layout
   inside Bootstrap flex rows. These elements ARE the .ql-container. */
.quill-editor-container,
#notification-text-editor {
    height: auto !important;
}

.quill-editor-container .ql-toolbar.ql-snow,
#notification-text-editor .ql-toolbar.ql-snow {
    border-radius: 0.25rem 0.25rem 0 0;
    border-color: var(--bs-border-color);
    padding: 4px 8px;
}

.quill-editor-container .ql-container.ql-snow,
#notification-text-editor .ql-container.ql-snow {
    border-radius: 0 0 0.25rem 0.25rem;
    border-color: var(--bs-border-color);
    font-family: inherit;
}

.quill-editor-container .ql-editor,
#notification-text-editor .ql-editor {
    height: auto;              /* Override Quill's height:100% */
    min-height: 92px;
    max-height: 200px;
    overflow-y: auto;
    font-size: 0.875rem;
    line-height: 1.5;
}

.quill-editor-container .ql-editor.ql-blank::before,
#notification-text-editor .ql-editor.ql-blank::before {
    font-style: italic;
    color: var(--bs-secondary-color);
}

/* Read-only mode: no toolbar, subtle background */
.quill-editor-container.ql-readonly .ql-container.ql-snow,
#notification-text-editor.ql-readonly .ql-container.ql-snow {
    border-radius: 0.25rem;
}

/* Validation error state */
.quill-editor-container.ql-validation-error .ql-toolbar.ql-snow,
.quill-editor-container.ql-validation-error .ql-container.ql-snow,
#notification-text-editor.ql-validation-error .ql-toolbar.ql-snow,
#notification-text-editor.ql-validation-error .ql-container.ql-snow {
    border-color: var(--bs-danger);
}

/* --- Notification-specific: tighter dimensions for modal context --- */

#notification-text-editor {
    margin-bottom: 4px;
}

#notification-text-editor .ql-editor {
    height: auto !important;
    min-height: 92px !important;
    max-height: 200px !important;
}

/* --- Dark Mode --- */

[data-layout-mode="dark"] .quill-editor-container .ql-toolbar.ql-snow,
[data-layout-mode="dark"] #notification-text-editor .ql-toolbar.ql-snow {
    background-color: var(--bs-gray-300);
    border-color: var(--bs-border-color);
}

[data-layout-mode="dark"] .quill-editor-container .ql-container.ql-snow,
[data-layout-mode="dark"] #notification-text-editor .ql-container.ql-snow {
    background-color: var(--bs-input-bg);
    border-color: var(--bs-border-color);
}

[data-layout-mode="dark"] .quill-editor-container .ql-editor,
[data-layout-mode="dark"] #notification-text-editor .ql-editor {
    color: var(--bs-body-color);
}

[data-layout-mode="dark"] .quill-editor-container .ql-toolbar .ql-stroke,
[data-layout-mode="dark"] #notification-text-editor .ql-toolbar .ql-stroke {
    stroke: var(--bs-body-color);
}

[data-layout-mode="dark"] .quill-editor-container .ql-toolbar .ql-fill,
[data-layout-mode="dark"] #notification-text-editor .ql-toolbar .ql-fill {
    fill: var(--bs-body-color);
}

[data-layout-mode="dark"] .quill-editor-container .ql-toolbar .ql-picker-label,
[data-layout-mode="dark"] #notification-text-editor .ql-toolbar .ql-picker-label {
    color: var(--bs-body-color);
}

[data-layout-mode="dark"] .quill-editor-container .ql-toolbar button:hover .ql-stroke,
[data-layout-mode="dark"] .quill-editor-container .ql-toolbar button.ql-active .ql-stroke,
[data-layout-mode="dark"] #notification-text-editor .ql-toolbar button:hover .ql-stroke,
[data-layout-mode="dark"] #notification-text-editor .ql-toolbar button.ql-active .ql-stroke {
    stroke: #556ee6;
}

[data-layout-mode="dark"] .quill-editor-container .ql-toolbar button:hover .ql-fill,
[data-layout-mode="dark"] .quill-editor-container .ql-toolbar button.ql-active .ql-fill,
[data-layout-mode="dark"] #notification-text-editor .ql-toolbar button:hover .ql-fill,
[data-layout-mode="dark"] #notification-text-editor .ql-toolbar button.ql-active .ql-fill {
    fill: #556ee6;
}

[data-layout-mode="dark"] .quill-editor-container .ql-snow .ql-tooltip,
[data-layout-mode="dark"] #notification-text-editor .ql-snow .ql-tooltip {
    background-color: var(--bs-gray-300);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-layout-mode="dark"] .quill-editor-container .ql-snow .ql-tooltip input[type="text"],
[data-layout-mode="dark"] #notification-text-editor .ql-snow .ql-tooltip input[type="text"] {
    background-color: var(--bs-input-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

/* Settings View Min-Height Fix */
.settings-view-min-height {
    min-height: calc(100vh - 180px);
}

/* Sidebar Menu Group Delineators */
.menu-title-line {
    display: flex !important;
    align-items: center;
    padding-right: 24px !important;
}

.menu-title-line::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, .06);
    margin-left: 10px;
}

.menu-title-centered-line {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding-right: 24px !important;
}

.menu-title-centered-line::before,
.menu-title-centered-line::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, .06);
}

.menu-title-centered-line::before {
    margin-right: 10px;
}

.menu-title-centered-line::after {
    margin-left: 10px;
}

/* ============================================================================
   PROFILE IMAGE UPLOAD
   ============================================================================ */

/* Cropper container */
.profile-image-cropper-container {
    max-height: 400px;
    overflow: hidden;
}

.profile-image-cropper-container img {
    display: block;
    max-width: 100%;
}

/* Dropzone */
.profile-image-dropzone {
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.profile-image-dropzone:hover,
.profile-image-dropzone-hover {
    border-color: #556ee6 !important;
    background-color: rgba(85, 110, 230, 0.05);
}

/* Profile avatar — larger image overlap into banner */
#practitionerSummaryCard .profile-user-wid {
    margin-top: -46px;
}

/* Camera overlay on avatar */
.profile-image-camera-overlay {
    position: absolute;
    bottom: 8px;
    right: 4px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #556ee6;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    opacity: 0.8;
    transition: opacity 0.2s ease;
    text-decoration: none;
    border: 2px solid #fff;
}

.profile-image-camera-overlay:hover {
    opacity: 1;
    color: #fff;
}

[data-layout-mode="dark"] .profile-image-camera-overlay {
    border-color: var(--bs-gray-200);
}

[data-layout-mode="dark"] .profile-image-dropzone:hover,
[data-layout-mode="dark"] .profile-image-dropzone-hover {
    background-color: rgba(85, 110, 230, 0.1);
}

/* Clickable avatar images - view modal */
#practitioner-profile-avatar[data-viewable="true"],
#patient-profile-avatar {
    cursor: pointer;
    transition: opacity 0.2s ease;
}

#practitioner-profile-avatar[data-viewable="true"]:hover,
#patient-profile-avatar:hover {
    opacity: 0.8;
}

/* ============================================================================
   PROFILE IMAGE POPOVER (list views)
   ============================================================================ */

.popover.profile-image-popover {
    border: 1px solid rgba(0, 0, 0, 0.25) !important;
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
    text-align:center;
}

.popover.profile-image-popover .popover-header {
    border-radius: 0.5rem 0.5rem 0 0;
    border-bottom: none;
    font-size: 0.75rem;
    padding: 0.35rem 0.5rem;
}

.popover.profile-image-popover .popover-body {
    padding: 0.4rem;
}

/* Fix arrow border gap — use BS5 CSS variables so the arrow matches the custom border.
   Also set per-placement selectors as fallback for older Bootstrap builds. */
.popover.profile-image-popover {
    --bs-popover-border-color: rgba(0, 0, 0, 0.25);
    --bs-popover-arrow-border: rgba(0, 0, 0, 0.25);
}

.popover.bs-popover-end.profile-image-popover .popover-arrow::before {
    border-right-color: rgba(0, 0, 0, 0.25) !important;
}

.popover.bs-popover-end.profile-image-popover .popover-arrow::after {
    border-right-color: #fff !important;
}

.popover.bs-popover-start.profile-image-popover .popover-arrow::before {
    border-left-color: rgba(0, 0, 0, 0.25) !important;
}

.popover.bs-popover-start.profile-image-popover .popover-arrow::after {
    border-left-color: #fff !important;
}

.popover.bs-popover-top.profile-image-popover .popover-arrow::before {
    border-top-color: rgba(0, 0, 0, 0.25) !important;
}

.popover.bs-popover-top.profile-image-popover .popover-arrow::after {
    border-top-color: #fff !important;
}

.popover.bs-popover-bottom.profile-image-popover .popover-arrow::before {
    border-bottom-color: rgba(0, 0, 0, 0.25) !important;
}

.popover.bs-popover-bottom.profile-image-popover .popover-arrow::after {
    border-bottom-color: #fff !important;
}

/* ============================================================================
   KEY LINKS FLYOUT
   ============================================================================ */

/* Flush the flyout against the header (no Popper positioning on manual toggle) */
#keylinks-menu.show {
    margin-top: 0;
}

/* Drop-target highlight during dragover */
.keylinks-drop-active {
    outline: 2px dashed #556ee6;
    outline-offset: -2px;
    background-color: rgba(85, 110, 230, 0.05);
    border-radius: 4px;
    min-height: 60px;
}

/* Link items — position relative for overlays */
.keylinks-item {
    position: relative;
}

/* Remove button — hidden by default, visible on hover */
.keylinks-item-remove {
    display: none;
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    line-height: 16px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #dc3545;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    cursor: pointer;
    z-index: 1;
}

.keylinks-item:hover .keylinks-item-remove {
    display: block;
}

[data-layout-mode="dark"] .keylinks-item-remove {
    background-color: rgba(42, 48, 66, 0.9);
    color: #f46a6a;
}

/* Admin lock badge */
.keylinks-item-admin-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 10px;
    color: #74788d;
    opacity: 0.6;
}

/* Empty state hint */
.keylinks-empty-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 10px;
    text-align: center;
    color: #74788d;
    font-size: 0.8rem;
    gap: 6px;
}

[data-layout-mode="dark"] .keylinks-empty-hint {
    color: var(--bs-gray-400);
}

/* Settings page — Key Links admin editor rows */
.keylinks-admin-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.keylinks-admin-row input {
    font-size: 0.85rem;
}

.keylinks-admin-row select {
    font-size: 0.85rem;
    width: auto;
    min-width: 140px;
}

.keylinks-admin-row .btn-remove-link {
    flex-shrink: 0;
}

/* ====================================================
   Notification Dropdown — Dark Mode Border Compensation
   The dark theme adds a 1px border to .dropdown-menu
   that doesn't exist in light mode. This narrows the
   content area, causing text to wrap and overflow.
   ==================================================== */

[data-layout-mode="dark"] #notifications-container .dropdown-menu.dropdown-menu-lg {
    border-width: 0 !important;
}

/* ====================================================
   DataTable Cell Hyperlinks — Underline on Hover
   Applies only to text/badge navigation links, not to
   icon-only action buttons or Bootstrap .btn elements.
   ==================================================== */

table.dataTable td a.dt-link:hover,
table.dataTable td a.dt-link:hover .badge {
    text-decoration: underline !important;
}

/* ====================================================
   Forms Tree Grouping — Group Header Rows
   ==================================================== */

/* Base group header styling */
.group-header td {
    font-weight: 600;
    border-bottom: 1px solid #dee2e6;
    cursor: default;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    white-space: nowrap;
}

/* Patient-level header */
.group-patient td {
    background-color: #e8f0fe;
    font-size: 0.95rem;
    color: #1a3e72;
}

/* Referral-level header */
.group-referral td {
    background-color: #f0f4f8;
    font-size: 0.9rem;
    color: #2c5282;
}

/* Treatment Record-level header */
.group-tr td {
    background-color: #f7f9fb;
    font-size: 0.875rem;
    color: #3a6ea5;
}

/* Indentation spacers */
.group-indent-1 {
    display: inline-block;
    width: 20px;
}

.group-indent-2 {
    display: inline-block;
    width: 40px;
}

/* Toggle icon */
.group-toggle {
    cursor: pointer;
    display: inline-block;
    margin-right: 4px;
    transition: transform 0.15s ease;
}

.group-toggle i {
    font-size: 1.1rem;
    vertical-align: middle;
}

/* Collapsed data rows */
tr.group-collapsed {
    display: none !important;
}

/* Dark mode variants */
[data-layout-mode="dark"] .group-patient td {
    background-color: rgba(56, 103, 214, 0.15);
    color: #a4c4f4;
}

[data-layout-mode="dark"] .group-referral td {
    background-color: rgba(56, 103, 214, 0.10);
    color: #8ab4f0;
}

[data-layout-mode="dark"] .group-tr td {
    background-color: rgba(56, 103, 214, 0.06);
    color: #7aa8e8;
}

[data-layout-mode="dark"] .group-header td {
    border-bottom-color: var(--bs-gray-300);
}

/* ============================================================================
   PROFILE AVATAR LAZY LOADING
   Hide avatar images until loaded to prevent broken-image flash on slow networks.
   Images use inline onload/onerror handlers to add the .loaded class.
   ============================================================================ */

img.avatar-lazy {
    opacity: 0;
    transition: opacity 0.15s ease-in;
}

img.avatar-lazy.loaded {
    opacity: 1;
}