@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400");
/* ==========================================================
   CRM CORE / EXISTING OVERRIDES
   ========================================================== */
/* overrides.css - load AFTER style.css */

/* 1) Brand dark blue (primary token used throughout your theme) */
:root{
  --primary-bg-color:#0B1F3B;   /* your branded dark blue */
}

/* 2) Common places themes hardcode old primary colours
   (safe overrides that won’t break layout) */
.app-header,
.header,
.side-header,
.app-sidebar,
.sidebar,
.btn-primary,
.badge-primary,
.bg-primary,
.text-primary,
a,
.side-menu__item.active,
.side-menu__item:hover,
.page-header .page-title i {
  /* Don’t blanket force backgrounds everywhere; instead target likely primary uses below */
}

/* Buttons */
.btn-primary{
  background-color: var(--primary-bg-color) !important;
  border-color: var(--primary-bg-color) !important;
}
.btn-primary:hover,
.btn-primary:focus{
  filter: brightness(0.95);
}

/* Background helpers some templates use */
.bg-primary{ background-color: var(--primary-bg-color) !important; }
.text-primary{ color: var(--primary-bg-color) !important; }

/* Sidebar active item (typical theme behaviour) */
.side-menu__item.active{
  background: color-mix(in srgb, var(--primary-bg-color) 12%, transparent) !important;
  color: var(--primary-bg-color) !important;
}
.side-menu__item.active .side-menu__icon{
  color: var(--primary-bg-color) !important;
}

/* 3) Dark mode: keep primary consistent and readable */
body.dark-mode{
  --primary-bg-color:#0B1F3B; /* same brand blue in dark mode */
}
body.dark-mode .btn-primary{
  background-color: var(--primary-bg-color) !important;
  border-color: var(--primary-bg-color) !important;
}



/* ==========================================================
   CSS CLEANUP V1 - rules formerly embedded in header.php
   ========================================================== */
/* Target the specific modal by its ID or class */
#addProjectModal .modal-dialog {
  max-width: 65%;
  width: 65%;
}

#addProjectModal .modal-content {
  height: auto;
}

@media (max-width: 768px) {
  #addProjectModal .modal-dialog {
    max-width: 100%;
    width: 100%;
  }
}

.table-container {
  overflow-x: auto;
  white-space: nowrap;
}

.table.dataTable th {
  font-size: 12px;
}

.dataTables_length label {
  white-space: nowrap;
}

.dataTable thead th {
  white-space: nowrap;
}

a.deleterow{
  color: red !important;
  cursor: pointer !important;
}

/* Fix Select2 dropdown z-index issues */
.select2-container--open .select2-dropdown {
    z-index: 99999 !important;
}

.select2-container .select2-search input {
    width: 100% !important;
    padding: 5px !important;
    position: relative !important;
    z-index: 1050 !important;
    pointer-events: auto !important;
}

/* Fix Bootstrap modal issue */
.modal {
    overflow: auto !important;
}

.edit-icon{
  color: var(--primary-bg-color) !important;
  font-size: 14px;
}

/* Notification dropdown */
.action-btn {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    line-height: 1;
    cursor: pointer;
}

.action-btn:hover,
.action-btn:focus {
    text-decoration: none;
}

.notification-dropdown {
    width: min(430px, calc(100vw - 24px));
    padding: 0;
    overflow: hidden;
    border: 1px solid #d9dfec;
    border-radius: 12px;
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.16);
}

.notification-dropdown-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(90deg, rgba(35,47,132,0.13), rgba(35,47,132,0.04));
    border-bottom: 1px solid #d9dfec;
}

.notification-dropdown-title {
    color: #1f2937;
    font-size: 16px;
    font-weight: 700;
}

.notification-dropdown-subtitle {
    margin-top: 2px;
    color: #64748b;
    font-size: 12px;
}

.notifications-menu {
    max-height: 390px;
    overflow-y: auto;
    background: #ffffff;
}

.notification-item {
    position: relative;
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #edf0f5;
    transition: background 0.15s ease;
}

.notification-item:last-child {
    border-bottom: 0;
}

.notification-item:hover {
    background: #f8fafc;
}

.notification-item.notification-unread {
    background: rgba(35,47,132,0.035);
}

.notification-item.notification-unread:hover {
    background: rgba(35,47,132,0.07);
}

.notification-main {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 14px 10px 14px 14px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.notification-avatar {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(35,47,132,0.10);
    border-radius: 50%;
    color: #232f84;
}

.notification-avatar i {
    margin: 0;
    padding: 0;
    color: #232f84;
    font-size: 17px;
}

.notification-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.notification-kicker {
    margin-bottom: 2px;
    color: #232f84;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.notification-label {
    display: block;
    margin: 0;
    color: #1f2937;
    font-size: 13px;
    line-height: 1.35;
    text-decoration: none !important;
    overflow-wrap: anywhere;
}

.notification-read .notification-label {
    font-weight: 500 !important;
    opacity: 0.72;
}

.notification-preview {
    display: -webkit-box;
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.35;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notification-subtext {
    margin-top: 5px;
    color: #94a3b8;
    font-size: 11px;
}

.notification-unread-dot {
    width: 8px;
    height: 8px;
    min-width: 8px;
    margin-top: 5px;
    border-radius: 50%;
    background: #232f84;
    box-shadow: 0 0 0 3px rgba(35,47,132,0.10);
}

.notification-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 10px 10px 4px;
}

.notification-actions .action-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    color: #64748b;
    transition: background 0.15s ease, color 0.15s ease;
}

.notification-actions .mark-read-btn:hover:not(:disabled) {
    background: rgba(25,135,84,0.10);
    color: #198754;
}

.notification-actions .delete-notification-btn:hover {
    background: rgba(220,53,69,0.10);
    color: #dc3545;
}

.notification-actions .action-btn:disabled {
    cursor: default;
    opacity: 0.35;
}

.notification-actions i {
    display: inline-block;
    vertical-align: middle;
    font-size: 15px;
}

.notification-empty-state {
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    color: #94a3b8;
    text-align: center;
}

.notification-empty-state i {
    font-size: 28px;
}

body.dark-mode .notification-dropdown {
    border-color: #3a3d4d;
    background: #2E303A;
    box-shadow: 0 16px 38px rgba(0,0,0,0.28);
}

body.dark-mode .notification-dropdown-heading {
    background: rgba(255,255,255,0.06);
    border-bottom-color: #3a3d4d;
}

body.dark-mode .notification-dropdown-title,
body.dark-mode .notification-label {
    color: #ffffff;
}

body.dark-mode .notification-dropdown-subtitle,
body.dark-mode .notification-preview,
body.dark-mode .notification-subtext {
    color: rgba(255,255,255,0.60);
}

body.dark-mode .notifications-menu {
    background: #2E303A;
}

body.dark-mode .notification-item {
    border-bottom-color: #3a3d4d;
}

body.dark-mode .notification-item:hover,
body.dark-mode .notification-item.notification-unread,
body.dark-mode .notification-item.notification-unread:hover {
    background: rgba(255,255,255,0.045);
}

body.dark-mode .notification-avatar {
    background: rgba(255,255,255,0.08);
}

body.dark-mode .notification-avatar i,
body.dark-mode .notification-kicker,
body.dark-mode .notification-unread-dot {
    color: #ffffff;
}

body.dark-mode .notification-unread-dot {
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.10);
}

@media (max-width: 575.98px) {
    .notification-dropdown {
        width: calc(100vw - 16px);
    }

    .notifications-menu {
        max-height: 62vh;
    }
}

/* ============================
   CRM Footer Styling
============================ */

.footer {
    background-color: #0B1F3B;
    padding: 18px 0;
    font-size: 13px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

/* Force all footer text to yellow */
.footer,
.footer p,
.footer span,
.footer div {
    color: #FFD84D !important;
}

/* Force all links to yellow */
.footer a {
    color: #FFD84D !important;
    text-decoration: none;
    font-weight: 500;
}

.footer a:hover {
    color: #ffffff !important;
    text-decoration: underline;
}

/* Version label */
.footer .version-text {
    float: right;
    font-size: 11px;
    opacity: 0.8;
}

/* Sticky footer support */
body.app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.app .main-content,
body.app .page,
body.app .app-content {
    flex: 1 0 auto;
}

.footer {
    flex-shrink: 0;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .footer {
        text-align: center;
        padding: 15px 10px;
    }

    .footer .version-text {
        float: none;
        display: block;
        margin-top: 6px;
    }
}

/* Sticky Footer for PAST_DUE status */

.past-due-footer-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1055;
    background: #0B1F3B;
    color: #fff;
    padding: 14px 24px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.15);
    border-top: 3px solid #ffc107;
}

body {
    padding-bottom: 0px;
}

.billing-footer-actions {
    margin-right: 70px;
}

@media (max-width: 991px) {
    .billing-footer-actions {
        margin-right: 0;
    }
}

/* ============================
   Client CRM Logo Handling
============================ */

.header-brand-img.crm-client-logo-full,
.logo-horizontal .crm-client-logo-full {
    object-fit: contain !important;
    max-height: 70px !important;
    width: auto !important;
}

.logo-horizontal .crm-client-logo-full {
    max-width: 240px !important;
}

.side-header .crm-client-logo-full {
    max-width: 240px !important;
}

.header-brand-img.crm-client-logo-compact {
    object-fit: contain !important;
    max-height: 80px !important;
    max-width: 80px !important;
    width: auto !important;
}

.side-header .crm-client-logo-compact {
    max-width: 80px !important;
}



/* ============================
   CRM Lock Screen Overlay
============================ */
.crm-lock-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(4, 12, 30, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 20px;
}

.crm-lock-overlay.is-visible {
    display: flex;
}

.crm-lock-card {
    width: 100%;
    max-width: 420px;
    text-align: center;
    color: #ffffff;
}

.crm-lock-icon-wrap {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    margin: 0 auto 22px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255,216,77,0.95), rgba(255,180,0,0.95));
    box-shadow: 0 20px 50px rgba(0,0,0,0.35);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.crm-lock-icon-wrap:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}

.crm-lock-icon-wrap i {
    font-size: 44px;
    color: #0B1F3B;
}

.crm-lock-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 6px;
}

.crm-lock-subtitle {
    font-size: 14px;
    color: rgba(255,255,255,0.72);
    margin-bottom: 22px;
}

.crm-lock-form {
    display: none;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 20px;
    padding: 18px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.28);
}

.crm-lock-form.is-visible {
    display: block;
}

.crm-lock-form .form-control {
    height: 46px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.20);
    background: rgba(255,255,255,0.94);
}

.crm-lock-form .btn {
    height: 46px;
    border-radius: 12px;
    font-weight: 700;
}

.crm-lock-error {
    display: none;
    margin-top: 12px;
    font-size: 13px;
    color: #ffd2d2;
}

.crm-lock-error.is-visible {
    display: block;
}

@media (max-width: 576px) {
    .crm-lock-icon-wrap {
        width: 92px;
        height: 92px;
    }

    .crm-lock-icon-wrap i {
        font-size: 36px;
    }

    .crm-lock-title {
        font-size: 21px;
    }
}

/*
 Keep the original theme logo visibility classes intact:
 desktop-logo / toggle-logo / light-logo / light-logo1

 The theme decides which one is visible.
 For custom logos, JavaScript swaps between normal and mode=dark.
*/


/* ==========================================================
   TASK / POPUP NOTIFICATIONS
   Sources: themes/default/assets/css/monitortasks.css
   ========================================================== */
.showtasks-close {
 position: absolute;
 top: 5px;
 right: 5px;
 cursor: pointer;
 color: #ffffff; /* White text color */
}

.popup {
 display: none;
 position: fixed;
 top: 50px;
 right: 20px;
/*    background-color: #4e7fb4; /* Mid-blue background color */
 background-color: transparent !important;
 color: #ffffff; /* White text color */
 border: 0px solid #336699; /* Darker blue border color */
 padding: 15px;
 z-index: 9999;


 animation: fadeInRight 0.5s ease-in-out forwards; /* Animation for fade-in from right */
}

/* Media query for screens smaller than 600px */
@media (max-width: 600px) {
  .popup {
    top: 50px; /* Adjust top position */
    right: 10px; /* Adjust right position */
    left: 10px; /* Ensure it's not lost on the left side */
    width: calc(100% - 20px); /* Ensure it fits within the screen */
    padding: 10px; /* Adjust padding for smaller screens */
    animation: fadeInUp 0.5s ease-in-out forwards; /* Optional: change animation for mobile */
  }
}


/* ==========================================================
   CALENDAR OVERRIDES
   Sources: themes/default/assets/css/calendar-overrides-v2.css
   ========================================================== */
/* ===== FullCalendar hover hardening ===== */

/* Kill accidental background paints on hover inside daygrid/timegrid */
#calendar .fc :where(td:hover, th:hover,
                     .fc-daygrid-day:hover,
                     .fc-daygrid-day-frame:hover,
                     .fc-daygrid-day-number:hover,
                     .fc-timegrid-slot:hover,
                     a:hover) {
  background: transparent !important;
  box-shadow: none !important;
}

/* Ensure the month/week/day grid headers don't tint on hover */
#calendar .fc .fc-col-header-cell-cushion:hover {
  background: transparent !important;
  color: inherit !important;
}

/* Optional: soften List view row hover (instead of blue) */
#calendar .fc .fc-list-event:hover td {
  background: rgba(0,0,0,0.03) !important; /* or 'transparent' to disable entirely */
}

/* Optional: make sure FC buttons keep their normal hover without tinting the grid */
#calendar .fc .fc-button:hover {
  filter: brightness(0.96);
}

.dropdown-toggle-no-arrow::after {
  display: none !important;
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: modals/___add-project.css
   ========================================================== */
.dynamic-page {
    display: none;
    transform: translateX(100%);  /* Offscreen to the right */
    transition: transform 0.5s ease-in-out, opacity 0.5s ease; /* Smooth transition */
    opacity: 0;  /* Initially invisible */
}

.dynamic-page.active {
    display: block;
    transform: translateX(0);  /* Slide into view */
    opacity: 1;  /* Make it visible */
}


@keyframes slide-in {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: modals/account-contact-relationships.css
   ========================================================== */
#accountContactRelationshipsModal .modal-dialog {
 max-width: 1440px;
}

#accountContactRelationshipsModal .modal-content {
 border: 0;
 border-radius: 18px;
 overflow: hidden;
 box-shadow: 0 22px 60px rgba(15,23,42,.24);
}

#accountContactRelationshipsModal .modal-header {
 border-bottom: 0;
 padding: 16px 20px;
}

#accountContactRelationshipsModal .account-rel-modal-title-wrap {
 display: flex;
 align-items: center;
 gap: 12px;
 min-width: 0;
}

#accountContactRelationshipsModal .account-rel-modal-icon {
 width: 42px;
 height: 42px;
 border-radius: 12px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 background: rgba(255,255,255,.16);
 flex: 0 0 auto;
}

#accountContactRelationshipsModal .account-rel-modal-title {
 margin: 0;
 font-size: 20px;
 font-weight: 800;
 line-height: 1.15;
}

#accountContactRelationshipsModal .account-rel-modal-subtitle {
 margin-top: 3px;
 color: rgba(255,255,255,.75);
 font-size: 12px;
 line-height: 1.2;
}

#accountContactRelationshipsModal .account-rel-close {
 border: 0;
 background: transparent;
 color: #fff;
 font-size: 25px;
 line-height: 1;
 padding: 5px;
 opacity: .9;
}

#accountContactRelationshipsModal .account-rel-close:hover {
 opacity: 1;
}

#accountContactRelationshipsModal .modal-body {
 padding: 18px;
 background: #f6f8fc;
}

#accountContactRelationshipsModal .account-rel-loading {
 min-height: 360px;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 12px;
 color: #64748b;
 text-align: center;
}

#accountContactRelationshipsModal .account-rel-loading i {
 color: #232f84;
}

#accountContactRelationshipsModal .account-rel-summary-grid {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 12px;
 margin-bottom: 16px;
}

#accountContactRelationshipsModal .account-rel-summary-card {
 background: #fff;
 border: 1px solid #e5eaf2;
 border-radius: 14px;
 padding: 14px 16px;
 box-shadow: 0 5px 16px rgba(15,23,42,.05);
}

#accountContactRelationshipsModal .account-rel-summary-value {
 font-size: 24px;
 font-weight: 800;
 line-height: 1;
 color: #25305f;
}

#accountContactRelationshipsModal .account-rel-summary-label {
 margin-top: 5px;
 color: #6b7280;
 font-size: 12px;
 font-weight: 700;
}

#accountContactRelationshipsModal .account-rel-section {
 background: #fff;
 border: 1px solid #e5eaf2;
 border-radius: 16px;
 padding: 16px;
 margin-bottom: 16px;
 box-shadow: 0 7px 20px rgba(15,23,42,.05);
}

#accountContactRelationshipsModal .account-rel-section:last-child {
 margin-bottom: 0;
}

#accountContactRelationshipsModal .account-rel-section-header {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 12px;
 margin-bottom: 14px;
}

#accountContactRelationshipsModal .account-rel-section-title {
 font-size: 16px;
 font-weight: 800;
 color: #27315f;
 margin: 0;
}

#accountContactRelationshipsModal .account-rel-section-help {
 color: #778198;
 font-size: 12px;
 margin-top: 3px;
}

#accountContactRelationshipsModal .account-rel-tree-scroll {
 width: 100%;
 overflow-x: auto;
 overflow-y: visible;
 -webkit-overflow-scrolling: touch;
 padding: 4px 4px 16px;
 overscroll-behavior-x: contain;
}

#accountContactRelationshipsModal .account-rel-tree,
#accountContactRelationshipsModal .account-rel-tree ul,
#accountContactRelationshipsModal .account-rel-tree li,
#accountContactRelationshipsModal .account-rel-tree li:hover > ul,
#accountContactRelationshipsModal .account-rel-tree li:focus-within > ul {
 position: relative !important;
 list-style: none !important;
 margin: 0 !important;
}

#accountContactRelationshipsModal .account-rel-tree,
#accountContactRelationshipsModal .account-rel-tree ul,
#accountContactRelationshipsModal .account-rel-tree li:hover > ul,
#accountContactRelationshipsModal .account-rel-tree li:focus-within > ul {
 display: flex !important;
}

#accountContactRelationshipsModal .account-rel-tree {
 justify-content: center;
 align-items: flex-start;
 min-width: max-content;
 padding: 0 !important;
}

#accountContactRelationshipsModal .account-rel-tree ul {
 justify-content: center;
 align-items: flex-start;
 padding: 34px 0 0 !important;
}

#accountContactRelationshipsModal .account-rel-tree li {
 text-align: center;
 padding: 0 8px !important;
 min-width: 0;
}

#accountContactRelationshipsModal .account-rel-tree li::before,
#accountContactRelationshipsModal .account-rel-tree li::after {
 content: '';
 position: absolute;
 top: -17px;
 width: 50%;
 height: 17px;
 border-top: 2px solid #c8d0df;
}

#accountContactRelationshipsModal .account-rel-tree li::before {
 right: 50%;
}

#accountContactRelationshipsModal .account-rel-tree li::after {
 left: 50%;
 border-left: 2px solid #c8d0df;
}

#accountContactRelationshipsModal .account-rel-tree li:only-child::before,
#accountContactRelationshipsModal .account-rel-tree li:only-child::after {
 display: none;
}

#accountContactRelationshipsModal .account-rel-tree li:first-child::before,
#accountContactRelationshipsModal .account-rel-tree li:last-child::after {
 border: 0;
}

#accountContactRelationshipsModal .account-rel-tree li:last-child::before {
 border-right: 2px solid #c8d0df;
 border-radius: 0 8px 0 0;
}

#accountContactRelationshipsModal .account-rel-tree li:first-child::after {
 border-radius: 8px 0 0 0;
}

#accountContactRelationshipsModal .account-rel-tree li > ul::before {
 content: '';
 position: absolute;
 top: 0;
 left: 50%;
 height: 17px;
 border-left: 2px solid #c8d0df;
}

#accountContactRelationshipsModal .account-rel-tree > li::before,
#accountContactRelationshipsModal .account-rel-tree > li::after {
 display: none;
}

#accountContactRelationshipsModal .account-rel-contact-card {
 width: 212px;
 min-height: 104px;
 display: inline-flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 4px;
 padding: 13px 12px;
 background: #fff;
 border: 2px solid #dfe5f0;
 border-radius: 14px;
 box-shadow: 0 7px 18px rgba(15,23,42,.08);
 color: #27315f;
 transition: border-color .15s ease, box-shadow .15s ease;
}

#accountContactRelationshipsModal .account-rel-contact-card:hover {
 border-color: #7382c6;
 box-shadow: 0 9px 22px rgba(35,47,132,.13);
}

#accountContactRelationshipsModal .account-rel-contact-card.is-primary {
 border-color: #232f84;
}

#accountContactRelationshipsModal .account-rel-avatar {
 width: 38px;
 height: 38px;
 border-radius: 50%;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 background: linear-gradient(135deg,#232f84,#5969be);
 color: #fff;
 font-size: 13px;
 font-weight: 800;
 letter-spacing: .3px;
}

#accountContactRelationshipsModal .account-rel-contact-name {
 max-width: 100%;
 font-size: 13px;
 font-weight: 800;
 line-height: 1.2;
 overflow-wrap: anywhere;
}

#accountContactRelationshipsModal .account-rel-contact-role {
 color: #727b91;
 font-size: 11px;
 line-height: 1.2;
 min-height: 13px;
 overflow-wrap: anywhere;
}

#accountContactRelationshipsModal .account-rel-contact-badges {
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
 gap: 4px;
 margin-top: 3px;
}

#accountContactRelationshipsModal .account-rel-mini-badge {
 display: inline-flex;
 align-items: center;
 min-height: 20px;
 padding: 4px 7px;
 border-radius: 999px;
 background: rgba(35,47,132,.08);
 color: #232f84;
 border: 1px solid rgba(35,47,132,.14);
 font-size: 9px;
 font-weight: 800;
 line-height: 1;
 white-space: nowrap;
}

#accountContactRelationshipsModal .account-rel-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(235px,1fr));
 gap: 10px;
}

#accountContactRelationshipsModal .account-rel-flat-card {
 border: 1px solid #dfe5f0;
 border-radius: 13px;
 padding: 12px;
 background: #fff;
 display: flex;
 align-items: center;
 gap: 10px;
 min-width: 0;
}

#accountContactRelationshipsModal .account-rel-flat-card.is-connected-only {
 border-color: #bfd2f5;
 background: #f6f9ff;
}

#accountContactRelationshipsModal .account-rel-flat-card.is-unconnected {
 border: 1px dashed #e2ad47;
 background: #fffaf0;
}

#accountContactRelationshipsModal .account-rel-flat-card.is-unconnected .account-rel-avatar {
 background: linear-gradient(135deg,#b97814,#dba943);
}

#accountContactRelationshipsModal .account-rel-flat-main {
 min-width: 0;
 flex: 1;
}

#accountContactRelationshipsModal .account-rel-flat-name {
 font-weight: 800;
 color: #2f385f;
 line-height: 1.2;
 overflow-wrap: anywhere;
}

#accountContactRelationshipsModal .account-rel-flat-role {
 color: #747d92;
 font-size: 11px;
 margin-top: 3px;
 overflow-wrap: anywhere;
}

#accountContactRelationshipsModal .account-rel-connection-list {
 display: grid;
 grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
 gap: 9px;
}

#accountContactRelationshipsModal .account-rel-connection-row {
 display: flex;
 align-items: center;
 gap: 8px;
 border: 1px solid #e3e8f1;
 border-radius: 12px;
 padding: 10px 12px;
 background: #fbfcfe;
 min-width: 0;
}

#accountContactRelationshipsModal .account-rel-connection-person {
 min-width: 0;
 flex: 1 1 0;
 font-size: 12px;
 font-weight: 700;
 color: #384262;
 overflow-wrap: anywhere;
}

#accountContactRelationshipsModal .account-rel-connection-type {
 flex: 0 0 auto;
 display: inline-flex;
 align-items: center;
 padding: 5px 8px;
 border-radius: 999px;
 background: rgba(35,47,132,.09);
 border: 1px solid rgba(35,47,132,.15);
 color: #232f84;
 font-size: 9px;
 font-weight: 800;
 text-transform: uppercase;
 letter-spacing: .25px;
 white-space: nowrap;
}

#accountContactRelationshipsModal .account-rel-empty {
 text-align: center;
 color: #7b8496;
 padding: 24px 12px;
}

#accountContactRelationshipsModal .account-rel-empty i {
 font-size: 30px;
 color: #a3acc0;
 margin-bottom: 9px;
}

body.dark-mode #accountContactRelationshipsModal .modal-body {
 background: #20222c;
}

body.dark-mode #accountContactRelationshipsModal .account-rel-summary-card,
body.dark-mode #accountContactRelationshipsModal .account-rel-section,
body.dark-mode #accountContactRelationshipsModal .account-rel-contact-card,
body.dark-mode #accountContactRelationshipsModal .account-rel-flat-card,
body.dark-mode #accountContactRelationshipsModal .account-rel-connection-row {
 background: #2E303A;
 border-color: #414556;
 box-shadow: none;
}

body.dark-mode #accountContactRelationshipsModal .account-rel-section-title,
body.dark-mode #accountContactRelationshipsModal .account-rel-summary-value,
body.dark-mode #accountContactRelationshipsModal .account-rel-contact-card,
body.dark-mode #accountContactRelationshipsModal .account-rel-contact-name,
body.dark-mode #accountContactRelationshipsModal .account-rel-flat-name,
body.dark-mode #accountContactRelationshipsModal .account-rel-connection-person {
 color: #f3f5fb;
}

body.dark-mode #accountContactRelationshipsModal .account-rel-summary-label,
body.dark-mode #accountContactRelationshipsModal .account-rel-section-help,
body.dark-mode #accountContactRelationshipsModal .account-rel-contact-role,
body.dark-mode #accountContactRelationshipsModal .account-rel-flat-role {
 color: #aeb6ca;
}

body.dark-mode #accountContactRelationshipsModal .account-rel-flat-card.is-connected-only {
 background: #293247;
 border-color: #485a86;
}

body.dark-mode #accountContactRelationshipsModal .account-rel-flat-card.is-unconnected {
 background: #3b3325;
 border-color: #b9842d;
}

body.dark-mode #accountContactRelationshipsModal .account-rel-tree li::before,
body.dark-mode #accountContactRelationshipsModal .account-rel-tree li::after,
body.dark-mode #accountContactRelationshipsModal .account-rel-tree li > ul::before {
 border-color: #596074;
}

@media (max-width: 991.98px) {
 #accountContactRelationshipsModal .account-rel-summary-grid {
  grid-template-columns: repeat(2,minmax(0,1fr));
 }
}

@media (max-width: 767.98px) {
 #accountContactRelationshipsModal .modal-dialog {
  margin: 0;
  max-width: none;
  min-height: 100%;
 }

 #accountContactRelationshipsModal .modal-content {
  min-height: 100vh;
  border-radius: 0;
 }

 #accountContactRelationshipsModal .modal-header {
  padding: 13px 14px;
 }

 #accountContactRelationshipsModal .modal-body {
  padding: 12px;
 }

 #accountContactRelationshipsModal .account-rel-summary-grid {
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
 }

 #accountContactRelationshipsModal .account-rel-summary-card {
  padding: 11px 12px;
 }

 #accountContactRelationshipsModal .account-rel-summary-value {
  font-size: 20px;
 }

 #accountContactRelationshipsModal .account-rel-section {
  padding: 12px;
  border-radius: 13px;
 }

 #accountContactRelationshipsModal .account-rel-contact-card {
  width: 168px;
  min-height: 94px;
  padding: 10px 9px;
 }

 #accountContactRelationshipsModal .account-rel-tree li {
  padding: 0 5px !important;
 }

 #accountContactRelationshipsModal .account-rel-grid,
 #accountContactRelationshipsModal .account-rel-connection-list {
  grid-template-columns: 1fr;
 }

 #accountContactRelationshipsModal .account-rel-connection-row {
  flex-wrap: wrap;
 }

 #accountContactRelationshipsModal .account-rel-connection-person {
  min-width: calc(50% - 8px);
 }
}

@media (max-width: 420px) {
 #accountContactRelationshipsModal .account-rel-summary-grid {
  grid-template-columns: 1fr 1fr;
 }

 #accountContactRelationshipsModal .account-rel-modal-title {
  font-size: 17px;
 }

 #accountContactRelationshipsModal .account-rel-contact-card {
  width: 154px;
 }
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: modals/activity-trail.css
   ========================================================== */
#activityTrailTable tbody tr.activity-trail-selected-row,
#activityTrailTable tbody tr.activity-trail-selected-row > td,
#activityTrailTable tbody tr.activity-trail-selected-row.table-warning > td {
 background-color: #fff3cd !important;
 color: #664d03 !important;
}

#activityTrailTable tbody tr.activity-trail-selected-row > td:first-child {
 border-left: 6px solid #ff9800 !important;
}
#activityTrailTable {
 font-size: 0.85rem;
}

#activityTrailTable th,
#activityTrailTable td {
 font-size: 0.85rem;
}

#activityTrailTable th {
 white-space: nowrap;
}

#activityTrailTable .activity-trail-when,
#activityTrailTable .activity-trail-type,
#activityTrailTable .activity-trail-person {
 white-space: nowrap;
}

#activityTrailTable .activity-trail-what-happened {
 min-width: 280px;
 font-weight: 600;
 line-height: 1.4;
}

#activityTrailTable .activity-trail-details {
 min-width: 220px;
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: modals/add-activity.css
   ========================================================== */
/* Scoped Add Activity modal styling - visual only, matched to edit-company.php */
#addActivityModal .modal-content::before,
#addActivityModal .modal-content::after,
#addActivityModal .modal-body::before,
#addActivityModal .modal-body::after {
 content: none !important;
 display: none !important;
 border: 0 !important;
 box-shadow: none !important;
 background: none !important;
}

#addActivityModal .modal-content {
 overflow: hidden;
 background: #fff;
 border: 0;
 border-radius: 12px;
}

#addActivityModal .modal-body {
 background: #f4f6fb;
 padding: 18px;
}

#addActivityModal .form-control,
#addActivityModal .form-select {
 width: 100%;
}

#addActivityModal .card.border {
 border: 1px solid #d9dfec !important;
 border-radius: 12px;
 background: #ffffff;
 box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
 overflow: hidden;
}

#addActivityModal .card.border > .card-header {
 background: linear-gradient(90deg, rgba(35,47,132,0.13), rgba(35,47,132,0.04));
 border-bottom: 1px solid #d9dfec;
 padding: 14px 18px;
}

#addActivityModal .card.border > .card-header h5 {
 display: flex;
 align-items: center;
 color: #232f84;
 font-weight: 700;
}

#addActivityModal .card.border > .card-header i {
 line-height: 1;
}

#addActivityModal .card.border > .card-body {
 padding: 18px;
}

#addActivityModal .form-label {
 font-weight: 600;
}

#addActivityModal .alert {
 border-radius: 10px;
}

#addActivityModal .activity-checkbox-row,
#addActivityModal .activity-staff-checkbox-row {
 display: flex;
 align-items: center;
 gap: 8px;
 margin: 0;
 padding: 6px 4px;
 cursor: pointer;
 line-height: 1.3;
 border-radius: 4px;
}

#addActivityModal .activity-checkbox-row:hover,
#addActivityModal .activity-staff-checkbox-row:hover {
 background: var(--bs-tertiary-bg, rgba(0,0,0,0.04));
}

#addActivityModal .activity-checkbox-row input[type="checkbox"],
#addActivityModal .activity-staff-checkbox-row input[type="checkbox"] {
 appearance: auto !important;
 -webkit-appearance: checkbox !important;
 width: 16px !important;
 height: 16px !important;
 min-width: 16px !important;
 min-height: 16px !important;
 margin: 0 !important;
 padding: 0 !important;
 position: static !important;
 opacity: 1 !important;
 border-radius: 2px !important;
 display: inline-block !important;
 flex: 0 0 auto !important;
}

#addActivityModal .activity-checkbox-row span,
#addActivityModal .activity-staff-checkbox-row span {
 display: inline-block;
}

#addActivityModal .activity-staff-checkbox-list {
 border: 1px solid #d9dfec;
 border-radius: 10px;
 padding: 10px;
 max-height: 220px;
 overflow-y: auto;
 background: #fbfcff;
}

#addActivityModal .activity-next-step-panel,
#addActivityModal .activity-calendar-panel,
#addActivityModal .activity-new-contact-panel {
 display: none;
}

body.dark-mode #addActivityModal .modal-content {
 background: #2E303A;
}

body.dark-mode #addActivityModal .modal-body {
 background: #20222c;
}

body.dark-mode #addActivityModal .card.border {
 background: #2E303A;
 border-color: #3a3d4d !important;
 box-shadow: none;
}

body.dark-mode #addActivityModal .card.border > .card-header {
 background: rgba(255,255,255,0.06);
 border-bottom-color: #3a3d4d;
}

body.dark-mode #addActivityModal .card.border > .card-header h5 {
 color: #ffffff;
}

body.dark-mode #addActivityModal .activity-staff-checkbox-list {
 background: rgba(255,255,255,0.03);
 border-color: #3a3d4d;
}

@media (max-width: 576px) {
 #addActivityModal .modal-body {
  padding: 14px;
 }

 #addActivityModal .card.border > .card-body {
  padding: 14px;
 }
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: modals/add-company-contact.css
   ========================================================== */
#addContactModal .modal-content::before,
#addContactModal .modal-content::after,
#addContactModal .modal-body::before,
#addContactModal .modal-body::after {
 content: none !important;
 display: none !important;
 border: 0 !important;
 box-shadow: none !important;
 background: none !important;
}

#addContactModal .modal-content {
 overflow: hidden;
}

#addContactModal .form-control,
#addContactModal .form-select {
 width: 100%;
}

#addContactModal #addContactTabs {
 background: #ffffff;
 border: 1px solid #d9dfec;
 border-radius: 12px;
 padding: 8px;
 box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
 gap: 6px;
}

#addContactModal #addContactTabs .nav-link {
 border-radius: 9px;
 font-weight: 700;
 color: #475569;
 padding: 9px 14px;
}

#addContactModal #addContactTabs .nav-link:hover {
 background: rgba(35,47,132,0.07);
 color: #232f84;
}

#addContactModal #addContactTabs .nav-link.active {
 background: #232f84;
 color: #ffffff;
 box-shadow: 0 6px 14px rgba(35,47,132,0.22);
}

#addContactModal .add-contact-section-card {
 border: 1px solid #d9dfec !important;
 border-radius: 12px;
 background: #ffffff;
 box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
 overflow: hidden;
}

#addContactModal .add-contact-section-card .card-header {
 background: linear-gradient(90deg, rgba(35,47,132,0.13), rgba(35,47,132,0.04));
 border-bottom: 1px solid #d9dfec;
 padding: 14px 18px;
}

#addContactModal .add-contact-section-card .card-header h5 {
 display: flex;
 align-items: center;
 color: #232f84;
 font-weight: 700;
}

#addContactModal .add-contact-section-card .card-header i {
 line-height: 1;
}

#addContactModal .add-contact-section-card .card-body {
 padding: 18px;
}

body.dark-mode #addContactModal .modal-content {
 background: #2E303A;
}

body.dark-mode #addContactModal .modal-body {
 background: #20222c;
}

body.dark-mode #addContactModal #addContactTabs,
body.dark-mode #addContactModal .add-contact-section-card {
 background: #2E303A;
 border-color: #3a3d4d !important;
 box-shadow: none;
}

body.dark-mode #addContactModal #addContactTabs .nav-link {
 color: rgba(255,255,255,0.72);
}

body.dark-mode #addContactModal #addContactTabs .nav-link:hover {
 background: rgba(255,255,255,0.06);
 color: #ffffff;
}

body.dark-mode #addContactModal #addContactTabs .nav-link.active {
 background: #232f84;
 color: #ffffff;
}

body.dark-mode #addContactModal .add-contact-section-card .card-header {
 background: rgba(255,255,255,0.06);
 border-bottom-color: #3a3d4d;
}

body.dark-mode #addContactModal .add-contact-section-card .card-header h5 {
 color: #ffffff;
}

#addContactModal .add-contact-organisation-help {
 color: #6c757d;
 font-size: 13px;
 margin-top: 4px;
}

#addContactModal .add-contact-selected-badges {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 min-height: 36px;
 padding: 8px;
 border: 1px dashed #d9dfec;
 border-radius: 10px;
 background: rgba(248,250,252,0.85);
}

#addContactModal .add-contact-selected-badges:empty:before {
 content: "Nothing selected yet";
 color: #6c757d;
 font-size: 13px;
}

#addContactModal .add-contact-group-badge {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 7px 10px;
 border-radius: 999px;
 background: rgba(35,47,132,0.10);
 color: #232f84;
 border: 1px solid rgba(35,47,132,0.20);
 font-weight: 700;
 font-size: 12px;
}

#addContactModal .add-contact-group-badge button {
 border: 0;
 background: transparent;
 color: inherit;
 padding: 0;
 line-height: 1;
 cursor: pointer;
}

#addContactModal .add-contact-relationship-row {
 border: 1px solid #e5e9f2;
 border-radius: 12px;
 padding: 14px;
 background: rgba(248,250,252,0.75);
 margin-bottom: 12px;
}

body.dark-mode #addContactModal .add-contact-organisation-help {
 color: rgba(255,255,255,0.62);
}

body.dark-mode #addContactModal .add-contact-selected-badges,
body.dark-mode #addContactModal .add-contact-relationship-row {
 background: rgba(255,255,255,0.03);
 border-color: #3a3d4d;
}

body.dark-mode #addContactModal .add-contact-group-badge {
 background: rgba(255,255,255,0.08);
 color: #ffffff;
 border-color: rgba(255,255,255,0.16);
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: modals/add-company.css
   ========================================================== */
.highlight {
  border: 1px solid red;
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: modals/add-file.css
   ========================================================== */
/* Scoped Add File modal styling - matches edit-company.php visual treatment */
#addFileModal .modal-content::before,
#addFileModal .modal-content::after,
#addFileModal .modal-body::before,
#addFileModal .modal-body::after {
 content: none !important;
 display: none !important;
 border: 0 !important;
 box-shadow: none !important;
 background: none !important;
}

#addFileModal .modal-content {
 overflow: hidden;
 background: #fff;
 border: 0;
 border-radius: 12px;
}

#addFileModal .modal-body {
 background: #f4f6fb;
 padding: 18px;
}

#addFileModal .form-control,
#addFileModal .form-select {
 width: 100%;
}

#addFileModal .add-file-section-card {
 border: 1px solid #d9dfec !important;
 border-radius: 12px;
 background: #ffffff;
 box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
 overflow: hidden;
 margin-bottom: 0;
}

#addFileModal .add-file-section-card .card-header {
 background: linear-gradient(90deg, rgba(35,47,132,0.13), rgba(35,47,132,0.04));
 border-bottom: 1px solid #d9dfec;
 padding: 14px 18px;
}

#addFileModal .add-file-section-card .card-header h5 {
 display: flex;
 align-items: center;
 color: #232f84;
 font-weight: 700;
 margin-bottom: 0;
}

#addFileModal .add-file-section-card .card-header i {
 line-height: 1;
}

#addFileModal .add-file-section-card .card-body {
 padding: 18px;
}

#addFileModal .alert {
 border-radius: 10px;
}

#addFileModal .account-file-dropzone {
 border: 2px dashed #232f84;
 border-radius: 12px;
 padding: 30px 24px;
 text-align: center;
 cursor: pointer;
 margin-bottom: 20px;
 background: rgba(35,47,132,0.06);
 color: #282f53;
 transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

#addFileModal .account-file-dropzone:hover,
#addFileModal .account-file-dropzone.bg-light {
 background: rgba(35,47,132,0.12) !important;
 border-color: #232f84;
 transform: translateY(-1px);
}

#addFileModal .account-file-dropzone i {
 color: #232f84;
}

#addFileModal .account-file-dropzone strong {
 color: #232f84;
 font-weight: 700;
}

#addFileModal .account-file-dropzone span {
 color: #6c757d;
 font-size: 13px;
}

#addFileModal .account-file-preview {
 overflow-x: auto;
}

#addFileModal .account-file-editor-list {
 display: grid;
 gap: 14px;
 margin-top: 18px;
}

#addFileModal .account-file-editor {
 border: 1px solid #d9dfec;
 border-radius: 12px;
 background: #fff;
 overflow: hidden;
 box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

#addFileModal .account-file-editor-header {
 display: flex;
 align-items: center;
 gap: 14px;
 padding: 14px 16px;
 background: #f8f9fc;
 border-bottom: 1px solid #e5e9f1;
}

#addFileModal .account-file-preview-box {
 width: 50px;
 min-width: 50px;
 height: 50px;
 border-radius: 10px;
 background: rgba(35,47,132,0.08);
 display: flex;
 align-items: center;
 justify-content: center;
 overflow: hidden;
}

#addFileModal .account-file-preview-box .account-file-thumbnail {
 width: 100%;
 height: 100%;
 object-fit: cover;
 border-radius: 0;
 box-shadow: none;
}

#addFileModal .account-file-editor-title {
 min-width: 0;
 flex: 1 1 auto;
}

#addFileModal .account-file-editor-title strong {
 display: block;
 color: #20243f;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

#addFileModal .account-file-editor-title small {
 display: block;
 color: #6c757d;
 margin-top: 2px;
}

#addFileModal .account-file-editor-kicker {
 display: block;
 color: #232f84;
 font-size: 11px;
 font-weight: 800;
 letter-spacing: .04em;
 text-transform: uppercase;
 margin-bottom: 2px;
}

#addFileModal .account-file-editor-body {
 padding: 16px;
}

#addFileModal .account-file-editor .form-label {
 color: #313754;
}

#addFileModal .account-file-editor .form-text {
 font-size: 12px;
}

#addFileModal .account-file-remove {
 white-space: nowrap;
}

#addFileModal .account-file-preview table {
 margin-bottom: 0;
}

#addFileModal .account-file-thumbnail {
 width: 42px;
 height: 42px;
 object-fit: cover;
 border-radius: 6px;
 display: inline-block;
 box-shadow: 0 4px 10px rgba(15,23,42,0.10);
}

#addFileModal .account-file-icon {
 font-size: 28px;
 color: #232f84;
}

#addFileModal .account-file-remove {
 min-width: auto;
}

body.dark-mode #addFileModal .modal-content {
 background: #2E303A;
}

body.dark-mode #addFileModal .modal-body {
 background: #20222c;
}

body.dark-mode #addFileModal .add-file-section-card {
 background: #2E303A;
 border-color: #3a3d4d !important;
 box-shadow: none;
}

body.dark-mode #addFileModal .add-file-section-card .card-header {
 background: rgba(255,255,255,0.06);
 border-bottom-color: #3a3d4d;
}

body.dark-mode #addFileModal .add-file-section-card .card-header h5 {
 color: #ffffff;
}

body.dark-mode #addFileModal .account-file-dropzone {
 background: rgba(255,255,255,0.03);
 border-color: #3a3d4d;
 color: rgba(255,255,255,0.78);
}

body.dark-mode #addFileModal .account-file-dropzone:hover,
body.dark-mode #addFileModal .account-file-dropzone.bg-light {
 background: rgba(255,255,255,0.06) !important;
 border-color: rgba(255,255,255,0.20);
}

body.dark-mode #addFileModal .account-file-dropzone i,
body.dark-mode #addFileModal .account-file-dropzone strong,
body.dark-mode #addFileModal .account-file-icon {
 color: #ffffff;
}

body.dark-mode #addFileModal .account-file-dropzone span {
 color: rgba(255,255,255,0.62);
}


body.dark-mode #addFileModal .account-file-editor {
 background: #2E303A;
 border-color: #3a3d4d;
 box-shadow: none;
}

body.dark-mode #addFileModal .account-file-editor-header {
 background: rgba(255,255,255,0.035);
 border-bottom-color: #3a3d4d;
}

body.dark-mode #addFileModal .account-file-preview-box {
 background: rgba(255,255,255,0.07);
}

body.dark-mode #addFileModal .account-file-editor-title strong,
body.dark-mode #addFileModal .account-file-editor .form-label {
 color: #fff;
}

body.dark-mode #addFileModal .account-file-editor-title small {
 color: rgba(255,255,255,0.58);
}

body.dark-mode #addFileModal .account-file-editor-kicker {
 color: #aeb7ff;
}

@media (max-width: 575.98px) {
 #addFileModal .account-file-editor-header {
  align-items: flex-start;
  flex-wrap: wrap;
 }

 #addFileModal .account-file-remove {
  width: 100%;
 }
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: modals/add-opportunity.css
   ========================================================== */
/* Scoped Add Opportunity modal styling - matched to Edit Company modal */
#addOpportunityModal .modal-content::before,
#addOpportunityModal .modal-content::after,
#addOpportunityModal .modal-body::before,
#addOpportunityModal .modal-body::after {
 content: none !important;
 display: none !important;
 border: 0 !important;
 box-shadow: none !important;
 background: none !important;
}

#addOpportunityModal .modal-content {
 overflow: hidden;
 background: #fff;
 border: 0;
 border-radius: 12px;
}

#addOpportunityModal .modal-body {
 background: #f4f6fb;
 padding: 18px;
}

#addOpportunityModal .form-control,
#addOpportunityModal .form-select {
 width: 100%;
}

/* Keep currency prefixes attached to their input fields. */
#addOpportunityModal .input-group {
 display: flex;
 flex-wrap: nowrap;
 align-items: stretch;
 width: 100%;
}

#addOpportunityModal .input-group > .input-group-text {
 display: flex;
 align-items: center;
 flex: 0 0 auto;
 white-space: nowrap;
}

#addOpportunityModal .input-group > .form-control {
 flex: 1 1 auto;
 width: 1%;
 min-width: 0;
}

#addOpportunityModal .card {
 border: 1px solid #d9dfec !important;
 border-radius: 12px;
 background: #ffffff;
 box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
 overflow: hidden;
}

#addOpportunityModal .card-header {
 background: linear-gradient(90deg, rgba(35,47,132,0.13), rgba(35,47,132,0.04));
 border-bottom: 1px solid #d9dfec;
 padding: 14px 18px;
}

#addOpportunityModal .card-header h5 {
 display: flex;
 align-items: center;
 color: #232f84;
 font-weight: 700;
}

#addOpportunityModal .card-header i {
 line-height: 1;
}

#addOpportunityModal .card-body {
 padding: 18px;
}

#addOpportunityModal .form-label {
 font-weight: 600;
}

#addOpportunityModal .alert {
 border-radius: 10px;
}

#addOpportunityModal .opportunity-checkbox-row,
#addOpportunityModal .opportunity-staff-checkbox-row {
 display: flex;
 align-items: center;
 gap: 8px;
 margin: 0;
 padding: 6px 4px;
 cursor: pointer;
 line-height: 1.3;
 border-radius: 4px;
}

#addOpportunityModal .opportunity-checkbox-row:hover,
#addOpportunityModal .opportunity-staff-checkbox-row:hover {
 background: var(--bs-tertiary-bg, rgba(0,0,0,0.04));
}

#addOpportunityModal .opportunity-checkbox-row input[type="checkbox"],
#addOpportunityModal .opportunity-staff-checkbox-row input[type="checkbox"] {
 appearance: auto !important;
 -webkit-appearance: checkbox !important;
 width: 16px !important;
 height: 16px !important;
 min-width: 16px !important;
 min-height: 16px !important;
 margin: 0 !important;
 padding: 0 !important;
 position: static !important;
 opacity: 1 !important;
 border-radius: 2px !important;
 display: inline-block !important;
 flex: 0 0 auto !important;
}

#addOpportunityModal .opportunity-checkbox-row span,
#addOpportunityModal .opportunity-staff-checkbox-row span {
 display: inline-block;
}

#addOpportunityModal .opportunity-staff-checkbox-list {
 border: 1px solid #d9dfec;
 border-radius: 10px;
 padding: 10px;
 max-height: 220px;
 overflow-y: auto;
 background: #fbfcff;
}

body.dark-mode #addOpportunityModal .modal-content {
 background: #2E303A;
}

body.dark-mode #addOpportunityModal .modal-body {
 background: #20222c;
}

body.dark-mode #addOpportunityModal .card {
 background: #2E303A;
 border-color: #3a3d4d !important;
 box-shadow: none;
}

body.dark-mode #addOpportunityModal .card-header {
 background: rgba(255,255,255,0.06);
 border-bottom-color: #3a3d4d;
}

body.dark-mode #addOpportunityModal .card-header h5 {
 color: #ffffff;
}

body.dark-mode #addOpportunityModal .opportunity-staff-checkbox-list {
 background: rgba(255,255,255,0.03);
 border-color: #3a3d4d;
}

@media (max-width: 576px) {
 #addOpportunityModal .modal-body {
  padding: 14px;
 }

 #addOpportunityModal .card-body {
  padding: 14px;
 }
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: modals/add-project.css
   ========================================================== */
/* Custom styles for the .page class */
.page {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 10px;
    padding-bottom: 10px;
}

    /* Style the normal text input like Choices.js */
    .custom-input {
      position: relative;
      display: inline-block;
      padding: 0.375rem 0.75rem;
      font-size: 1rem;
      line-height: 1.5;
      color: #495057;
      background-color: #fff;
      background-clip: padding-box;
      border: 1px solid #ced4da;
      border-radius: 0.25rem;
      transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
      width: 100%; /* Ensure the input is full-width like form-control */
    }

    .custom-input:focus {
      border-color: #86b7fe;
      outline: 0;
      box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }

    /* Optional: add a clear button */
    .custom-input-clear {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      color: #6c757d;
    }

    .custom-input-clear:hover {
      color: #dc3545;
    }

    /* Add padding to account for the clear button */
    .custom-input-with-clear {
      padding-right: 2.25rem;
    }

    /* Style the normal date input like Choices.js */
    .custom-date-input {
      display: inline-block;
      padding: 0.375rem 0.75rem;
      font-size: 1rem;
      line-height: 1.5;
      color: #495057;
      background-color: #fff;
      background-clip: padding-box;
      border: 1px solid #ced4da;
      border-radius: 0.25rem;
      transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
      width: 100%; /* Ensure the input is full-width like form-control */
      appearance: none; /* Remove the default browser styling */
    }

    .custom-date-input::-webkit-calendar-picker-indicator {
      color: transparent; /* Hide default calendar icon */
    }

    .custom-date-input:focus {
      border-color: #86b7fe;
      outline: 0;
      box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }

    /* Optional: Custom calendar icon */
    .custom-date-clear {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      color: #6c757d;
    }

    .custom-date-clear:hover {
      color: #dc3545;
    }

    /* Add padding to account for the clear button or custom icon */
    .custom-date-input-with-clear {
      padding-right: 2.25rem;
    }

    /* css for choices invalid data input or select*/
    .choices.is-invalid .choices__inner {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
  }


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: modals/add-sales-process-order.css
   ========================================================== */
.sales-order-modal { max-width: 40%; }
@media (max-width: 768px) { .sales-order-modal { max-width: 90%; } }


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: modals/add-task.css
   ========================================================== */
/*
 Styling-only refresh for Add Task modal.
 No markup, field names, IDs, hidden inputs, panels or buttons have been changed.
*/

#addTaskModal .modal-content::before,
#addTaskModal .modal-content::after,
#addTaskModal .modal-body::before,
#addTaskModal .modal-body::after {
 content: none !important;
 display: none !important;
 border: 0 !important;
 box-shadow: none !important;
 background: none !important;
}

#addTaskModal .modal-content {
 overflow: hidden;
 border-radius: 12px;
}

#addTaskModal .modal-body {
 padding: 18px;
}

#addTaskModal .form-control,
#addTaskModal .form-select {
 width: 100%;
}

#addTaskModal .card.border {
 border: 1px solid #d9dfec !important;
 border-radius: 12px;
 background: #ffffff;
 box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
 overflow: hidden;
}

#addTaskModal .card.border > .card-header {
 background: linear-gradient(90deg, rgba(35,47,132,0.13), rgba(35,47,132,0.04));
 border-bottom: 1px solid #d9dfec;
 padding: 14px 18px;
}

#addTaskModal .card.border > .card-header h5 {
 display: flex;
 align-items: center;
 color: #232f84;
 font-weight: 700;
}

#addTaskModal .card.border > .card-header i {
 line-height: 1;
}

#addTaskModal .card.border > .card-body {
 padding: 18px;
}

#addTaskModal label.form-label {
 font-weight: 600;
}

#addTaskModal .task-checkbox-row {
 display: flex;
 align-items: center;
 gap: 8px;
 margin: 0;
 padding: 8px 10px;
 cursor: pointer;
 line-height: 1.3;
 border-radius: 8px;
 border: 1px solid transparent;
}

#addTaskModal .task-checkbox-row:hover {
 background: rgba(35,47,132,0.06);
 border-color: rgba(35,47,132,0.14);
}

#addTaskModal .task-checkbox-row input[type="checkbox"] {
 appearance: auto !important;
 -webkit-appearance: checkbox !important;
 width: 16px !important;
 height: 16px !important;
 min-width: 16px !important;
 min-height: 16px !important;
 margin: 0 !important;
 padding: 0 !important;
 position: static !important;
 opacity: 1 !important;
 border-radius: 2px !important;
 display: inline-block !important;
 flex: 0 0 auto !important;
}

#addTaskModal #taskNextStepVisitPanel,
#addTaskModal #taskNextStepOpportunityPanel {
 border: 1px solid #e5e9f2;
 border-radius: 12px;
 padding: 16px;
 background: rgba(248,250,252,0.75);
}

#addTaskModal #taskNextStepVisitPanel h5,
#addTaskModal #taskNextStepOpportunityPanel h5 {
 color: #232f84;
 font-weight: 700;
}

body.dark-mode #addTaskModal .modal-content {
 background: #2E303A;
}

body.dark-mode #addTaskModal .modal-body {
 background: #20222c;
}

body.dark-mode #addTaskModal .card.border {
 background: #2E303A;
 border-color: #3a3d4d !important;
 box-shadow: none;
}

body.dark-mode #addTaskModal .card.border > .card-header {
 background: rgba(255,255,255,0.06);
 border-bottom-color: #3a3d4d;
}

body.dark-mode #addTaskModal .card.border > .card-header h5 {
 color: #ffffff;
}

body.dark-mode #addTaskModal .task-checkbox-row:hover {
 background: rgba(255,255,255,0.06);
 border-color: rgba(255,255,255,0.10);
}

body.dark-mode #addTaskModal #taskNextStepVisitPanel,
body.dark-mode #addTaskModal #taskNextStepOpportunityPanel {
 background: rgba(255,255,255,0.03);
 border-color: #3a3d4d;
}

body.dark-mode #addTaskModal #taskNextStepVisitPanel h5,
body.dark-mode #addTaskModal #taskNextStepOpportunityPanel h5 {
 color: #ffffff;
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: modals/add-visit.css
   ========================================================== */
/* Scoped Add Visit modal styling */
#addVisitModal .modal-body {
 background: #f4f6fb;
}

#addVisitModal .visit-section-card {
 border: 1px solid #d9dfec !important;
 border-radius: 12px;
 background: #ffffff;
 box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
 overflow: hidden;
}

#addVisitModal .visit-section-card .card-header {
 background: linear-gradient(90deg, rgba(35,47,132,0.13), rgba(35,47,132,0.04));
 border-bottom: 1px solid #d9dfec;
 padding: 14px 18px;
}

#addVisitModal .visit-section-card .card-header h5 {
 color: #232f84;
 font-weight: 700;
}

#addVisitModal .visit-section-card .card-body {
 padding: 18px;
}

#addVisitModal .visit-staff-checkbox-list {
 border: 1px solid #d9dfec;
 border-radius: 8px;
 padding: 10px;
 max-height: 220px;
 overflow-y: auto;
 background: #fbfcff;
}

#addVisitModal .visit-staff-checkbox-row,
#addVisitModal .visit-checkbox-row {
 display: flex;
 align-items: center;
 gap: 8px;
 margin: 0;
 padding: 7px 6px;
 cursor: pointer;
 line-height: 1.3;
 border-radius: 6px;
}

#addVisitModal .visit-staff-checkbox-row:hover,
#addVisitModal .visit-checkbox-row:hover {
 background: rgba(35,47,132,0.07);
}

#addVisitModal .visit-staff-checkbox-row input[type="checkbox"],
#addVisitModal .visit-checkbox-row input[type="checkbox"] {
 appearance: auto !important;
 -webkit-appearance: checkbox !important;
 width: 16px !important;
 height: 16px !important;
 min-width: 16px !important;
 min-height: 16px !important;
 margin: 0 !important;
 padding: 0 !important;
 position: static !important;
 opacity: 1 !important;
 border-radius: 2px !important;
 display: inline-block !important;
 flex: 0 0 auto !important;
}

#addVisitModal .visit-staff-checkbox-row span,
#addVisitModal .visit-checkbox-row span {
 display: inline-block;
}

#addVisitModal .form-control,
#addVisitModal .form-select {
 width: 100%;
}

body.dark-mode #addVisitModal .modal-body {
 background: #20222c;
}

body.dark-mode #addVisitModal .visit-section-card {
 background: #2E303A;
 border-color: #3a3d4d !important;
 box-shadow: none;
}

body.dark-mode #addVisitModal .visit-section-card .card-header {
 background: rgba(255,255,255,0.06);
 border-bottom-color: #3a3d4d;
}

body.dark-mode #addVisitModal .visit-section-card .card-header h5 {
 color: #ffffff;
}

body.dark-mode #addVisitModal .visit-staff-checkbox-list {
 background: rgba(255,255,255,0.03);
 border-color: #3a3d4d;
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: modals/contact-group-for-contact.css
   ========================================================== */
#addContactGroupForContactModal .modal-content {
 border: 0;
 border-radius: 14px;
 overflow: hidden;
 box-shadow: 0 18px 50px rgba(15,23,42,.20);
}
#addContactGroupForContactModal .crm-modal-section {
 border: 1px solid #e9edf4;
 border-radius: 14px;
 padding: 16px;
 background: #fff;
 margin-bottom: 16px;
}
#addContactGroupForContactModal .crm-modal-section-header {
 display: flex;
 align-items: center;
 gap: 10px;
 margin-bottom: 14px;
}
#addContactGroupForContactModal .crm-modal-section-icon {
 width: 38px;
 height: 38px;
 border-radius: 12px;
 display: flex;
 align-items: center;
 justify-content: center;
 background: rgba(35,47,132,.10);
 color: #232f84;
 font-size: 16px;
 flex: 0 0 auto;
}
#addContactGroupForContactModal .crm-modal-section-title {
 font-weight: 700;
 color: #282f53;
 line-height: 1.2;
}
#addContactGroupForContactModal .crm-modal-section-subtitle,
#addContactGroupForContactModal .contact-group-type-text {
 color: #6c757d;
 font-size: 12px;
 margin-top: 2px;
}
#addContactGroupForContactModal .contact-group-type-option {
 border: 1px solid #e9edf4;
 border-radius: 12px;
 padding: 12px;
 margin-bottom: 10px;
 cursor: pointer;
}
#addContactGroupForContactModal .contact-group-type-title {
 font-weight: 700;
 color: #282f53;
}
#addContactGroupForContactModal .contact-group-company-preview { color: #232f84; }
#addContactGroupForContactModal .contact-group-personal-preview { color: #856404; }
body.dark-mode #addContactGroupForContactModal .modal-content,
body.dark-mode #addContactGroupForContactModal .crm-modal-section,
body.dark-mode #addContactGroupForContactModal .contact-group-type-option {
 background: #2E303A !important;
 border-color: #3a3d4d !important;
}
body.dark-mode #addContactGroupForContactModal .crm-modal-section-title,
body.dark-mode #addContactGroupForContactModal .contact-group-type-title { color: #fff !important; }
body.dark-mode #addContactGroupForContactModal .crm-modal-section-subtitle,
body.dark-mode #addContactGroupForContactModal .contact-group-type-text { color: rgba(255,255,255,.65) !important; }


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: modals/contact-relationships.css
   ========================================================== */
#contactRelationshipTreeModal .modal-content {
 border: 0;
 border-radius: 14px;
 overflow: hidden;
 box-shadow: 0 18px 50px rgba(15,23,42,.20);
}

/*
 Stacked modal workflow.
 When Edit Contact is launched from the relationship view, the relationship
 modal remains open underneath while the edit modal receives a higher modal
 and backdrop layer. This keeps the relationship context visible without
 allowing clicks to leak through to it.
*/
body.crm-contact-edit-stacked #contactRelationshipTreeModal.crm-relationship-under-edit {
 z-index: 1055 !important;
 pointer-events: none !important;
}

body.crm-contact-edit-stacked #contactRelationshipTreeModal.crm-relationship-under-edit .modal-dialog {
 transform: none !important;
}

body.crm-contact-edit-stacked #editContactModal.crm-stacked-edit-modal {
 z-index: 1090 !important;
}

body.crm-contact-edit-stacked .modal-backdrop.crm-stacked-edit-backdrop {
 z-index: 1080 !important;
}

body.crm-contact-edit-stacked #editContactModal.crm-stacked-edit-modal .modal-dialog {
 position: relative;
 z-index: 1091;
}

@media (max-width: 767.98px) {
 body.crm-contact-edit-stacked #editContactModal.crm-stacked-edit-modal .modal-dialog {
  margin: .5rem;
  max-width: calc(100% - 1rem);
 }
}
#contactRelationshipTreeModal .contact-relationship-close {
 color: #ffffff !important;
 line-height: 1;
 opacity: .95;
 box-shadow: none !important;
}

#contactRelationshipTreeModal .contact-relationship-close:hover,
#contactRelationshipTreeModal .contact-relationship-close:focus {
 color: #ffffff !important;
 opacity: 1;
}
.contact-relationship-loading {
 min-height: 360px;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 12px;
 color: #64748b;
}

.contact-relationship-loading i {
 font-size: 30px;
 color: #232f84;
}

.contact-relationship-summary {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 18px;
 flex-wrap: wrap;
 padding: 18px;
 border-radius: 15px;
 background: linear-gradient(135deg, #232f84, #4f5fc4);
 color: #fff;
 margin-bottom: 18px;
}

.contact-relationship-kicker {
 font-size: 11px;
 text-transform: uppercase;
 letter-spacing: .11em;
 font-weight: 800;
 opacity: .75;
 margin-bottom: 3px;
}

.contact-relationship-summary h4 {
 margin: 0;
 color: #fff;
 font-size: 22px;
}

.contact-relationship-summary p {
 margin: 4px 0 0;
 color: rgba(255,255,255,.75);
}

.contact-relationship-count {
 min-width: 120px;
 text-align: center;
 padding: 10px 14px;
 border-radius: 13px;
 background: rgba(255,255,255,.12);
 border: 1px solid rgba(255,255,255,.18);
}

.contact-relationship-count strong,
.contact-relationship-count span {
 display: block;
}

.contact-relationship-count strong {
 font-size: 25px;
 line-height: 1;
}

.contact-relationship-count span {
 font-size: 11px;
 margin-top: 4px;
 opacity: .8;
}

.contact-relationship-section {
 background: #fff;
 border: 1px solid #e5e9f2;
 border-radius: 15px;
 padding: 18px;
 margin-bottom: 18px;
 box-shadow: 0 8px 22px rgba(15,23,42,.05);
}

.contact-relationship-section-title {
 color: #282f53;
 font-weight: 800;
 margin-bottom: 14px;
}

.contact-tree-scroll {
 overflow-x: auto;
 overflow-y: visible;
 padding: 8px 10px 24px;
 scrollbar-gutter: stable both-edges;
}

.contact-org-tree {
 display: inline-block;
 min-width: 100%;
 text-align: center;
}

.contact-org-tree,
.contact-org-tree * {
 box-sizing: border-box;
}

.contact-org-tree ul {
 padding-top: 28px;
 position: relative;
 display: flex;
 justify-content: center;
 margin: 0;
 padding-left: 0;
}

.contact-org-tree li {
 list-style-type: none;
 text-align: center;
 position: relative;
 padding: 28px 9px 0;
}

.contact-org-tree li::before,
.contact-org-tree li::after {
 content: '';
 position: absolute;
 top: 0;
 right: 50%;
 border-top: 2px solid #cbd5e1;
 width: 50%;
 height: 28px;
}

.contact-org-tree li::after {
 right: auto;
 left: 50%;
 border-left: 2px solid #cbd5e1;
}

.contact-org-tree li:only-child::after,
.contact-org-tree li:only-child::before {
 display: none;
}

/*
 Keep the normal connector space for a single child. The previous zero
 padding placed the relationship label directly over the contact name.
 Only the top-level root is allowed to remove that extra child spacing.
*/
.contact-org-tree li:only-child {
 padding-top: 28px;
}

.contact-org-tree > ul > li:only-child {
 padding-top: 0;
}

.contact-org-tree li:first-child::before,
.contact-org-tree li:last-child::after {
 border: 0 none;
}

.contact-org-tree li:last-child::before {
 border-right: 2px solid #cbd5e1;
 border-radius: 0 8px 0 0;
}

.contact-org-tree li:first-child::after {
 border-radius: 8px 0 0 0;
}

.contact-org-tree ul ul::before {
 content: '';
 position: absolute;
 top: 0;
 left: 50%;
 border-left: 2px solid #cbd5e1;
 width: 0;
 height: 28px;
}

/*
 Isolate the hierarchy from global navigation/dropdown rules.

 The main theme contains generic li:hover > ul behaviour for nested menus.
 Without these modal-specific overrides, hovering a contact changes the
 hierarchy's child list from flex to block/absolute positioning. That makes
 the tree jump between horizontal and vertical layouts as the pointer moves.
*/
#contactRelationshipTreeModal .contact-org-tree,
#contactRelationshipTreeModal .contact-org-tree:hover,
#contactRelationshipTreeModal .contact-org-tree:focus-within {
 position: relative !important;
 isolation: isolate;
}

#contactRelationshipTreeModal .contact-org-tree ul,
#contactRelationshipTreeModal .contact-org-tree li > ul,
#contactRelationshipTreeModal .contact-org-tree li:hover > ul,
#contactRelationshipTreeModal .contact-org-tree li:focus > ul,
#contactRelationshipTreeModal .contact-org-tree li:focus-within > ul {
 display: flex !important;
 position: relative !important;
 top: auto !important;
 right: auto !important;
 bottom: auto !important;
 left: auto !important;
 inset: auto !important;
 float: none !important;
 clear: none !important;
 width: auto !important;
 min-width: 0 !important;
 max-width: none !important;
 height: auto !important;
 min-height: 0 !important;
 max-height: none !important;
 overflow: visible !important;
 visibility: visible !important;
 opacity: 1 !important;
 transform: none !important;
 translate: none !important;
 scale: none !important;
 rotate: none !important;
 margin: 0 !important;
 padding-right: 0 !important;
 padding-left: 0 !important;
 list-style: none !important;
 background: transparent !important;
 border: 0 !important;
 box-shadow: none !important;
 pointer-events: auto !important;
 justify-content: center !important;
 align-items: flex-start !important;
 flex-direction: row !important;
 flex-wrap: nowrap !important;
}

#contactRelationshipTreeModal .contact-org-tree > ul,
#contactRelationshipTreeModal .contact-org-tree:hover > ul,
#contactRelationshipTreeModal .contact-org-tree:focus-within > ul {
 min-width: 100% !important;
 padding-top: 0 !important;
}

#contactRelationshipTreeModal .contact-org-tree li > ul,
#contactRelationshipTreeModal .contact-org-tree li:hover > ul,
#contactRelationshipTreeModal .contact-org-tree li:focus > ul,
#contactRelationshipTreeModal .contact-org-tree li:focus-within > ul {
 padding-top: 28px !important;
}

#contactRelationshipTreeModal .contact-org-tree li,
#contactRelationshipTreeModal .contact-org-tree li:hover,
#contactRelationshipTreeModal .contact-org-tree li:focus,
#contactRelationshipTreeModal .contact-org-tree li:focus-within {
 display: block !important;
 position: relative !important;
 top: auto !important;
 right: auto !important;
 bottom: auto !important;
 left: auto !important;
 float: none !important;
 width: auto !important;
 min-width: 0 !important;
 height: auto !important;
 margin: 0 !important;
 padding: 28px 9px 0 !important;
 overflow: visible !important;
 visibility: visible !important;
 opacity: 1 !important;
 transform: none !important;
 background: transparent !important;
 border-radius: 0 !important;
 box-shadow: none !important;
}

#contactRelationshipTreeModal .contact-org-tree > ul > li,
#contactRelationshipTreeModal .contact-org-tree > ul > li:hover,
#contactRelationshipTreeModal .contact-org-tree > ul > li:focus-within {
 padding-top: 0 !important;
}

#contactRelationshipTreeModal .contact-tree-node,
#contactRelationshipTreeModal .contact-tree-node:hover,
#contactRelationshipTreeModal .contact-tree-node:focus,
#contactRelationshipTreeModal .contact-tree-node:focus-visible {
 position: relative !important;
 float: none !important;
 transform: none !important;
 translate: none !important;
 margin: 0 !important;
}

.contact-tree-edge-label {
 position: absolute;
 top: 4px;
 left: 50%;
 transform: translateX(-50%);
 z-index: 3;
 background: #fff;
 border: 1px solid #d9dfec;
 border-radius: 999px;
 padding: 3px 8px;
 color: #64748b;
 font-size: 10px;
 font-weight: 800;
 line-height: 1.2;
 white-space: nowrap;
 pointer-events: none;
}

.contact-tree-node {
 width: 220px;
 min-height: 84px;
 position: relative;
 z-index: 1;
 display: inline-flex;
 align-items: center;
 gap: 11px;
 text-align: left;
 padding: 11px;
 border: 2px solid #d9dfec;
 border-radius: 13px;
 background: #fff;
 color: inherit;
 box-shadow: 0 7px 18px rgba(15,23,42,.07);
 transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
 cursor: pointer;
 transform: none !important;
}

/*
 Do not move the node on hover. Translating the element moved its hit area
 away from the pointer, repeatedly entering and leaving :hover and making
 the modal appear to shake.
*/
.contact-tree-node:hover,
.contact-tree-node:focus-visible {
 transform: none !important;
 border-color: rgba(35,47,132,.55);
 box-shadow: 0 10px 25px rgba(35,47,132,.13);
 outline: none;
}

.contact-tree-node.is-selected {
 border-color: #232f84;
 background: linear-gradient(135deg, rgba(35,47,132,.10), rgba(79,95,196,.04));
 box-shadow: 0 10px 28px rgba(35,47,132,.18);
}

.contact-tree-avatar,
.contact-direct-avatar {
 width: 42px;
 height: 42px;
 flex: 0 0 42px;
 border-radius: 50%;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 background: linear-gradient(135deg, #232f84, #5c6bc0);
 color: #fff;
 font-weight: 800;
}

.contact-tree-copy,
.contact-direct-copy {
 min-width: 0;
 display: flex;
 flex-direction: column;
 align-items: flex-start;
}

.contact-tree-name,
.contact-direct-name {
 color: #282f53;
 font-weight: 800;
 line-height: 1.2;
}

.contact-tree-role,
.contact-direct-role,
.contact-tree-company {
 color: #64748b;
 font-size: 11px;
 line-height: 1.25;
 margin-top: 2px;
}

.contact-tree-selected-badge {
 margin-top: 6px;
 padding: 3px 7px;
 border-radius: 999px;
 background: #232f84;
 color: #fff;
 font-size: 9px;
 font-weight: 800;
 text-transform: uppercase;
 letter-spacing: .04em;
}

.contact-tree-cycle {
 padding: 8px 12px;
 border-radius: 10px;
 background: rgba(220,53,69,.08);
 color: #b42332;
 font-size: 11px;
 font-weight: 700;
}

.contact-tree-help {
 text-align: center;
 color: #64748b;
 font-size: 11px;
 margin-top: 8px;
}

.contact-direct-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 gap: 12px;
}

.contact-direct-card {
 width: 100%;
 display: flex;
 align-items: center;
 gap: 11px;
 text-align: left;
 border: 1px solid #e5e9f2;
 border-radius: 13px;
 padding: 12px;
 background: #fff;
 color: inherit;
 cursor: pointer;
 transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.contact-direct-card:hover,
.contact-direct-card:focus-visible {
 transform: none;
 border-color: rgba(35,47,132,.35);
 box-shadow: 0 8px 20px rgba(15,23,42,.08);
 outline: none;
}

.contact-direct-labels {
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
 margin-top: 7px;
}

.contact-direct-label {
 display: inline-flex;
 margin-top: 0;
 padding: 4px 8px;
 border-radius: 999px;
 font-size: 10px;
 font-weight: 800;
}

.relationship-blue { background: #eaf0ff; color: #24478f; }
.relationship-indigo { background: #eeeaff; color: #5141a1; }
.relationship-teal { background: #e5f7f4; color: #176c63; }
.relationship-amber { background: #fff4d6; color: #8a6500; }
.relationship-purple { background: #f3e9ff; color: #7040a1; }
.relationship-red { background: #ffe9ec; color: #a82b3d; }
.relationship-grey { background: #eef1f5; color: #5b6472; }

.contact-direct-primary {
 color: #856404;
 font-size: 10px;
 font-weight: 700;
 margin-top: 5px;
}

.contact-direct-notes {
 color: #64748b;
 font-size: 10px;
 line-height: 1.35;
 margin-top: 5px;
}

.contact-direct-arrow {
 margin-left: auto;
 color: #94a3b8;
}

.contact-relationship-empty {
 min-height: 380px;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 text-align: center;
 color: #64748b;
}

.contact-relationship-empty-icon {
 width: 70px;
 height: 70px;
 border-radius: 20px;
 display: flex;
 align-items: center;
 justify-content: center;
 background: rgba(35,47,132,.10);
 color: #232f84;
 font-size: 28px;
 margin-bottom: 14px;
}

.contact-relationship-empty h4 {
 color: #282f53;
 margin-bottom: 4px;
}

.contact-relationship-empty-node {
 margin-top: 18px;
}

.contact-relationship-inline-empty {
 padding: 14px;
 border-radius: 12px;
 background: #f8fafc;
 color: #64748b;
 text-align: center;
}

body.dark-mode #contactRelationshipTreeModal .modal-content,
body.dark-mode #contactRelationshipTreeModal .modal-body,
body.dark-mode .contact-edit-section,
body.dark-mode .contact-relationship-section,
body.dark-mode .contact-tree-node,
body.dark-mode .contact-direct-card,
body.dark-mode .contact-tree-edge-label {
 background: #2E303A !important;
 border-color: #3a3d4d !important;
 color: #fff;
}

body.dark-mode #contactRelationshipTreeModal .modal-body {
 background: #20222c !important;
}

body.dark-mode .contact-relationship-inline-empty {
 background: #252731;
 border-color: #3a3d4d;
}


body.dark-mode .contact-tree-name,
body.dark-mode .contact-direct-name,
body.dark-mode .contact-relationship-section-title,
body.dark-mode .contact-relationship-empty h4 {
 color: #fff;
}

body.dark-mode .contact-tree-role,
body.dark-mode .contact-direct-role,
body.dark-mode .contact-tree-company,
body.dark-mode .contact-tree-help,
body.dark-mode .contact-direct-notes,
body.dark-mode .contact-relationship-inline-empty,
body.dark-mode .contact-relationship-empty {
 color: rgba(255,255,255,.65);
}

body.dark-mode .contact-org-tree li::before,
body.dark-mode .contact-org-tree li::after,
body.dark-mode .contact-org-tree ul ul::before {
 border-color: #5a5f70;
}

@media (max-width: 767px) {
 #contactRelationshipTreeModal .modal-dialog {
  margin: .5rem;
 }

 #contactRelationshipTreeModal .modal-body {
  padding: 12px;
 }

 .contact-relationship-section {
  padding: 12px;
 }

 .contact-tree-node {
  width: 190px;
 }

 .contact-direct-grid {
  grid-template-columns: 1fr;
 }
}
/* Relationship intelligence controls - version 5 */
#contactRelationshipTreeModal .contact-relationship-header-actions {
 display:flex;
 align-items:center;
 gap:12px;
}

#contactRelationshipTreeModal .contact-relationship-header-action {
 width:34px;
 height:34px;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 border:1px solid rgba(255,255,255,.30);
 border-radius:9px;
 background:rgba(255,255,255,.10);
 color:#fff;
 padding:0;
 cursor:pointer;
}

#contactRelationshipTreeModal .contact-relationship-header-action:hover,
#contactRelationshipTreeModal .contact-relationship-header-action:focus-visible {
 background:rgba(255,255,255,.20);
 color:#fff;
 outline:none;
}

#contactRelationshipTreeModal .modal-dialog.modal-fullscreen {
 max-width:none;
 width:100vw;
 height:100vh;
 margin:0;
}

#contactRelationshipTreeModal .modal-dialog.modal-fullscreen .modal-content {
 height:100vh;
 border-radius:0;
}

.contact-relationship-insights {
 display:grid;
 grid-template-columns:repeat(4, minmax(0, 1fr));
 gap:12px;
 margin-bottom:12px;
}

.contact-insight-card {
 min-width:0;
 display:flex;
 align-items:center;
 gap:11px;
 padding:13px;
 border:1px solid #e5e9f2;
 border-radius:14px;
 background:#fff;
 box-shadow:0 6px 18px rgba(15,23,42,.05);
}

.contact-insight-icon {
 width:40px;
 height:40px;
 flex:0 0 40px;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 border-radius:12px;
 background:rgba(35,47,132,.10);
 color:#232f84;
}

.contact-insight-copy {
 min-width:0;
 display:flex;
 flex-direction:column;
}

.contact-insight-copy small {
 color:#64748b;
 font-size:10px;
 font-weight:800;
 text-transform:uppercase;
 letter-spacing:.05em;
}

.contact-insight-copy strong {
 color:#282f53;
 font-size:19px;
 line-height:1.15;
 margin-top:2px;
}

.contact-insight-copy span {
 color:#64748b;
 font-size:10px;
 line-height:1.25;
 margin-top:2px;
}

.contact-insight-card.risk-low .contact-insight-icon {
 background:rgba(25,135,84,.12);
 color:#198754;
}

.contact-insight-card.risk-medium .contact-insight-icon {
 background:rgba(255,193,7,.18);
 color:#856404;
}

.contact-insight-card.risk-high .contact-insight-icon {
 background:rgba(220,53,69,.12);
 color:#dc3545;
}

.contact-risk-strip,
.contact-pipeline-strip {
 display:flex;
 align-items:center;
 flex-wrap:wrap;
 gap:8px;
 padding:10px 12px;
 margin-bottom:12px;
 border-radius:12px;
 font-size:11px;
}

.contact-risk-strip {
 background:rgba(255,193,7,.12);
 border:1px solid rgba(255,193,7,.28);
 color:#715500;
}

.contact-risk-strip span {
 display:inline-flex;
 align-items:center;
 padding:4px 8px;
 border-radius:999px;
 background:rgba(255,255,255,.65);
}

.contact-pipeline-strip {
 background:rgba(25,135,84,.09);
 border:1px solid rgba(25,135,84,.20);
 color:#146c43;
}

.contact-pipeline-strip span {
 color:#4b7463;
}

.contact-relationship-toolbar {
 position:sticky;
 top:-1px;
 z-index:12;
 display:flex;
 align-items:center;
 flex-wrap:wrap;
 gap:10px;
 padding:11px;
 margin-bottom:14px;
 border:1px solid #e5e9f2;
 border-radius:14px;
 background:rgba(255,255,255,.96);
 box-shadow:0 7px 20px rgba(15,23,42,.07);
 backdrop-filter:blur(8px);
}

.contact-relationship-search {
 min-width:250px;
 flex:1 1 280px;
 display:flex;
 align-items:center;
 gap:8px;
 padding:8px 10px;
 border:1px solid #d9dfec;
 border-radius:10px;
 background:#fff;
 color:#64748b;
}

.contact-relationship-search input {
 width:100%;
 border:0;
 outline:0;
 background:transparent;
 color:inherit;
 font-size:12px;
}

.contact-relationship-filters {
 display:flex;
 align-items:center;
 flex-wrap:wrap;
 gap:6px;
}

.contact-relationship-filter,
.contact-tree-control {
 display:inline-flex;
 align-items:center;
 justify-content:center;
 min-height:34px;
 border:1px solid #d9dfec;
 border-radius:9px;
 background:#fff;
 color:#475569;
 font-size:11px;
 font-weight:700;
 padding:6px 10px;
 cursor:pointer;
}

.contact-relationship-filter:hover,
.contact-relationship-filter:focus-visible,
.contact-tree-control:hover,
.contact-tree-control:focus-visible {
 border-color:rgba(35,47,132,.45);
 color:#232f84;
 outline:none;
}

.contact-relationship-filter.is-active {
 background:#232f84;
 border-color:#232f84;
 color:#fff;
}

.contact-tree-controls {
 display:flex;
 align-items:center;
 gap:5px;
 margin-left:auto;
}

.contact-tree-control {
 min-width:34px;
 padding:6px 8px;
}

.contact-tree-control span {
 font-size:10px;
 min-width:34px;
}

.contact-relationship-search-status {
 width:100%;
 display:none;
 color:#64748b;
 font-size:10px;
 padding-left:2px;
}

.contact-relationship-search-status:not(:empty) {
 display:block;
}

.contact-relationship-section-title {
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:12px;
}

.contact-relationship-section-title small {
 color:#64748b;
 font-size:10px;
 font-weight:600;
}

.contact-org-tree {
 --relationship-tree-scale:1;
 transform:scale(var(--relationship-tree-scale)) !important;
 transform-origin:top center !important;
 transition:transform .15s ease;
}

.contact-tree-node-wrap {
 display:inline-block;
 position:relative;
 z-index:2;
}

.contact-tree-card {
 width:245px;
 display:inline-flex;
 flex-direction:column;
 align-items:stretch;
 position:relative;
 z-index:2;
 border-radius:13px;
}

.contact-tree-node {
 width:245px;
 min-height:96px;
}

.contact-tree-card.is-search-dimmed {
 opacity:.24;
 filter:grayscale(.6);
}

.contact-tree-card.is-search-match .contact-tree-node {
 border-color:#f0ad00;
 box-shadow:0 0 0 4px rgba(240,173,0,.15), 0 10px 25px rgba(35,47,132,.13);
}

.contact-tree-metrics {
 display:flex;
 flex-wrap:wrap;
 gap:4px;
 margin-top:6px;
}

.contact-tree-metric {
 display:inline-flex;
 align-items:center;
 gap:4px;
 padding:3px 6px;
 border-radius:999px;
 background:#eef1f5;
 color:#5b6472;
 font-size:8px;
 font-weight:800;
 line-height:1.2;
 white-space:nowrap;
}

.contact-tree-metric.is-fresh { background:#e7f6ee; color:#146c43; }
.contact-tree-metric.is-warm { background:#fff4d6; color:#856404; }
.contact-tree-metric.is-stale,
.contact-tree-metric.is-danger { background:#ffe9ec; color:#a82b3d; }
.contact-tree-metric.is-info { background:#eaf0ff; color:#24478f; }
.contact-tree-metric.is-success { background:#e7f6ee; color:#146c43; }
.contact-tree-metric.is-purple { background:#f3e9ff; color:#7040a1; }
.contact-tree-metric.is-muted { background:#eef1f5; color:#6c757d; }

.contact-tree-quick-actions {
 display:flex;
 justify-content:center;
 gap:5px;
 margin-top:6px;
 min-height:28px;
}

.contact-tree-quick-action {
 width:28px;
 height:28px;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 border:1px solid #d9dfec;
 border-radius:8px;
 background:#fff;
 color:#475569;
 text-decoration:none !important;
 padding:0;
 cursor:pointer;
}

.contact-tree-quick-action:hover,
.contact-tree-quick-action:focus-visible {
 border-color:#232f84;
 color:#232f84;
 outline:none;
}

.contact-tree-branch-toggle {
 position:absolute;
 left:50%;
 bottom:-17px;
 z-index:5;
 transform:translateX(-50%) !important;
 min-width:42px;
 height:24px;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 gap:4px;
 border:1px solid #cbd5e1;
 border-radius:999px;
 background:#fff;
 color:#475569;
 font-size:9px;
 font-weight:800;
 padding:0 7px;
 cursor:pointer;
}

.contact-tree-branch-toggle:hover,
.contact-tree-branch-toggle:focus-visible {
 border-color:#232f84;
 color:#232f84;
 outline:none;
}

#contactRelationshipTreeModal .contact-org-tree li.is-collapsed > ul.contact-tree-children,
#contactRelationshipTreeModal .contact-org-tree li.is-collapsed:hover > ul.contact-tree-children,
#contactRelationshipTreeModal .contact-org-tree li.is-collapsed:focus-within > ul.contact-tree-children {
 display:none !important;
}

#contactRelationshipTreeModal .contact-org-tree li.is-collapsed > .contact-tree-branch-toggle {
 bottom:-12px;
}

.contact-direct-card {
 display:flex;
 flex-direction:column;
 align-items:stretch;
 gap:6px;
}

.contact-direct-main {
 width:100%;
 display:flex;
 align-items:center;
 gap:11px;
 text-align:left;
 border:0;
 background:transparent;
 color:inherit;
 padding:0;
 cursor:pointer;
}

.contact-direct-card .contact-tree-quick-actions {
 justify-content:flex-start;
 padding-left:53px;
 margin-top:0;
}

.contact-direct-card.is-filter-hidden,
.contact-direct-card.is-search-hidden,
.contact-direct-card.is-overflow-hidden {
 display:none !important;
}

.contact-direct-filter-empty {
 display:none;
 padding:14px;
 border-radius:12px;
 background:#f8fafc;
 color:#64748b;
 text-align:center;
}

.contact-direct-filter-empty.is-visible {
 display:block;
}

.contact-direct-show-all {
 display:block;
 margin:14px auto 0;
}

.contact-hierarchy-section.is-filter-hidden,
.contact-direct-section.is-filter-hidden {
 display:none !important;
}

body.dark-mode .contact-insight-card,
body.dark-mode .contact-relationship-toolbar,
body.dark-mode .contact-relationship-search,
body.dark-mode .contact-relationship-filter,
body.dark-mode .contact-tree-control,
body.dark-mode .contact-tree-quick-action,
body.dark-mode .contact-tree-branch-toggle {
 background:#2E303A;
 border-color:#3a3d4d;
 color:#e4e7ee;
}

body.dark-mode .contact-insight-copy strong {
 color:#fff;
}

body.dark-mode .contact-insight-copy small,
body.dark-mode .contact-insight-copy span,
body.dark-mode .contact-relationship-section-title small,
body.dark-mode .contact-relationship-search-status {
 color:rgba(255,255,255,.62);
}

body.dark-mode .contact-relationship-toolbar {
 background:rgba(46,48,58,.96);
}

body.dark-mode .contact-relationship-filter.is-active {
 background:#232f84;
 border-color:#232f84;
 color:#fff;
}

body.dark-mode .contact-risk-strip span {
 background:rgba(0,0,0,.16);
}

body.dark-mode .contact-direct-filter-empty {
 background:#252731;
 color:rgba(255,255,255,.65);
}

@media (max-width:1199px) {
 .contact-relationship-insights {
  grid-template-columns:repeat(2, minmax(0, 1fr));
 }
}

@media (max-width:767px) {
 .contact-relationship-insights {
  grid-template-columns:1fr;
 }

 .contact-relationship-toolbar {
  position:relative;
  top:auto;
 }

 .contact-relationship-search {
  min-width:100%;
 }

 .contact-tree-controls {
  width:100%;
  margin-left:0;
  justify-content:center;
 }

 .contact-tree-card,
 .contact-tree-node {
  width:205px;
 }
}



/* Dual-view controls and mobile-first refinements - v18 */
#contactRelationshipTreeModal .contact-relationship-view-toggle {
 display:inline-flex;
 align-items:center;
 gap:4px;
 padding:4px;
 border:1px solid rgba(255,255,255,.28);
 border-radius:11px;
 background:rgba(255,255,255,.10);
}

#contactRelationshipTreeModal .contact-relationship-view-button {
 min-height:31px;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 gap:6px;
 border:0;
 border-radius:8px;
 padding:6px 11px;
 background:transparent;
 color:rgba(255,255,255,.78);
 font-size:11px;
 font-weight:800;
 white-space:nowrap;
 cursor:pointer;
}

#contactRelationshipTreeModal .contact-relationship-view-button:hover,
#contactRelationshipTreeModal .contact-relationship-view-button:focus-visible {
 color:#fff;
 background:rgba(255,255,255,.10);
 outline:none;
}

#contactRelationshipTreeModal .contact-relationship-view-button.is-active {
 background:#fff;
 color:#232f84;
 box-shadow:0 4px 12px rgba(15,23,42,.16);
}

#contactRelationshipTreeModal .contact-relationship-view-button .view-label-short {
 display:none;
}

#contactRelationshipTreeModal[data-relationship-view="basic"] .relationship-advanced-header-action {
 display:none !important;
}

#contactRelationshipTreeModal[data-relationship-view="basic"] .contact-tree-card,
#contactRelationshipTreeModal[data-relationship-view="basic"] .contact-tree-node {
 width:220px;
}

#contactRelationshipTreeModal[data-relationship-view="basic"] .contact-tree-node {
 min-height:84px;
}

#contactRelationshipTreeModal[data-relationship-view="basic"] .contact-relationship-summary {
 margin-bottom:14px;
}

#contactRelationshipTreeModal[data-relationship-view="basic"] .contact-relationship-section {
 box-shadow:0 7px 18px rgba(15,23,42,.05);
}

#contactRelationshipTreeModal .contact-relationship-mode-loading {
 min-height:380px;
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 gap:12px;
 color:#64748b;
 text-align:center;
 padding:24px;
}

#contactRelationshipTreeModal .contact-relationship-mode-loading i {
 color:#232f84;
 font-size:30px;
}

#contactRelationshipTreeModal .contact-relationship-mode-loading strong {
 color:#282f53;
 font-size:14px;
}

#contactRelationshipTreeModal .contact-relationship-mode-loading span {
 max-width:360px;
 font-size:11px;
 line-height:1.45;
}

body.dark-mode #contactRelationshipTreeModal .contact-relationship-mode-loading strong {
 color:#fff;
}

@media (max-width:767.98px) {
 #contactRelationshipTreeModal {
  padding:0 !important;
 }

 #contactRelationshipTreeModal .modal-dialog,
 #contactRelationshipTreeModal .modal-dialog.modal-xl,
 #contactRelationshipTreeModal .modal-dialog.modal-fullscreen {
  width:100%;
  max-width:none;
  height:100%;
  min-height:100%;
  margin:0;
 }

 #contactRelationshipTreeModal .modal-content,
 #contactRelationshipTreeModal .modal-dialog.modal-fullscreen .modal-content {
  width:100%;
  height:100vh;
  height:100dvh;
  min-height:100vh;
  min-height:100dvh;
  border-radius:0;
 }

 #contactRelationshipTreeModal .modal-header {
  position:sticky;
  top:0;
  z-index:30;
  display:flex;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:9px;
  padding:11px 12px;
 }

 #contactRelationshipTreeModal .modal-title {
  flex:1 1 calc(100% - 44px);
  min-width:0;
  font-size:15px;
  line-height:1.25;
  padding-top:6px;
 }

 #contactRelationshipTreeModal .contact-relationship-header-actions {
  display:contents;
 }

 #contactRelationshipTreeModal .contact-relationship-close {
  order:2;
  margin-left:auto;
 }

 #contactRelationshipTreeModal .contact-relationship-view-toggle {
  order:3;
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  padding:4px;
 }

 #contactRelationshipTreeModal .contact-relationship-view-button {
  width:100%;
  min-height:36px;
 }

 #contactRelationshipTreeModal .relationship-advanced-header-action {
  display:none !important;
 }

 #contactRelationshipTreeModal .modal-body {
  flex:1 1 auto;
  min-height:0;
  padding:10px;
  overscroll-behavior:contain;
 }

 #contactRelationshipTreeModal .modal-footer {
  position:sticky;
  bottom:0;
  z-index:25;
  padding:8px 10px;
  background:var(--bs-body-bg, #fff);
 }

 #contactRelationshipTreeModal .modal-footer .btn {
  width:100%;
 }

 body.dark-mode #contactRelationshipTreeModal .modal-footer {
  background:#2E303A;
  border-top-color:#3a3d4d;
 }

 #contactRelationshipTreeModal .contact-relationship-summary {
  align-items:flex-start;
  gap:10px;
  padding:13px;
  border-radius:13px;
 }

 #contactRelationshipTreeModal .contact-relationship-summary h4 {
  font-size:18px;
 }

 #contactRelationshipTreeModal .contact-relationship-summary p {
  font-size:11px;
 }

 #contactRelationshipTreeModal .contact-relationship-count {
  min-width:96px;
  padding:8px 10px;
 }

 #contactRelationshipTreeModal .contact-relationship-count strong {
  font-size:21px;
 }

 #contactRelationshipTreeModal .contact-relationship-section {
  padding:11px;
  margin-bottom:12px;
  border-radius:13px;
 }

 #contactRelationshipTreeModal .contact-relationship-section-title {
  align-items:flex-start;
  flex-direction:column;
  gap:3px;
  margin-bottom:10px;
 }

 #contactRelationshipTreeModal .contact-tree-scroll {
  margin:0 -3px;
  padding:7px 3px 22px;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y;
  overscroll-behavior-x:contain;
 }

 #contactRelationshipTreeModal[data-relationship-view="basic"] .contact-tree-card,
 #contactRelationshipTreeModal[data-relationship-view="basic"] .contact-tree-node {
  width:178px;
 }

 #contactRelationshipTreeModal[data-relationship-view="basic"] .contact-tree-node {
  min-height:76px;
  gap:8px;
  padding:9px;
 }

 #contactRelationshipTreeModal[data-relationship-view="advanced"] .contact-tree-card,
 #contactRelationshipTreeModal[data-relationship-view="advanced"] .contact-tree-node {
  width:205px;
 }

 #contactRelationshipTreeModal .contact-tree-avatar,
 #contactRelationshipTreeModal .contact-direct-avatar {
  width:38px;
  height:38px;
  flex-basis:38px;
  font-size:12px;
 }

 #contactRelationshipTreeModal .contact-tree-name,
 #contactRelationshipTreeModal .contact-direct-name {
  font-size:12px;
 }

 #contactRelationshipTreeModal .contact-tree-role,
 #contactRelationshipTreeModal .contact-direct-role {
  font-size:10px;
 }

 #contactRelationshipTreeModal .contact-org-tree li {
  padding-left:6px !important;
  padding-right:6px !important;
 }

 #contactRelationshipTreeModal .contact-direct-grid {
  grid-template-columns:1fr;
  gap:9px;
 }

 #contactRelationshipTreeModal .contact-direct-card {
  padding:10px;
 }

 #contactRelationshipTreeModal .contact-relationship-insights {
  grid-template-columns:1fr;
  gap:8px;
 }

 #contactRelationshipTreeModal .contact-insight-card {
  padding:10px;
 }

 #contactRelationshipTreeModal .contact-relationship-toolbar {
  position:relative;
  top:auto;
  padding:9px;
  gap:8px;
 }

 #contactRelationshipTreeModal .contact-relationship-search {
  min-width:100%;
  flex-basis:100%;
 }

 #contactRelationshipTreeModal .contact-relationship-filters {
  width:100%;
  flex-wrap:nowrap;
  overflow-x:auto;
  padding-bottom:3px;
  -webkit-overflow-scrolling:touch;
 }

 #contactRelationshipTreeModal .contact-relationship-filter {
  flex:0 0 auto;
 }

 #contactRelationshipTreeModal .contact-tree-controls {
  width:100%;
  justify-content:space-between;
  overflow-x:auto;
 }

 #contactRelationshipTreeModal .contact-tree-control {
  flex:0 0 36px;
 }
}

@media (max-width:390px) {
 #contactRelationshipTreeModal .contact-relationship-view-button .view-label-full {
  display:none;
 }
 #contactRelationshipTreeModal .contact-relationship-view-button .view-label-short {
  display:inline;
 }
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: modals/delete-contact.css
   ========================================================== */
#deleteContactConfirmModal .modal-content {
 border: 0;
 border-radius: 14px;
 overflow: hidden;
 box-shadow: 0 18px 50px rgba(15,23,42,.20);
}
body.dark-mode #deleteContactConfirmModal .modal-content { background: #2E303A !important; }


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: modals/edit-activity.css
   ========================================================== */
#editActivityModal .modal-content::before,
#editActivityModal .modal-content::after,
#editActivityModal .modal-body::before,
#editActivityModal .modal-body::after {
 content: none !important;
 display: none !important;
 border: 0 !important;
 box-shadow: none !important;
 background: none !important;
}

#editActivityModal .modal-content {
 overflow: hidden;
 border: 0;
 border-radius: 14px;
 box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
}

#editActivityModal .modal-body {
 background: #f4f6fb;
 padding: 20px;
}

#editActivityModal .card.border {
 border: 1px solid #d9dfec !important;
 border-radius: 12px;
 background: #ffffff;
 box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
 overflow: hidden;
}

#editActivityModal .card.border > .card-header {
 background: linear-gradient(90deg, rgba(35,47,132,0.13), rgba(35,47,132,0.04));
 border-bottom: 1px solid #d9dfec;
 padding: 14px 18px;
}

#editActivityModal .card.border > .card-header h5 {
 display: flex;
 align-items: center;
 color: #232f84;
 font-weight: 700;
}

#editActivityModal .card.border > .card-header i {
 line-height: 1;
}

#editActivityModal .card.border > .card-body {
 padding: 18px;
}

#editActivityModal .form-label {
 font-weight: 600;
 color: #344054;
 margin-bottom: 6px;
}

#editActivityModal .form-control,
#editActivityModal .form-select {
 width: 100%;
 border-radius: 8px;
 border-color: #d9dfec;
}

#editActivityModal textarea.form-control {
 min-height: 110px;
}

#editActivityModal .edit-activity-checkbox-row,
#editActivityModal .edit-activity-staff-checkbox-row {
 display: flex;
 align-items: center;
 gap: 8px;
 margin: 0;
 padding: 6px 4px;
 cursor: pointer;
 line-height: 1.3;
 border-radius: 6px;
}

#editActivityModal .edit-activity-checkbox-row:hover,
#editActivityModal .edit-activity-staff-checkbox-row:hover {
 background: rgba(35,47,132,0.07);
}

#editActivityModal .edit-activity-checkbox-row input[type="checkbox"],
#editActivityModal .edit-activity-staff-checkbox-row input[type="checkbox"] {
 appearance: auto !important;
 -webkit-appearance: checkbox !important;
 width: 16px !important;
 height: 16px !important;
 min-width: 16px !important;
 min-height: 16px !important;
 margin: 0 !important;
 padding: 0 !important;
 position: static !important;
 opacity: 1 !important;
 border-radius: 2px !important;
 display: inline-block !important;
 flex: 0 0 auto !important;
}

#editActivityModal .edit-activity-staff-checkbox-list {
 border: 1px solid #d9dfec;
 border-radius: 8px;
 padding: 10px;
 max-height: 220px;
 overflow-y: auto;
 background: #ffffff;
}

#editActivityModal .edit-activity-next-step-panel,
#editActivityModal .edit-activity-calendar-panel,
#editActivityModal .edit-activity-new-contact-panel {
 display: none;
}

body.dark-mode #editActivityModal .modal-content,
body.dark-theme #editActivityModal .modal-content,
body.transparent-mode #editActivityModal .modal-content {
 background: #2E303A;
}

body.dark-mode #editActivityModal .modal-body,
body.dark-theme #editActivityModal .modal-body,
body.transparent-mode #editActivityModal .modal-body {
 background: #20222c;
}

body.dark-mode #editActivityModal .card.border,
body.dark-theme #editActivityModal .card.border,
body.transparent-mode #editActivityModal .card.border {
 background: #2E303A;
 border-color: #3a3d4d !important;
 box-shadow: none;
}

body.dark-mode #editActivityModal .card.border > .card-header,
body.dark-theme #editActivityModal .card.border > .card-header,
body.transparent-mode #editActivityModal .card.border > .card-header {
 background: rgba(255,255,255,0.06);
 border-bottom-color: #3a3d4d;
}

body.dark-mode #editActivityModal .card.border > .card-header h5,
body.dark-theme #editActivityModal .card.border > .card-header h5,
body.transparent-mode #editActivityModal .card.border > .card-header h5 {
 color: #ffffff;
}

body.dark-mode #editActivityModal .form-label,
body.dark-theme #editActivityModal .form-label,
body.transparent-mode #editActivityModal .form-label {
 color: rgba(255,255,255,0.82);
}

body.dark-mode #editActivityModal .edit-activity-staff-checkbox-list,
body.dark-theme #editActivityModal .edit-activity-staff-checkbox-list,
body.transparent-mode #editActivityModal .edit-activity-staff-checkbox-list {
 background: #252733;
 border-color: #3a3d4d;
}

body.dark-mode #editActivityModal .edit-activity-checkbox-row:hover,
body.dark-mode #editActivityModal .edit-activity-staff-checkbox-row:hover,
body.dark-theme #editActivityModal .edit-activity-checkbox-row:hover,
body.dark-theme #editActivityModal .edit-activity-staff-checkbox-row:hover,
body.transparent-mode #editActivityModal .edit-activity-checkbox-row:hover,
body.transparent-mode #editActivityModal .edit-activity-staff-checkbox-row:hover {
 background: rgba(255,255,255,0.06);
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: modals/edit-company-contact.css
   ========================================================== */
#editContactModal .modal-content::before,
#editContactModal .modal-content::after,
#editContactModal .modal-body::before,
#editContactModal .modal-body::after {
 content: none !important;
 display: none !important;
 border: 0 !important;
 box-shadow: none !important;
 background: none !important;
}

#editContactModal .modal-content {
 overflow: hidden;
}

#editContactModal .form-control,
#editContactModal .form-select {
 width: 100%;
}

#editContactModal #editContactTabs {
 background: #ffffff;
 border: 1px solid #d9dfec;
 border-radius: 12px;
 padding: 8px;
 box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
 gap: 6px;
}

#editContactModal #editContactTabs .nav-link {
 border-radius: 9px;
 font-weight: 700;
 color: #475569;
 padding: 9px 14px;
}

#editContactModal #editContactTabs .nav-link:hover {
 background: rgba(35,47,132,0.07);
 color: #232f84;
}

#editContactModal #editContactTabs .nav-link.active {
 background: #232f84;
 color: #ffffff;
 box-shadow: 0 6px 14px rgba(35,47,132,0.22);
}

#editContactModal .edit-contact-section-card {
 border: 1px solid #d9dfec !important;
 border-radius: 12px;
 background: #ffffff;
 box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
 overflow: hidden;
}

#editContactModal .edit-contact-section-card .card-header {
 background: linear-gradient(90deg, rgba(35,47,132,0.13), rgba(35,47,132,0.04));
 border-bottom: 1px solid #d9dfec;
 padding: 14px 18px;
}

#editContactModal .edit-contact-section-card .card-header h5 {
 display: flex;
 align-items: center;
 color: #232f84;
 font-weight: 700;
}

#editContactModal .edit-contact-section-card .card-header i {
 line-height: 1;
}

#editContactModal .edit-contact-section-card .card-body {
 padding: 18px;
}

body.dark-mode #editContactModal .modal-content {
 background: #2E303A;
}

body.dark-mode #editContactModal .modal-body {
 background: #20222c;
}

body.dark-mode #editContactModal #editContactTabs,
body.dark-mode #editContactModal .edit-contact-section-card {
 background: #2E303A;
 border-color: #3a3d4d !important;
 box-shadow: none;
}

body.dark-mode #editContactModal #editContactTabs .nav-link {
 color: rgba(255,255,255,0.72);
}

body.dark-mode #editContactModal #editContactTabs .nav-link:hover {
 background: rgba(255,255,255,0.06);
 color: #ffffff;
}

body.dark-mode #editContactModal #editContactTabs .nav-link.active {
 background: #232f84;
 color: #ffffff;
}

body.dark-mode #editContactModal .edit-contact-section-card .card-header {
 background: rgba(255,255,255,0.06);
 border-bottom-color: #3a3d4d;
}

body.dark-mode #editContactModal .edit-contact-section-card .card-header h5 {
 color: #ffffff;
}


#editContactModal .edit-contact-organisation-help {
 font-size: 12px;
 color: #6c757d;
 margin-top: 5px;
}

#editContactModal .edit-contact-selected-badges {
 min-height: 48px;
 border: 1px dashed #cfd6e4;
 border-radius: 12px;
 padding: 10px;
 background: rgba(248,250,252,0.75);
}

#editContactModal .edit-contact-group-badge {
 display: inline-flex;
 align-items: center;
 gap: 7px;
 padding: 7px 10px;
 border-radius: 999px;
 background: rgba(35,47,132,0.09);
 border: 1px solid rgba(35,47,132,0.18);
 color: #232f84;
 font-weight: 700;
 margin: 0 6px 6px 0;
}

#editContactModal .edit-contact-group-badge button {
 border: 0;
 background: transparent;
 color: inherit;
 padding: 0;
 line-height: 1;
 cursor: pointer;
}

#editContactModal .edit-contact-relationship-row {
 border: 1px solid #e5e9f2;
 border-radius: 12px;
 padding: 14px;
 background: rgba(248,250,252,0.75);
 margin-bottom: 12px;
}

body.dark-mode #editContactModal .edit-contact-organisation-help {
 color: rgba(255,255,255,0.62);
}

body.dark-mode #editContactModal .edit-contact-selected-badges,
body.dark-mode #editContactModal .edit-contact-relationship-row {
 background: rgba(255,255,255,0.03);
 border-color: #3a3d4d;
}

body.dark-mode #editContactModal .edit-contact-group-badge {
 background: rgba(255,255,255,0.08);
 color: #ffffff;
 border-color: rgba(255,255,255,0.16);
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: modals/edit-company.css
   ========================================================== */
/* Scoped Edit Company modal styling - visual only */
#editCompanyModal .modal-content::before,
#editCompanyModal .modal-content::after,
#editCompanyModal .modal-body::before,
#editCompanyModal .modal-body::after {
 content: none !important;
 display: none !important;
 border: 0 !important;
 box-shadow: none !important;
 background: none !important;
}

#editCompanyModal .modal-content {
 overflow: hidden;
 background: #fff;
 border: 0;
 border-radius: 12px;
}

#editCompanyModal .modal-body {
 background: #f4f6fb;
 padding: 18px;
}

#editCompanyModal .form-control,
#editCompanyModal .form-select {
 width: 100%;
}

/* Keep Select2 dropdowns inside the Edit Company modal stacking context.
   This prevents the Sector list appearing behind the Account Structure card/modal. */
#editCompanyModal .select2-container {
 width: 100% !important;
}

#editCompanyModal .select2-container--open {
 z-index: 1065 !important;
}

#editCompanyModal .select2-results__options {
 max-height: 280px !important;
 overflow-y: auto !important;
 overscroll-behavior: contain;
}

#editCompanyModal #editCompanyTabs {
 background: #ffffff;
 border: 1px solid #d9dfec;
 border-radius: 12px;
 padding: 8px;
 box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
 gap: 6px;
}

#editCompanyModal #editCompanyTabs .nav-link {
 border-radius: 9px;
 font-weight: 700;
 color: #475569;
 padding: 9px 14px;
}

#editCompanyModal #editCompanyTabs .nav-link:hover {
 background: rgba(35,47,132,0.07);
 color: #232f84;
}

#editCompanyModal #editCompanyTabs .nav-link.active {
 background: #232f84;
 color: #ffffff;
 box-shadow: 0 6px 14px rgba(35,47,132,0.22);
}

#editCompanyModal .edit-company-section-card {
 border: 1px solid #d9dfec !important;
 border-radius: 12px;
 background: #ffffff;
 box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
 overflow: hidden;
}

#editCompanyModal .edit-company-section-card .card-header {
 background: linear-gradient(90deg, rgba(35,47,132,0.13), rgba(35,47,132,0.04));
 border-bottom: 1px solid #d9dfec;
 padding: 14px 18px;
}

#editCompanyModal .edit-company-section-card .card-header h5 {
 display: flex;
 align-items: center;
 color: #232f84;
 font-weight: 700;
}

#editCompanyModal .edit-company-section-card .card-header i {
 line-height: 1;
}

#editCompanyModal .edit-company-section-card .card-body {
 padding: 18px;
}

#editCompanyModal .edit-company-subsection {
 border: 1px solid #d9dfec;
 border-radius: 10px;
 padding: 14px;
 margin-bottom: 14px;
 background: #fbfcff;
}

#editCompanyModal .edit-company-subsection:last-child {
 margin-bottom: 0;
}

#editCompanyModal .edit-company-subsection .d-flex h6 {
 color: #232f84;
 font-weight: 700;
}

#editCompanyModal .alert {
 border-radius: 10px;
}

#editCompanyModal .edit-company-tag-cloud-wrap {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 align-items: center;
}

#editCompanyModal .edit-company-tag-badge {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 color: #fff;
 padding: 6px 11px;
 border-radius: 999px;
 font-size: 12px;
 line-height: 1;
 box-shadow: 0 4px 10px rgba(15,23,42,0.10);
}

#editCompanyModal .edit-company-remove-tag,
#editCompanyModal .edit-company-remove-campaign,
#editCompanyModal .edit-company-remove-pending-tag,
#editCompanyModal .edit-company-remove-pending-campaign {
 border: 0;
 background: rgba(255,255,255,0.25);
 color: #fff;
 width: 18px;
 height: 18px;
 border-radius: 50%;
 line-height: 16px;
 padding: 0;
 cursor: pointer;
 font-size: 14px;
}

#editCompanyModal .edit-company-remove-tag:hover,
#editCompanyModal .edit-company-remove-campaign:hover,
#editCompanyModal .edit-company-remove-pending-tag:hover,
#editCompanyModal .edit-company-remove-pending-campaign:hover {
 background: rgba(0,0,0,0.25);
}

#editCompanyModal .edit-company-picker-box {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 align-items: center;
 min-height: 46px;
 padding: 11px;
 border: 1px dashed #cfd7e6;
 border-radius: 10px;
 background: #fbfcff;
}

#editCompanyModal .edit-company-empty-message {
 font-size: 13px;
 color: #6c757d;
}

#editCompanyModal .edit-company-section-title {
 font-size: 14px;
 font-weight: 700;
 margin-bottom: 8px;
 color: #282f53;
}

#editCompanyModal .edit-company-picker-row {
 align-items: flex-end;
}

#editCompanyModal .edit-company-picker-row .btn {
 min-height: 38px;
}

#editCompanyModal .edit-company-custom-field-card .form-label {
 font-weight: 600;
}

#editCompanyModal .edit-company-custom-field-type {
 font-size: 11px;
 text-transform: uppercase;
 letter-spacing: .02em;
}

#editCompanyModal select[multiple] {
 min-height: 110px;
}

#editCompanyModal .edit-company-metrix-inline {
 display: flex;
 align-items: stretch;
 width: 100%;
}

#editCompanyModal .edit-company-metrix-inline .form-control {
 flex: 1 1 auto;
 min-width: 0;
 border-top-right-radius: 0;
 border-bottom-right-radius: 0;
}

#editCompanyModal .edit-company-metrix-suffix {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 92px;
 padding: 0 12px;
 border: 1px solid #ced4da;
 border-left: 0;
 border-top-right-radius: 4px;
 border-bottom-right-radius: 4px;
 background: #f8f9fa;
 color: #495057;
 font-weight: 600;
 white-space: nowrap;
}

#editCompanyModal .edit-company-metrix-suffix.is-empty {
 display: none;
}

#editCompanyRemovedTags,
#editCompanyRemovedCampaigns {
 display: none;
}

body.dark-mode #editCompanyModal .modal-content {
 background: #2E303A;
}

body.dark-mode #editCompanyModal .modal-body {
 background: #20222c;
}

body.dark-mode #editCompanyModal #editCompanyTabs,
body.dark-mode #editCompanyModal .edit-company-section-card {
 background: #2E303A;
 border-color: #3a3d4d !important;
 box-shadow: none;
}

body.dark-mode #editCompanyModal #editCompanyTabs .nav-link {
 color: rgba(255,255,255,0.72);
}

body.dark-mode #editCompanyModal #editCompanyTabs .nav-link:hover {
 background: rgba(255,255,255,0.06);
 color: #ffffff;
}

body.dark-mode #editCompanyModal #editCompanyTabs .nav-link.active {
 background: #232f84;
 color: #ffffff;
}

body.dark-mode #editCompanyModal .edit-company-section-card .card-header {
 background: rgba(255,255,255,0.06);
 border-bottom-color: #3a3d4d;
}

body.dark-mode #editCompanyModal .edit-company-section-card .card-header h5,
body.dark-mode #editCompanyModal .edit-company-section-title,
body.dark-mode #editCompanyModal .edit-company-subsection .d-flex h6 {
 color: #ffffff;
}

body.dark-mode #editCompanyModal .edit-company-subsection,
body.dark-mode #editCompanyModal .edit-company-picker-box {
 background: rgba(255,255,255,0.03);
 border-color: #3a3d4d;
}

body.dark-mode #editCompanyModal .edit-company-metrix-suffix {
 background: rgba(255,255,255,0.06);
 border-color: #3a3d4d;
 color: #ffffff;
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: modals/edit-file.css
   ========================================================== */
#editDocumentModal .modal-content::before,
#editDocumentModal .modal-content::after,
#editDocumentModal .modal-body::before,
#editDocumentModal .modal-body::after {
 content: none !important;
 display: none !important;
 border: 0 !important;
 box-shadow: none !important;
 background: none !important;
}

#editDocumentModal .modal-content {
 overflow: hidden;
 background: #fff;
 border: 0;
 border-radius: 12px;
}

#editDocumentModal .modal-body {
 background: #f4f6fb;
 padding: 18px;
}

#editDocumentModal .form-control,
#editDocumentModal .form-select {
 width: 100%;
}

#editDocumentModal .edit-document-section-card {
 border: 1px solid #d9dfec !important;
 border-radius: 12px;
 background: #ffffff;
 box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
 overflow: hidden;
 margin-bottom: 18px;
}

#editDocumentModal .edit-document-section-card:last-child {
 margin-bottom: 0;
}

#editDocumentModal .edit-document-section-card .card-header {
 background: linear-gradient(90deg, rgba(35,47,132,0.13), rgba(35,47,132,0.04));
 border-bottom: 1px solid #d9dfec;
 padding: 14px 18px;
}

#editDocumentModal .edit-document-section-card .card-header h5 {
 display: flex;
 align-items: center;
 color: #232f84;
 font-weight: 700;
 margin-bottom: 0;
}

#editDocumentModal .edit-document-section-card .card-body {
 padding: 18px;
}

#editDocumentModal .edit-document-current-file {
 display: flex;
 align-items: center;
 gap: 14px;
 padding: 14px;
 border: 1px solid #e4e8f0;
 border-radius: 10px;
 background: #f8f9fc;
}

#editDocumentModal .edit-document-current-file-icon {
 width: 46px;
 min-width: 46px;
 height: 46px;
 border-radius: 10px;
 display: flex;
 align-items: center;
 justify-content: center;
 background: rgba(35,47,132,0.10);
 color: #232f84;
 font-size: 24px;
}


#editDocumentModal .edit-document-current-file strong,
#editDocumentModal .edit-document-replacement-preview strong {
 display: block;
 color: #20243f;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

#editDocumentModal .edit-document-kicker {
 display: block;
 color: #232f84;
 font-size: 11px;
 font-weight: 800;
 letter-spacing: .04em;
 text-transform: uppercase;
 margin-bottom: 2px;
}

#editDocumentModal .edit-document-divider {
 margin: 18px 0;
 border-color: #e5e9f1;
 opacity: 1;
}

#editDocumentModal .edit-document-meta-grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 10px 20px;
 margin-top: 16px;
}

#editDocumentModal .edit-document-meta-item small {
 display: block;
 color: #6c757d;
 margin-bottom: 2px;
}

#editDocumentModal .edit-document-dropzone {
 border: 2px dashed #232f84;
 border-radius: 12px;
 padding: 26px 20px;
 text-align: center;
 cursor: pointer;
 background: rgba(35,47,132,0.06);
 color: #282f53;
 transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

#editDocumentModal .edit-document-dropzone:hover,
#editDocumentModal .edit-document-dropzone.bg-light {
 background: rgba(35,47,132,0.12) !important;
 border-color: #232f84;
 transform: translateY(-1px);
}

#editDocumentModal .edit-document-dropzone i,
#editDocumentModal .edit-document-dropzone strong {
 color: #232f84;
}

#editDocumentModal .edit-document-replacement-preview {
 display: none;
 margin-top: 14px;
 padding: 12px 14px;
 border: 1px solid #d9dfec;
 border-radius: 10px;
 background: #f8f9fc;
}

#editDocumentModal .edit-document-replacement-preview.is-visible {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
}


#editDocumentModal .edit-document-replacement-icon {
 width: 46px;
 min-width: 46px;
 height: 46px;
 border-radius: 10px;
 display: flex;
 align-items: center;
 justify-content: center;
 background: rgba(35,47,132,0.10);
 color: #232f84;
 font-size: 23px;
}

#editDocumentModal .edit-document-loading {
 min-height: 240px;
 display: flex;
 align-items: center;
 justify-content: center;
}

body.dark-mode #editDocumentModal .modal-content {
 background: #2E303A;
}

body.dark-mode #editDocumentModal .modal-body {
 background: #20222c;
}

body.dark-mode #editDocumentModal .edit-document-section-card {
 background: #2E303A;
 border-color: #3a3d4d !important;
 box-shadow: none;
}

body.dark-mode #editDocumentModal .edit-document-section-card .card-header {
 background: rgba(255,255,255,0.06);
 border-bottom-color: #3a3d4d;
}

body.dark-mode #editDocumentModal .edit-document-section-card .card-header h5 {
 color: #ffffff;
}

body.dark-mode #editDocumentModal .edit-document-current-file,
body.dark-mode #editDocumentModal .edit-document-replacement-preview {
 background: rgba(255,255,255,0.03);
 border-color: #3a3d4d;
}

body.dark-mode #editDocumentModal .edit-document-current-file-icon {
 background: rgba(255,255,255,0.08);
 color: #ffffff;
}


body.dark-mode #editDocumentModal .edit-document-replacement-icon {
 background: rgba(255,255,255,0.08);
 color: #ffffff;
}

body.dark-mode #editDocumentModal .edit-document-current-file strong,
body.dark-mode #editDocumentModal .edit-document-replacement-preview strong {
 color: #ffffff;
}

body.dark-mode #editDocumentModal .edit-document-kicker {
 color: #aeb7ff;
}

body.dark-mode #editDocumentModal .edit-document-divider {
 border-color: #3a3d4d;
}

body.dark-mode #editDocumentModal .edit-document-meta-item small {
 color: rgba(255,255,255,0.58);
}

body.dark-mode #editDocumentModal .edit-document-dropzone {
 background: rgba(255,255,255,0.03);
 border-color: #3a3d4d;
 color: rgba(255,255,255,0.78);
}

body.dark-mode #editDocumentModal .edit-document-dropzone:hover,
body.dark-mode #editDocumentModal .edit-document-dropzone.bg-light {
 background: rgba(255,255,255,0.06) !important;
 border-color: rgba(255,255,255,0.20);
}

body.dark-mode #editDocumentModal .edit-document-dropzone i,
body.dark-mode #editDocumentModal .edit-document-dropzone strong {
 color: #ffffff;
}

@media (max-width: 767.98px) {
 #editDocumentModal .edit-document-meta-grid {
  grid-template-columns: 1fr;
 }
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: modals/edit-opportunity.css
   ========================================================== */
/* Scoped Edit Opportunity modal styling - visual only, matched to edit-company.php */
#editOpportunityModal .modal-content::before,
#editOpportunityModal .modal-content::after,
#editOpportunityModal .modal-body::before,
#editOpportunityModal .modal-body::after {
 content: none !important;
 display: none !important;
 border: 0 !important;
 box-shadow: none !important;
 background: none !important;
}

#editOpportunityModal .modal-content {
 overflow: hidden;
 background: #fff;
 border: 0;
 border-radius: 12px;
}

#editOpportunityModal .modal-body {
 background: #f4f6fb;
 padding: 18px;
}

#editOpportunityModal .form-control,
#editOpportunityModal .form-select {
 width: 100%;
}

#editOpportunityModal .card.border {
 border: 1px solid #d9dfec !important;
 border-radius: 12px;
 background: #ffffff;
 box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
 overflow: hidden;
}

#editOpportunityModal .card.border > .card-header {
 background: linear-gradient(90deg, rgba(35,47,132,0.13), rgba(35,47,132,0.04));
 border-bottom: 1px solid #d9dfec;
 padding: 14px 18px;
}

#editOpportunityModal .card.border > .card-header h5 {
 display: flex;
 align-items: center;
 color: #232f84;
 font-weight: 700;
}

#editOpportunityModal .card.border > .card-header i {
 line-height: 1;
}

#editOpportunityModal .card.border > .card-body {
 padding: 18px;
}

#editOpportunityModal .alert {
 border-radius: 10px;
}

#editOpportunityModal .edit-opportunity-checkbox-row,
#editOpportunityModal .edit-opportunity-staff-checkbox-row {
 display: flex;
 align-items: center;
 gap: 8px;
 margin: 0;
 padding: 6px 4px;
 cursor: pointer;
 line-height: 1.3;
 border-radius: 4px;
}

#editOpportunityModal .edit-opportunity-checkbox-row:hover,
#editOpportunityModal .edit-opportunity-staff-checkbox-row:hover {
 background: var(--bs-tertiary-bg, rgba(0,0,0,0.04));
}

#editOpportunityModal .edit-opportunity-checkbox-row input[type="checkbox"],
#editOpportunityModal .edit-opportunity-staff-checkbox-row input[type="checkbox"] {
 appearance: auto !important;
 -webkit-appearance: checkbox !important;
 width: 16px !important;
 height: 16px !important;
 min-width: 16px !important;
 min-height: 16px !important;
 margin: 0 !important;
 padding: 0 !important;
 position: static !important;
 opacity: 1 !important;
 border-radius: 2px !important;
 display: inline-block !important;
 flex: 0 0 auto !important;
}

#editOpportunityModal .edit-opportunity-staff-checkbox-list {
 border: 1px solid #d9dfec;
 border-radius: 10px;
 padding: 10px;
 max-height: 220px;
 overflow-y: auto;
 background: #fbfcff;
}

body.dark-mode #editOpportunityModal .modal-content {
 background: #2E303A;
}

body.dark-mode #editOpportunityModal .modal-body {
 background: #20222c;
}

body.dark-mode #editOpportunityModal .card.border {
 background: #2E303A;
 border-color: #3a3d4d !important;
 box-shadow: none;
}

body.dark-mode #editOpportunityModal .card.border > .card-header {
 background: rgba(255,255,255,0.06);
 border-bottom-color: #3a3d4d;
}

body.dark-mode #editOpportunityModal .card.border > .card-header h5 {
 color: #ffffff;
}

body.dark-mode #editOpportunityModal .edit-opportunity-staff-checkbox-list {
 background: rgba(255,255,255,0.03);
 border-color: #3a3d4d;
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: modals/edit-task-new.css
   ========================================================== */
/*
 Styling-only refresh for Edit Task modal.
 No markup, field names, IDs, hidden inputs, panels or buttons have been changed.
*/

#editTaskModal .modal-content::before,
#editTaskModal .modal-content::after,
#editTaskModal .modal-body::before,
#editTaskModal .modal-body::after {
 content: none !important;
 display: none !important;
 border: 0 !important;
 box-shadow: none !important;
 background: none !important;
}

#editTaskModal .modal-content {
 overflow: hidden;
 border-radius: 12px;
}

#editTaskModal .modal-body {
 padding: 18px;
}

#editTaskModal .form-control,
#editTaskModal .form-select {
 width: 100%;
}

#editTaskModal .card.border {
 border: 1px solid #d9dfec !important;
 border-radius: 12px;
 background: #ffffff;
 box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
 overflow: hidden;
}

#editTaskModal .card.border > .card-header {
 background: linear-gradient(90deg, rgba(35,47,132,0.13), rgba(35,47,132,0.04));
 border-bottom: 1px solid #d9dfec;
 padding: 14px 18px;
}

#editTaskModal .card.border > .card-header h5 {
 display: flex;
 align-items: center;
 color: #232f84;
 font-weight: 700;
}

#editTaskModal .card.border > .card-header i {
 line-height: 1;
}

#editTaskModal .card.border > .card-body {
 padding: 18px;
}

#editTaskModal label.form-label {
 font-weight: 600;
}

#editTaskModal .edit-task-checkbox-row,
#editTaskModal .edit-task-staff-checkbox-row {
 display: flex;
 align-items: center;
 gap: 8px;
 margin: 0;
 padding: 8px 10px;
 cursor: pointer;
 line-height: 1.3;
 border-radius: 8px;
 border: 1px solid transparent;
}

#editTaskModal .edit-task-checkbox-row:hover,
#editTaskModal .edit-task-staff-checkbox-row:hover {
 background: rgba(35,47,132,0.06);
 border-color: rgba(35,47,132,0.14);
}

#editTaskModal .edit-task-checkbox-row input[type="checkbox"],
#editTaskModal .edit-task-staff-checkbox-row input[type="checkbox"] {
 appearance: auto !important;
 -webkit-appearance: checkbox !important;
 width: 16px !important;
 height: 16px !important;
 min-width: 16px !important;
 min-height: 16px !important;
 margin: 0 !important;
 padding: 0 !important;
 position: static !important;
 opacity: 1 !important;
 border-radius: 2px !important;
 display: inline-block !important;
 flex: 0 0 auto !important;
}

#editTaskModal .edit-task-staff-checkbox-list {
 border: 1px solid #e5e9f2;
 border-radius: 12px;
 padding: 12px;
 max-height: 220px;
 overflow-y: auto;
 background: rgba(248,250,252,0.75);
}

#editTaskModal #editTaskNewContactFields,
#editTaskModal #editTaskNextStepVisitPanel,
#editTaskModal #editTaskNextStepOpportunityPanel {
 border: 1px solid #e5e9f2;
 border-radius: 12px;
 padding: 16px;
 background: rgba(248,250,252,0.75);
}

#editTaskModal #editTaskNextStepVisitPanel h5,
#editTaskModal #editTaskNextStepOpportunityPanel h5 {
 color: #232f84;
 font-weight: 700;
}

body.dark-mode #editTaskModal .modal-content {
 background: #2E303A;
}

body.dark-mode #editTaskModal .modal-body {
 background: #20222c;
}

body.dark-mode #editTaskModal .card.border {
 background: #2E303A;
 border-color: #3a3d4d !important;
 box-shadow: none;
}

body.dark-mode #editTaskModal .card.border > .card-header {
 background: rgba(255,255,255,0.06);
 border-bottom-color: #3a3d4d;
}

body.dark-mode #editTaskModal .card.border > .card-header h5 {
 color: #ffffff;
}

body.dark-mode #editTaskModal .edit-task-checkbox-row:hover,
body.dark-mode #editTaskModal .edit-task-staff-checkbox-row:hover {
 background: rgba(255,255,255,0.06);
 border-color: rgba(255,255,255,0.10);
}

body.dark-mode #editTaskModal .edit-task-staff-checkbox-list,
body.dark-mode #editTaskModal #editTaskNewContactFields,
body.dark-mode #editTaskModal #editTaskNextStepVisitPanel,
body.dark-mode #editTaskModal #editTaskNextStepOpportunityPanel {
 background: rgba(255,255,255,0.03);
 border-color: #3a3d4d;
}

body.dark-mode #editTaskModal #editTaskNextStepVisitPanel h5,
body.dark-mode #editTaskModal #editTaskNextStepOpportunityPanel h5 {
 color: #ffffff;
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: modals/edit-visit.css
   ========================================================== */
/* Scoped Edit Visit modal styling - matches Add Visit modal */
#editVisitModal .modal-body {
 background: #f4f6fb;
}

#editVisitModal .visit-section-card {
 border: 1px solid #d9dfec !important;
 border-radius: 12px;
 background: #ffffff;
 box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
 overflow: hidden;
}

#editVisitModal .visit-section-card .card-header {
 background: linear-gradient(90deg, rgba(35,47,132,0.13), rgba(35,47,132,0.04));
 border-bottom: 1px solid #d9dfec;
 padding: 14px 18px;
}

#editVisitModal .visit-section-card .card-header h5 {
 color: #232f84;
 font-weight: 700;
}

#editVisitModal .visit-section-card .card-body {
 padding: 18px;
}

#editVisitModal .edit-visit-checkbox-row,
#editVisitModal .edit-visit-staff-checkbox-row {
 display: flex;
 align-items: center;
 gap: 8px;
 margin: 0;
 padding: 7px 6px;
 cursor: pointer;
 line-height: 1.3;
 border-radius: 6px;
}

#editVisitModal .edit-visit-checkbox-row:hover,
#editVisitModal .edit-visit-staff-checkbox-row:hover {
 background: rgba(35,47,132,0.07);
}

#editVisitModal .edit-visit-checkbox-row input[type="checkbox"],
#editVisitModal .edit-visit-staff-checkbox-row input[type="checkbox"] {
 appearance: auto !important;
 -webkit-appearance: checkbox !important;
 width: 16px !important;
 height: 16px !important;
 min-width: 16px !important;
 min-height: 16px !important;
 margin: 0 !important;
 padding: 0 !important;
 position: static !important;
 opacity: 1 !important;
 border-radius: 2px !important;
 display: inline-block !important;
 flex: 0 0 auto !important;
}

#editVisitModal .edit-visit-checkbox-row span,
#editVisitModal .edit-visit-staff-checkbox-row span {
 display: inline-block;
}

#editVisitModal .edit-visit-staff-checkbox-list {
 border: 1px solid #d9dfec;
 border-radius: 8px;
 padding: 10px;
 max-height: 220px;
 overflow-y: auto;
 background: #fbfcff;
}

#editVisitModal .edit-visit-linked-panel {
 border: 1px solid #d9dfec;
 border-radius: 10px;
 background: #fbfcff;
 padding: 14px;
 margin-bottom: 18px;
}

#editVisitModal .edit-visit-linked-panel-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 margin-bottom: 8px;
}

#editVisitModal .edit-visit-linked-panel-title {
 font-weight: 700;
 color: #282f53;
 margin: 0;
}

#editVisitModal .edit-visit-linked-panel-meta {
 color: #6c757d;
 font-size: 13px;
 line-height: 1.4;
}

#editVisitModal .edit-visit-linked-panel-empty {
 color: #6c757d;
 font-size: 13px;
}

#editVisitModal .form-control,
#editVisitModal .form-select {
 width: 100%;
}

body.dark-mode #editVisitModal .modal-body {
 background: #20222c;
}

body.dark-mode #editVisitModal .visit-section-card {
 background: #2E303A;
 border-color: #3a3d4d !important;
 box-shadow: none;
}

body.dark-mode #editVisitModal .visit-section-card .card-header {
 background: rgba(255,255,255,0.06);
 border-bottom-color: #3a3d4d;
}

body.dark-mode #editVisitModal .visit-section-card .card-header h5,
body.dark-mode #editVisitModal .edit-visit-linked-panel-title {
 color: #ffffff;
}

body.dark-mode #editVisitModal .edit-visit-staff-checkbox-list,
body.dark-mode #editVisitModal .edit-visit-linked-panel {
 background: rgba(255,255,255,0.03);
 border-color: #3a3d4d;
}

body.dark-mode #editVisitModal .edit-visit-linked-panel-meta,
body.dark-mode #editVisitModal .edit-visit-linked-panel-empty {
 color: rgba(255,255,255,0.70);
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: modals/notification-details-modal.css
   ========================================================== */
#notificationDetailsModal .modal-content::before,
#notificationDetailsModal .modal-content::after,
#notificationDetailsModal .modal-body::before,
#notificationDetailsModal .modal-body::after {
 content: none !important;
 display: none !important;
 border: 0 !important;
 box-shadow: none !important;
 background: none !important;
}

#notificationDetailsModal .modal-content {
 overflow: hidden;
 border-radius: 12px;
 border: 0;
 box-shadow: 0 18px 45px rgba(15, 23, 42, 0.20);
}

#notificationDetailsModal .modal-body {
 padding: 18px;
 background: #f8fafc;
}

#notificationDetailsModal .notification-summary-card,
#notificationDetailsModal .notification-section-card {
 border: 1px solid #d9dfec;
 border-radius: 12px;
 background: #ffffff;
 box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
 overflow: hidden;
}

#notificationDetailsModal .notification-summary-card {
 padding: 18px;
 margin-bottom: 16px;
}

#notificationDetailsModal .notification-summary-icon {
 width: 48px;
 height: 48px;
 min-width: 48px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 background: rgba(35, 47, 132, 0.10);
 color: #232f84;
 font-size: 21px;
}

#notificationDetailsModal .notification-summary-title {
 margin: 0;
 color: #1f2937;
 font-size: 18px;
 font-weight: 700;
 line-height: 1.35;
}

#notificationDetailsModal .notification-summary-meta {
 margin-top: 4px;
 color: #64748b;
 font-size: 13px;
}

#notificationDetailsModal .notification-section-card {
 margin-bottom: 16px;
}

#notificationDetailsModal .notification-section-card:last-child {
 margin-bottom: 0;
}

#notificationDetailsModal .notification-section-header {
 display: flex;
 align-items: center;
 gap: 8px;
 padding: 13px 16px;
 background: linear-gradient(90deg, rgba(35,47,132,0.13), rgba(35,47,132,0.04));
 border-bottom: 1px solid #d9dfec;
 color: #232f84;
 font-weight: 700;
}

#notificationDetailsModal .notification-section-body {
 padding: 16px;
}

#notificationDetailsModal .notification-account-link {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 14px;
 width: 100%;
 color: inherit;
 text-decoration: none;
}

#notificationDetailsModal .notification-account-link:hover .notification-account-name {
 color: #232f84;
 text-decoration: underline;
}

#notificationDetailsModal .notification-account-name {
 color: #1f2937;
 font-size: 16px;
 font-weight: 700;
 line-height: 1.3;
}

#notificationDetailsModal .notification-account-meta {
 margin-top: 3px;
 color: #64748b;
 font-size: 13px;
}

#notificationDetailsModal .notification-account-arrow {
 color: #232f84;
 font-size: 17px;
}

#notificationDetailsModal .notification-detail-grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 12px;
}

#notificationDetailsModal .notification-detail-item {
 padding: 12px;
 border: 1px solid #e5e9f2;
 border-radius: 9px;
 background: #fbfcfe;
}

#notificationDetailsModal .notification-detail-label {
 display: block;
 margin-bottom: 4px;
 color: #64748b;
 font-size: 11px;
 font-weight: 700;
 letter-spacing: 0.04em;
 text-transform: uppercase;
}

#notificationDetailsModal .notification-detail-value {
 color: #1f2937;
 font-size: 14px;
 font-weight: 600;
 word-break: break-word;
}

#notificationDetailsModal .notification-description {
 margin: 0;
 color: #334155;
 line-height: 1.6;
 white-space: pre-wrap;
 word-break: break-word;
}

#notificationDetailsModal .notification-loading {
 min-height: 220px;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
 gap: 10px;
 color: #64748b;
}

#notificationDetailsModal .notification-error {
 margin: 0;
}

#notificationDetailsModal .modal-footer {
 background: #ffffff;
 border-top: 1px solid #e5e9f2;
}

@media (max-width: 575.98px) {
 #notificationDetailsModal .modal-dialog {
  margin: 0.75rem;
 }

 #notificationDetailsModal .notification-detail-grid {
  grid-template-columns: 1fr;
 }

 #notificationDetailsModal .modal-footer {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
 }

 #notificationDetailsModal .modal-footer .btn {
  width: 100%;
 }
}

body.dark-mode #notificationDetailsModal .modal-content,
body.dark-mode #notificationDetailsModal .modal-footer {
 background: #2E303A;
}

body.dark-mode #notificationDetailsModal .modal-body {
 background: #20222c;
}

body.dark-mode #notificationDetailsModal .notification-summary-card,
body.dark-mode #notificationDetailsModal .notification-section-card {
 background: #2E303A;
 border-color: #3a3d4d;
 box-shadow: none;
}

body.dark-mode #notificationDetailsModal .notification-section-header {
 background: rgba(255,255,255,0.06);
 border-bottom-color: #3a3d4d;
 color: #ffffff;
}

body.dark-mode #notificationDetailsModal .notification-summary-title,
body.dark-mode #notificationDetailsModal .notification-account-name,
body.dark-mode #notificationDetailsModal .notification-detail-value,
body.dark-mode #notificationDetailsModal .notification-description {
 color: #ffffff;
}

body.dark-mode #notificationDetailsModal .notification-summary-meta,
body.dark-mode #notificationDetailsModal .notification-account-meta,
body.dark-mode #notificationDetailsModal .notification-detail-label {
 color: rgba(255,255,255,0.65);
}

body.dark-mode #notificationDetailsModal .notification-detail-item {
 background: rgba(255,255,255,0.03);
 border-color: #3a3d4d;
}

body.dark-mode #notificationDetailsModal .notification-summary-icon {
 background: rgba(255,255,255,0.08);
 color: #ffffff;
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: modals/standalone-site-survey.css
   ========================================================== */
/* Match Choices.js dropdown appearance with Bootstrap form-control */
  .choices__inner {
    padding: 0.375rem 0.75rem;  /* Adjust padding to match form-control */
    border-radius: 0.25rem;     /* Bootstrap's default border-radius */
    border-color: #ced4da;      /* Bootstrap's default border color */
    font-size: 1rem;            /* Same font size as form-control */
  }

  
  .choices__list--single .choices__item {
    padding-left: 0;            /* Remove extra padding for single selects */
    line-height: 1.5;           /* Match the line height to form-control */
  }
  
  .choices__input {
    min-height: auto;           /* Ensure the height remains consistent */
    padding: 0;                 /* Remove padding from the input */
  }

  /* Adjust height for multi-select inputs to match */
  .choices[data-type*="select-multiple"] .choices__inner {
    height: auto;
  }


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/account-add.css
   ========================================================== */
.account-create-tabs{
 gap:10px;
 border-bottom:1px solid #e9edf4;
 padding-bottom:12px;
 margin-bottom:20px;
}
.account-create-tabs .nav-link{
 border:1px solid #e9edf4;
 border-radius:10px;
 color:#282f53;
 font-weight:600;
 padding:10px 16px;
 background:#fff;
}
.account-create-tabs .nav-link.active{
 background:var(--primary-bg-color);
 color:#fff;
 border-color:var(--primary-bg-color);
}
.account-form-section{
 border:1px solid #e9edf4;
 border-radius:12px;
 overflow:hidden;
 background:#fff;
 box-shadow:0 0.125rem 0.25rem rgba(0,0,0,0.04);
}
.account-form-section + .account-form-section{
 margin-top:20px;
}
.account-form-section .section-header{
 padding:14px 18px;
 border-bottom:1px solid #e9edf4;
 background:#f9fafc;
}
.account-form-section .section-header h4{
 margin:0;
 font-size:1rem;
 font-weight:700;
 color:#282f53;
}
.account-form-section .section-body{
 padding:18px;
}
.account-form-actions{
 margin-top:20px;
 display:flex;
 gap:10px;
 flex-wrap:wrap;
}
.small-select-wrap{
 max-width:160px;
}
.account-manager-picker{
 position:relative;
}
.account-manager-results{
 display:none;
 position:absolute;
 left:0;
 right:0;
 top:100%;
 z-index:5000;
 max-height:260px;
 overflow-y:auto;
 background:#fff;
 border:1px solid #d8dde8;
 border-radius:0 0 10px 10px;
 box-shadow:0 10px 24px rgba(15,23,42,0.12);
}
.account-manager-result{
 padding:9px 12px;
 cursor:pointer;
 border-bottom:1px solid #f1f3f7;
}
.account-manager-result:hover,
.account-manager-result.active{
 background:#f6f8fb;
}
.account-manager-name{
 font-weight:600;
 color:#282f53;
}
.account-manager-email{
 font-size:12px;
 color:#6c757d;
}
.account-manager-clear{
 margin-top:6px;
 display:none;
}
@media (max-width: 767px){
 .account-create-tabs{
  gap:8px;
 }
 .account-create-tabs .nav-link{
  width:100%;
  text-align:left;
 }
 .small-select-wrap{
  max-width:100%;
 }
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/account-footer.css
   ========================================================== */
.footer {
    width: 100%;
    text-align: center;
}

.footer .inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px 15px;
    text-align: center;
}

.footer .inner > div {
    text-align: center;
}

.footer a {
    display: inline-block;
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/account-list2.css
   ========================================================== */
.dt-buttons.btn-group {
  position: relative !important;
  inset-block-end: 0 !important;
  inset-inline-start: 0px !important;
 /* background: var(--primary-bg-color) !important;*/
}

a{
    text-decoration: none !important;
}
/* Add spacing for export buttons */

.dt-buttons .btn {
    margin-right: 5px !important;  /* Space between buttons */
}

.dt-buttons .btn:last-child {
    margin-right: 0 !important; /* No extra space on the last button */
}

.export-buttons {
    margin-bottom: 10px;
}

/* Dropdown menu: compact & app-like */
.dropdown-menu {
    font-size: 0.8rem !important;
    margin: 0;
    padding: 0;
    min-width: 160px;
    border-radius: 0.2rem;
    background-color: #e5e5e5; /* Dark app-style background */
    border: 1px solid #bfbfbf;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

/* Force dropdown to open to the left of the button */
.dropdown-menu-left-fixed {
    right: 0;                    /* Align the right edge of the menu with the button */
    left: auto;                  /* Prevent default left alignment */
    transform: translateX(-100%); /* Move it fully to the left of the button */
    position: absolute;         /* Ensure it positions absolutely relative to the button */
    top: 100%;                  /* Drop below the button */
    z-index: 1050;              /* Make sure it's above other elements */
    display: block;             /* Bootstrap sets this via JavaScript, but add for safety */
    margin-top: 0.25rem;
}


/* Menu items: tighter padding and modern look */
.dropdown-item {
    padding: 0;
    line-height: 0.7;
    color: #000 !important;
    font-weight: 400;
    background-color: #e5e5e5;
    white-space: nowrap;
    transition: background-color 0.2s;
}

/* Hover effect: light up like desktop UI */
.dropdown-item:hover {
    background-color: #e5e5e5;
    color: #000 !important;
}

/* Hide Bootstrap caret on toggle */
.dropdown-toggle::after {
    display: none;
}

/* Hamburger button: minimalist and clean */
.btn-hamburger {
    padding: 0;
    background-color: transparent;
    border: none;
    color: #e0e0e0;
}

/* Submenu: dark and compact, opens to the right */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    right: 100%;
    left: auto;
    margin-top: 0;
    margin-left: 0;
    padding: 0 !important;
    font-size: 0.8rem !important;
    background-color: #e5e5e5;
    border: 1px solid #bfbfbf;
    border-radius: 0.2rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: none;
    position: absolute;
    z-index: 1050;
}

.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

/* Optional submenu arrow */
/*.dropdown-submenu > a::after {
    content: "▶";
    float: right;
    margin-left: 0.5rem;
    font-size: 0.6rem;
    opacity: 0.6;
}
*/


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/account-listv2.css
   ========================================================== */
.dt-buttons.btn-group{
 position:relative !important;
 inset-block-end:0 !important;
 inset-inline-start:0 !important;
}

a{
 text-decoration:none !important;
}

.dt-buttons .btn{
 margin-right:5px !important;
}

.dt-buttons .btn:last-child{
 margin-right:0 !important;
}

/* Keep Columns button visually separated from Copy */
.dt-buttons .btn.account-columns-btn{
 margin-right:20px !important;
}

/* DataTables Columns dropdown selected-state indicator */
div.dt-button-collection .buttons-columnVisibility{
 position:relative !important;
 display:block !important;
 width:100% !important;
 text-align:left !important;
 padding-left:2rem !important;
 color:inherit !important;
 background:transparent !important;
 border:0 !important;
 box-shadow:none !important;
}

/* DataTables may use active, dt-button-active, or aria-pressed */
div.dt-button-collection .buttons-columnVisibility.active::before,
div.dt-button-collection .buttons-columnVisibility.dt-button-active::before,
div.dt-button-collection .buttons-columnVisibility[aria-pressed="true"]::before{
 content:"\2713";
 position:absolute;
 left:0.75rem;
 top:50%;
 transform:translateY(-50%);
 font-weight:bold;
 font-size:0.85rem;
 color:inherit;
}

div.dt-button-collection .buttons-columnVisibility:hover{
 background:rgba(128,128,128,0.12) !important;
 color:inherit !important;
}

.export-buttons{
 margin-bottom:10px;
}

/* Let dropdown colours come from the system theme */
.dropdown-menu{
 font-size:0.8rem !important;
 min-width:160px;
}

/* Keep dropdown anchored properly inside table cell */
td .dropdown{
 position:relative;
 display:inline-block;
}

/* Actions hamburger menu: align menu to the right edge of the button so it opens left */
.dropdown-menu-left-fixed{
 right:0 !important;
 left:auto !important;
 transform:none !important;
 position:absolute !important;
 top:100% !important;
 z-index:3000 !important;
 margin-top:0.25rem !important;
}

/* Standard dropdown items - colours inherited from system theme */
.dropdown-item{
 padding:0.45rem 0.75rem;
 line-height:1.2;
 white-space:nowrap;
}

/* Remove bootstrap caret */
.dropdown-toggle::after{
 display:none;
}

/* Hamburger button */
.btn-hamburger{
 padding:0;
 background-color:transparent;
 border:none;
 color:inherit;
 line-height:1;
}

.btn-hamburger:focus,
.btn-hamburger:hover{
 background-color:transparent !important;
 box-shadow:none !important;
}

/* Submenu wrapper */
.dropdown-submenu{
 position:relative;
}

/* Child submenu opens to the left so it does not run off-screen */
.dropdown-submenu > .dropdown-menu{
 top:0 !important;
 right:100% !important;
 left:auto !important;
 margin-top:0 !important;
 margin-right:0.15rem !important;
 margin-left:0 !important;
 padding:0 !important;
 font-size:0.8rem !important;
 display:none;
 position:absolute !important;
 z-index:3010 !important;
 min-width:180px;
 transform:none !important;
}

.dropdown-submenu:hover > .dropdown-menu,
.dropdown-submenu:focus-within > .dropdown-menu{
 display:block;
}

.dropdown-submenu > a.dropdown-item{
 display:flex;
 align-items:center;
 justify-content:space-between;
}

/* Left-facing submenu indicator */
.dropdown-submenu > a.dropdown-item::before{
 content:"◀";
 font-size:0.65rem;
 margin-right:0.5rem;
 opacity:0.7;
}

.dropdown-submenu > a.dropdown-item::after{
 content:"";
 margin-left:0;
}

/* DataTables buttons popup should not inherit hamburger positioning */
.dt-button-collection{
 min-width:220px !important;
}

.dt-button-collection .dropdown-menu,
div.dt-button-collection{
 transform:none !important;
 top:auto !important;
 left:auto !important;
 right:auto !important;
}

.account-v2-toolbar-note{
 font-size:12px;
 color:#6c757d;
}

#accounts{
 width:100% !important;
}

#accounts thead th{
 white-space:nowrap !important;
 font-size:12px;
 vertical-align:middle;
 background-color:inherit !important;
 color:inherit !important;
}

#accounts thead th *,
#accounts_wrapper table.dataTable thead th,
#accounts_wrapper table.dataTable thead td{
 white-space:nowrap !important;
}
#accounts tbody td{
 vertical-align:middle;
}

#accounts td:last-child{
 white-space:nowrap;
}

.account-v2-address,
.account-v2-outcome,
.account-v2-opportunity,
.account-v2-task{
 white-space:nowrap !important;
}

/* Let linked company names follow the active table/theme colour */
#accounts tbody td a,
#accounts tbody td a strong{
 color:inherit !important;
}

#accounts tbody td a:hover,
#accounts tbody td a:hover strong{
 color:inherit !important;
 text-decoration:underline !important;
}

/* CSS Cleanup V1: explicit dark header override for this ID-scoped DataTable. */
body.dark-mode #accounts thead th,
body.dark-mode #accounts thead td {
 background-color:#2e303a !important;
 color:#f4f6fb !important;
 border-color:#454957 !important;
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/account-open-file.css
   ========================================================== */
body.crm-file-viewer {font-family:Arial,sans-serif;background:#f6f7fb;color:#282f53;margin:0;padding:30px}
body.crm-file-viewer .box {max-width:680px;margin:40px auto;background:#fff;border-radius:14px;padding:24px;box-shadow:0 10px 30px rgba(15,23,42,.08)}
body.crm-file-viewer h1 {font-size:22px;margin:0 0 10px}
body.crm-file-viewer .muted {color:#6c757d}
body.crm-file-viewer .bar-title-wrap {min-width:0;}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/account-review.css
   ========================================================== */
.acr-stat,.acr-card{background:#fff;border:1px solid #e8ebf1;border-radius:14px;box-shadow:0 7px 22px rgba(15,23,42,.06)}.acr-stat{padding:15px;height:100%}.acr-value{font-size:24px;font-weight:800;color:#282f53}.acr-label{font-size:12px;color:#788292;margin-top:4px}.acr-card{overflow:hidden}.acr-head{padding:16px 18px;border-bottom:1px solid #e8ebf1;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.acr-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}.acr-reason{min-width:260px;max-width:430px;white-space:normal;font-size:12px;color:#697386;line-height:1.45}.acr-company{font-weight:800;color:#282f53}.acr-assignment{font-size:11px;color:#778090;white-space:normal;min-width:180px}.acr-row-actions{display:flex;gap:5px;flex-wrap:wrap;min-width:210px}.acr-row-actions .form-select{min-width:160px}.badge-snoozed{background:#ffc107;color:#1f2937}.badge-task{background:#198754}.badge-new{background:#dc3545}body.dark-mode .acr-stat,body.dark-mode .acr-card{background:#2E303A!important;border-color:#3a3d4d!important}body.dark-mode .acr-value,body.dark-mode .acr-company{color:#fff!important}body.dark-mode .acr-label,body.dark-mode .acr-reason,body.dark-mode .acr-assignment{color:rgba(255,255,255,.62)!important}@media(max-width:767px){.acr-actions{width:100%;margin-left:0}.acr-actions .btn{flex:1}.acr-row-actions{min-width:260px}}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/account-sidebar.css
   ========================================================== */
/* ================================
   Wider right sidebar
================================ */
.sidebar-right {
 width: 520px !important;
 max-width: none !important;
}

.sidebar {
 max-width: none !important;
}

.sidebar-animate.sidebar-right {
 transform: translateX(520px);
}

.sidebar-animate.sidebar-right.sidebar-open,
.sidebar-animate.sidebar-right.active,
.sidebar-right.sidebar-open,
.sidebar-right.active {
 right: 0 !important;
 transform: translateX(0);
}

@media (max-width: 768px) {
 .sidebar-right {
  width: 100% !important;
 }

 .sidebar-animate.sidebar-right {
  transform: translateX(100%);
 }

 .sidebar-animate.sidebar-right.sidebar-open,
 .sidebar-animate.sidebar-right.active,
 .sidebar-right.sidebar-open,
 .sidebar-right.active {
  transform: translateX(0);
 }
}

/* ================================
   Campaign sidebar tab
   This must NOT use timeline-task
================================ */
#sidebar-side2 {
 padding: 0;
 margin: 0;
}

#sidebar-side2 .timeline-task::before,
#sidebar-side2.timeline-task::before,
#sidebar-side2 .task-list::before,
#sidebar-side2.task-list::before {
 display: none !important;
 content: none !important;
}

#sidebar-side2 ul,
#sidebar-side2 li {
 list-style: none !important;
}

.campaign-sidebar-header {
 padding: 16px 18px 8px 18px;
 border-bottom: 1px solid rgba(0,0,0,0.06);
}

.campaign-sidebar-heading {
 font-size: 15px;
 font-weight: 700;
 color: #1f2937;
}

.campaign-sidebar-subheading {
 font-size: 12px;
 color: #6b7280;
 margin-top: 2px;
}

.campaign-sidebar-content {
 padding: 0;
 margin: 0;
}

.campaign-sidebar-wrap {
 padding: 14px;
}

.campaign-sidebar-card {
 background: #ffffff;
 border: 1px solid #e5e7eb;
 border-radius: 14px;
 padding: 14px;
 margin-bottom: 12px;
 box-shadow: 0 4px 12px rgba(15,23,42,0.06);
}

.campaign-sidebar-top {
 display: flex;
 align-items: flex-start;
 gap: 12px;
}

.campaign-sidebar-icon {
 width: 38px;
 height: 38px;
 min-width: 38px;
 border-radius: 12px;
 background: rgba(35,47,132,0.1);
 color: #232f84;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 16px;
}

.campaign-sidebar-main {
 flex: 1;
 min-width: 0;
}

.campaign-sidebar-title {
 font-size: 14px;
 font-weight: 700;
 color: #111827;
 line-height: 1.25;
}

.campaign-sidebar-meta {
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
 margin-top: 8px;
}

.campaign-sidebar-pill,
.campaign-sidebar-status {
 display: inline-flex;
 align-items: center;
 border-radius: 999px;
 padding: 4px 8px;
 font-size: 11px;
 font-weight: 700;
 line-height: 1;
}

.campaign-sidebar-pill {
 background: #eef2ff;
 color: #232f84;
}

.campaign-sidebar-status {
 background: #f3f4f6;
 color: #374151;
}

.campaign-status-added {
 background: #e0f2fe;
 color: #0369a1;
}

.campaign-status-contacted {
 background: #ede9fe;
 color: #6d28d9;
}

.campaign-status-interested {
 background: #dcfce7;
 color: #166534;
}

.campaign-status-not-interested {
 background: #fee2e2;
 color: #991b1b;
}

.campaign-status-follow-up {
 background: #fef3c7;
 color: #92400e;
}

.campaign-status-converted {
 background: #d1fae5;
 color: #065f46;
}

.campaign-status-removed {
 background: #e5e7eb;
 color: #4b5563;
}

.campaign-sidebar-description {
 margin-top: 10px;
 font-size: 12px;
 color: #6b7280;
 line-height: 1.45;
}

.campaign-sidebar-details {
 margin-top: 12px;
 border-top: 1px solid #eef2f7;
 padding-top: 10px;
}

.campaign-sidebar-detail-row {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 10px;
 margin-bottom: 8px;
 font-size: 12px;
}

.campaign-sidebar-detail-row span {
 color: #6b7280;
}

.campaign-sidebar-detail-row span i {
 width: 15px;
 color: #232f84;
}

.campaign-sidebar-detail-row strong {
 color: #111827;
 font-weight: 600;
 text-align: right;
}

.campaign-sidebar-notes {
 margin-top: 10px;
 border-radius: 10px;
 background: #f8fafc;
 padding: 10px;
 display: flex;
 gap: 8px;
 font-size: 12px;
 color: #475569;
 line-height: 1.4;
}

.campaign-sidebar-notes i {
 color: #232f84;
 margin-top: 2px;
}

.campaign-sidebar-empty {
 margin: 16px;
 padding: 20px 14px;
 border: 1px dashed #cbd5e1;
 border-radius: 14px;
 text-align: center;
 background: #f8fafc;
}

.campaign-sidebar-empty-icon {
 width: 46px;
 height: 46px;
 border-radius: 50%;
 margin: 0 auto 10px auto;
 display: flex;
 align-items: center;
 justify-content: center;
 background: rgba(35,47,132,0.1);
 color: #232f84;
 font-size: 18px;
}

.campaign-sidebar-empty-title {
 font-weight: 700;
 color: #111827;
 margin-bottom: 4px;
}

.campaign-sidebar-empty-text {
 font-size: 12px;
 color: #6b7280;
}

/* ================================
   Dark mode support
================================ */
body.dark-mode .campaign-sidebar-heading,
.dark-mode .campaign-sidebar-heading {
 color: #f9fafb;
}

body.dark-mode .campaign-sidebar-subheading,
.dark-mode .campaign-sidebar-subheading {
 color: #cbd5e1;
}

body.dark-mode .campaign-sidebar-card,
.dark-mode .campaign-sidebar-card {
 background: #1f2937;
 border-color: rgba(255,255,255,0.1);
 box-shadow: none;
}

body.dark-mode .campaign-sidebar-title,
.dark-mode .campaign-sidebar-title,
body.dark-mode .campaign-sidebar-detail-row strong,
.dark-mode .campaign-sidebar-detail-row strong,
body.dark-mode .campaign-sidebar-empty-title,
.dark-mode .campaign-sidebar-empty-title {
 color: #f9fafb;
}

body.dark-mode .campaign-sidebar-description,
.dark-mode .campaign-sidebar-description,
body.dark-mode .campaign-sidebar-detail-row span,
.dark-mode .campaign-sidebar-detail-row span,
body.dark-mode .campaign-sidebar-empty-text,
.dark-mode .campaign-sidebar-empty-text {
 color: #cbd5e1;
}

body.dark-mode .campaign-sidebar-details,
.dark-mode .campaign-sidebar-details {
 border-top-color: rgba(255,255,255,0.1);
}

body.dark-mode .campaign-sidebar-notes,
.dark-mode .campaign-sidebar-notes,
body.dark-mode .campaign-sidebar-empty,
.dark-mode .campaign-sidebar-empty {
 background: rgba(255,255,255,0.04);
 border-color: rgba(255,255,255,0.12);
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/account-template1.css
   ========================================================== */
.dropdown-submenu {
    position: relative;
}
.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}
.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}
.dropdown-submenu > .dropdown-toggle:after {
    float: right;
    margin-top: 0.4em;
}

/*
 Dark-mode headers for every DataTable within the account accordions.
 Bootstrap's table-light and DataTables sorting classes otherwise retain
 their light background after the rest of the table switches theme.
*/
body.dark-mode #accordion1 table thead,
body.dark-mode #accordion1 table thead.table-light {
    --bs-table-bg: #2E303A;
    --bs-table-color: #ffffff;
    --bs-table-border-color: #3a3d4d;
    background-color: #2E303A !important;
    color: #ffffff !important;
}

body.dark-mode #accordion1 table thead th,
body.dark-mode #accordion1 table thead td,
body.dark-mode #accordion1 table.dataTable thead th,
body.dark-mode #accordion1 table.dataTable thead td {
    background-color: #2E303A !important;
    color: #ffffff !important;
    border-color: #3a3d4d !important;
    box-shadow: inset 0 0 0 9999px #2E303A !important;
}


/* Shared controls for all account accordion DataTables. */
#accordion1 .account-accordion-left-controls {
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 gap: 0.5rem;
}

#accordion1 .account-accordion-table-toolbar {
 display: inline-flex;
 align-items: center;
 margin: 0;
}

#accordion1 .dataTables_length {
 display: inline-flex;
 align-items: center;
 margin: 0;
}

#accordion1 .dataTables_length label {
 display: inline-flex;
 align-items: center;
 gap: 0.35rem;
 margin: 0;
 white-space: nowrap;
}

/*
 Keep the selected page-length value visible. Some theme/select rules leave
 the options available but hide the currently selected value.
*/
#accordion1 .dataTables_length select,
#accordion1 .dataTables_length select.form-select,
#accordion1 .dataTables_length select.form-select-sm {
 display: inline-block !important;
 width: auto !important;
 min-width: 72px !important;
 height: auto !important;
 margin: 0 0.25rem !important;
 padding: 0.25rem 1.9rem 0.25rem 0.6rem !important;
 color: #212529 !important;
 -webkit-text-fill-color: #212529 !important;
 background-color: #ffffff !important;
 opacity: 1 !important;
 visibility: visible !important;
}

#accordion1 .dataTables_length select option {
 color: #212529;
 background: #ffffff;
}

body.dark-mode #accordion1 .dataTables_length select,
body.dark-mode #accordion1 .dataTables_length select.form-select,
body.dark-mode #accordion1 .dataTables_length select.form-select-sm {
 color: #ffffff !important;
 -webkit-text-fill-color: #ffffff !important;
 background-color: #2E303A !important;
 border-color: #4a4d5d !important;
}

body.dark-mode #accordion1 .dataTables_length select option {
 color: #ffffff;
 background: #2E303A;
}

#accordion1 .account-accordion-columns-menu {
 max-height: 360px;
 overflow-y: auto;
 min-width: 240px;
 padding: 0.5rem;
}

#accordion1 .account-accordion-columns-menu .form-check {
 margin: 0;
 padding: 0.35rem 0.75rem 0.35rem 2rem;
 border-radius: 0.35rem;
}

#accordion1 .account-accordion-columns-menu .form-check:hover {
 background: rgba(35,47,132,0.07);
}

body.dark-mode #accordion1 .account-accordion-columns-menu {
 background: #2E303A;
 border-color: #3a3d4d;
 color: #ffffff;
}

body.dark-mode #accordion1 .account-accordion-columns-menu .form-check:hover {
 background: rgba(255,255,255,0.06);
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/account-territory-denied.css
   ========================================================== */
.territory-denied-wrap{max-width:880px;margin:0 auto;}
.territory-denied-card{border:1px solid #e9edf4;border-radius:16px;box-shadow:0 8px 24px rgba(15,23,42,.06);overflow:hidden;}
.territory-denied-icon{width:64px;height:64px;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;background:rgba(220,38,38,.10);color:#dc2626;font-size:28px;}
.territory-denied-note{border:1px solid #e9edf4;border-radius:12px;background:#f8fafc;padding:14px 16px;color:#5b6474;}
.territory-denied-lock{width:82px;height:82px;border-radius:20px;display:flex;align-items:center;justify-content:center;margin:0 auto 24px;background:rgba(220,38,38,.10);color:#dc2626;font-size:38px;}
body.dark-mode .territory-denied-card{background:#2e303a;border-color:#3a3d4d;}
body.dark-mode .territory-denied-note{background:#252730;border-color:#3a3d4d;color:#c5c9d3;}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/account-territory-preflight.css
   ========================================================== */
.territory-preflight-wrap{max-width:860px;margin:0 auto;}
.territory-preflight-card{border:1px solid #e9edf4;border-radius:16px;box-shadow:0 8px 24px rgba(15,23,42,.06);overflow:hidden;}
.territory-preflight-icon{width:64px;height:64px;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;background:rgba(59,130,246,.10);color:#2563eb;font-size:28px;}
.territory-preflight-note{border:1px solid #e9edf4;border-radius:12px;background:#f8fafc;padding:14px 16px;color:#5b6474;}
body.dark-mode .territory-preflight-card{background:#2e303a;border-color:#3a3d4d;}
body.dark-mode .territory-preflight-note{background:#252730;border-color:#3a3d4d;color:#c5c9d3;}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/account-territory-summary.css
   ========================================================== */
.territory-limited-banner{border:1px solid rgba(245,158,11,.28);border-radius:14px;background:rgba(245,158,11,.09);padding:18px 20px;}
.territory-limited-icon{width:46px;height:46px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:rgba(245,158,11,.16);color:#b7791f;font-size:20px;flex:0 0 46px;}
.territory-limited-card{border:1px solid #e9edf4;border-radius:14px;box-shadow:0 6px 18px rgba(15,23,42,.05);overflow:hidden;}
.territory-limited-label{color:#7b8494;font-size:12px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px;}
.territory-limited-value{color:#282f53;font-weight:600;word-break:break-word;}
body.dark-mode .territory-limited-banner{background:rgba(245,158,11,.10);border-color:rgba(245,158,11,.22);color:#f3f4f6;}
body.dark-mode .territory-limited-card{background:#2e303a;border-color:#3a3d4d;}
body.dark-mode .territory-limited-label{color:#aab0bf;}
body.dark-mode .territory-limited-value{color:#fff;}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/annual-activity.css
   ========================================================== */
.annual-activity-stat-card .card-body{
 min-height:115px;
}

.annual-activity-stat-icon{
 width:42px;
 height:42px;
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 background:var(--primary005);
 color:var(--primary-bg-color);
}

.annual-activity-summary-value{
 font-size:1.55rem;
 font-weight:700;
 line-height:1.2;
}

.annual-activity-summary-label{
 color:#76839a;
 font-size:0.85rem;
}

.annual-activity-filter-card label{
 font-weight:600;
 margin-bottom:0.25rem;
}

#annualActivityTable{
 width:100% !important;
}

#annualActivityTable thead th{
 white-space:nowrap;
 font-size:12px;
 vertical-align:middle;
}

#annualActivityTable tbody td{
 vertical-align:middle;
}

.dark-mode .annual-activity-summary-label{
 color:#d6deea !important;
}

.dark-mode .annual-activity-stat-icon{
 background:rgba(255,255,255,0.08);
 color:#fff;
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/billing.css
   ========================================================== */
.subscriptionMainPageContent {
 margin-bottom: 55px;
}

.subscription-shell {
 border: 0;
 border-radius: 22px;
 box-shadow: 0 12px 34px rgba(15, 23, 42, 0.10);
 overflow: hidden;
 min-height: 760px;
 background: #ffffff;
}

.subscription-shell-header {
 padding: 34px 38px;
 background: #ffffff;
 border-bottom: 1px solid #edf0f7;
}

.subscription-shell-title {
 display: flex;
 align-items: center;
 gap: 18px;
}

.subscription-shell-icon {
 width: 56px;
 height: 56px;
 border-radius: 18px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 background: rgba(35, 47, 132, 0.08);
 color: #232f84;
 font-size: 23px;
}

.subscription-shell-title h4 {
 margin: 0;
 color: #17203f;
 font-weight: 800;
 font-size: 24px;
}

.subscription-shell-title p {
 margin: 7px 0 0;
 color: #76839a;
 font-size: 14px;
}

.subscription-status-pill {
 border-radius: 999px;
 padding: 8px 13px;
 font-size: 12px;
}

.subscription-tabs {
 padding: 0 32px;
 background: #ffffff;
 border-bottom: 1px solid #edf0f7;
}

.subscription-tabs .nav-tabs {
 border-bottom: 0;
 gap: 12px;
}

.subscription-tabs .nav-link {
 border: 0;
 background: transparent;
 color: #667085;
 font-weight: 700;
 padding: 24px 18px;
 position: relative;
 font-size: 15px;
}

.subscription-tabs .nav-link i {
 margin-right: 9px;
}

.subscription-tabs .nav-link.active {
 color: #232f84;
 background: transparent;
}

.subscription-tabs .nav-link.active:after {
 content: "";
 position: absolute;
 left: 16px;
 right: 16px;
 bottom: 0;
 height: 4px;
 background: #232f84;
 border-radius: 999px 999px 0 0;
}

.subscription-panel {
 padding: 42px 38px 48px;
 background: #ffffff;
 min-height: 560px;
}

.subscription-section-heading {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 22px;
 margin-bottom: 34px;
}

.subscription-section-heading h5 {
 color: #17203f;
 font-weight: 800;
 margin-bottom: 8px;
 font-size: 20px;
}

.subscription-section-heading p {
 color: #76839a;
 font-size: 14px;
 margin-bottom: 0;
}

.subscription-info-grid {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 22px;
 margin-bottom: 34px;
}

.subscription-info-box {
 border: 1px solid #edf0f7;
 background: #fbfcff;
 border-radius: 18px;
 padding: 24px;
 min-height: 126px;
}

.subscription-info-label {
 color: #76839a;
 font-size: 12px;
 text-transform: uppercase;
 letter-spacing: .04em;
 font-weight: 800;
 margin-bottom: 10px;
}

.subscription-info-value {
 color: #17203f;
 font-size: 22px;
 font-weight: 800;
 line-height: 1.25;
}

.subscription-info-help {
 color: #76839a;
 font-size: 13px;
 margin-top: 8px;
}

.subscription-soft-panel {
 border: 1px solid #edf0f7;
 background: #fbfcff;
 border-radius: 18px;
 padding: 28px;
 margin-top: 28px;
}

.payment-method-card {
 border: 1px solid #edf0f7;
 border-radius: 18px;
 padding: 24px;
 background: #ffffff;
 height: 100%;
 min-height: 135px;
}

.payment-card-brand {
 width: 66px;
 height: 44px;
 border-radius: 12px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 background: #f1f3fb;
 color: #232f84;
 font-size: 13px;
 font-weight: 900;
 margin-right: 16px;
}

.billing-table th {
 font-size: 12px;
 text-transform: uppercase;
 letter-spacing: .04em;
 color: #76839a;
 border-top: 0;
 white-space: nowrap;
 padding-top: 18px;
 padding-bottom: 18px;
}

.billing-table td {
 vertical-align: middle;
 padding-top: 18px;
 padding-bottom: 18px;
}

.plan-card-shell {
 border: 1px solid #edf0f7;
 border-radius: 18px;
 background: #ffffff;
 height: 100%;
 overflow: hidden;
 transition: all .2s ease;
}

.plan-card-shell:hover {
 box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
 transform: translateY(-1px);
}

.plan-card-shell.current {
 border-color: #232f84;
 box-shadow: 0 8px 18px rgba(35, 47, 132, 0.13);
}

.plan-card-head {
 padding: 24px;
 border-bottom: 1px solid #edf0f7;
 background: #fbfcff;
}

.plan-card-body {
 padding: 24px;
}

.plan-card-head h6,
.plan-card-body h6 {
 color: #17203f;
 font-weight: 900;
 margin-bottom: 4px;
}

.plan-card-price {
 font-size: 30px;
 font-weight: 900;
 color: #232f84;
 margin: 18px 0 6px;
}

.plan-card-price small {
 font-size: 13px;
 color: #76839a;
 font-weight: 700;
}

.billing-plan-card {
 margin-bottom: 32px !important;
}

.empty-billing-state {
 border: 1px dashed #dfe4f1;
 border-radius: 18px;
 background: #fbfcff;
 text-align: center;
 padding: 52px 24px;
 color: #76839a;
 min-height: 260px;
}

.empty-billing-state i {
 font-size: 34px;
 color: #232f84;
 margin-bottom: 12px;
}

.cancel-box {
 border: 1px solid rgba(232, 38, 70, .18);
 background: rgba(232, 38, 70, .04);
 border-radius: 18px;
 padding: 28px;
 margin-top: 34px;
}

.pricing-card {
 border: 1px solid #edf0f7;
 border-radius: 18px;
 box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
 overflow: hidden;
}

.pricing-card .card-body {
 padding: 28px;
}

.billing-interval-toggle .btn {
 min-width: 110px;
 padding-top: 9px;
 padding-bottom: 9px;
}

.subscription-panel .btn {
 padding-left: 18px;
 padding-right: 18px;
}

.subscription-panel .form-select,
.subscription-panel .form-control {
 min-height: 42px;
}

#payment-section {
 border: 1px solid #edf0f7;
 border-radius: 18px;
 box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

#payment-section .card-body {
 padding: 28px;
}

/************************************
 RESPONSIVE
************************************/
@media (max-width: 1199px) {
 .subscription-info-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
}

@media (max-width: 768px) {
 .subscriptionMainPageContent {
  margin-bottom: 35px;
 }

 .subscription-shell {
  min-height: auto;
  border-radius: 16px;
 }

 .subscription-shell-header {
  padding: 24px 20px;
 }

 .subscription-shell-title {
  gap: 14px;
 }

 .subscription-shell-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  font-size: 18px;
 }

 .subscription-shell-title h4 {
  font-size: 20px;
 }

 .subscription-tabs {
  overflow-x: auto;
  padding: 0 12px;
 }

 .subscription-tabs .nav-tabs {
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 6px;
 }

 .subscription-tabs .nav-link {
  padding: 18px 12px;
  font-size: 14px;
 }

 .subscription-panel {
  padding: 26px 20px 32px;
  min-height: auto;
 }

 .subscription-section-heading {
  display: block;
  margin-bottom: 24px;
 }

 .subscription-section-heading .ms-auto {
  margin-top: 16px;
 }

 .subscription-info-grid {
  grid-template-columns: 1fr;
  gap: 16px;
 }

 .subscription-info-box {
  padding: 20px;
  min-height: auto;
 }

 .subscription-info-value {
  font-size: 20px;
 }

 .subscription-soft-panel,
 .cancel-box {
  padding: 22px;
 }

 .payment-method-card {
  padding: 20px;
 }

 .plan-card-head,
 .plan-card-body {
  padding: 20px;
 }

 .plan-card-price {
  font-size: 26px;
 }

 .billing-interval-toggle {
  width: 100%;
 }

 .billing-interval-toggle .btn {
  flex: 1;
  min-width: auto;
 }
}

/************************************
 DARK MODE
************************************/
body.dark-mode .subscription-shell,
body.dark-mode .subscription-shell-header,
body.dark-mode .subscription-tabs,
body.dark-mode .subscription-panel,
body.dark-mode .subscription-info-box,
body.dark-mode .subscription-soft-panel,
body.dark-mode .payment-method-card,
body.dark-mode .plan-card-shell,
body.dark-mode .plan-card-head,
body.dark-mode .empty-billing-state,
body.dark-mode .pricing-card,
body.dark-mode #payment-section {
 background: #2E303A !important;
 border-color: rgba(255,255,255,0.08) !important;
}

body.dark-mode .subscription-shell-title h4,
body.dark-mode .subscription-section-heading h5,
body.dark-mode .subscription-info-value,
body.dark-mode .plan-card-head h6,
body.dark-mode .plan-card-body h6 {
 color: #ffffff !important;
}

body.dark-mode .subscription-shell-title p,
body.dark-mode .subscription-section-heading p,
body.dark-mode .subscription-info-label,
body.dark-mode .subscription-info-help {
 color: rgba(255,255,255,0.65) !important;
}

body.dark-mode .subscription-tabs .nav-link {
 color: rgba(255,255,255,0.65);
}

body.dark-mode .subscription-tabs .nav-link.active {
 color: #ffffff;
}

body.dark-mode .payment-card-brand,
body.dark-mode .subscription-shell-icon {
 background: rgba(255,255,255,0.08);
 color: #ffffff;
}

body.dark-mode .plan-card-price {
 color: #ffffff;
}

body.dark-mode .cancel-box {
 background: rgba(232, 38, 70, .08);
 border-color: rgba(232, 38, 70, .25) !important;
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/calendar-base.css
   ========================================================== */
/* ===============================
   CALENDAR CHIP SELECTORS
================================ */

.cal-chip {
  border-color: var(--cal-color, #e1e5ea) !important;
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
}

.cal-chip .badge {
  font-weight: 600;
}

.cal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cal-color, #265a88);
  display: inline-block;
}

/* Smooth scroll on calendar toggle row */
#calendarToggles {
  scrollbar-width: thin;
}

/* Active toggle highlight */
.btn-check:checked + .cal-chip {
  background: #f8f9fa;
  box-shadow: inset 0 0 0 1px var(--cal-color, #265a88);
}


/* ===============================
   CALENDAR NAVIGATION HEADER
================================ */

.calendar-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 999px;
  padding: .35rem .5rem;
  min-height: 48px;
}

.calendar-nav-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: #fff;
  color: #344054;
  transition: all .2s ease;
}

.calendar-nav-btn:hover {
  background: #eef2ff;
  color: #1e3a8a;
}

.calendar-title-btn {
  border: 0;
  background: transparent;
  padding: .15rem .6rem;
  border-radius: 999px;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
}

.calendar-title-btn:hover {
  background: #eef2ff;
  color: #1e3a8a;
}

#calTitle {
  line-height: 1.2;
  white-space: nowrap;
}

/* hidden date picker */
#miniDatePicker {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

@media (max-width: 991px) {
  .calendar-title-wrap {
    width: 100%;
    justify-content: center;
  }
}


/* ===============================
   FULLCALENDAR EVENT STYLING
================================ */

/* Full width coloured events */
#calendar .fc-daygrid-event,
#calendar .fc-timegrid-event {
  border-radius: 8px;
  border: none !important;
  padding: 0 !important;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.10);
}

/* Remove default dot event style */
#calendar .fc-daygrid-event-dot {
  display: none !important;
}

/* Event inner layout */
#calendar .cd5-event-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  min-height: 24px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  border-radius: 8px;
  box-sizing: border-box;
}

/* Event icon */
#calendar .cd5-event-icon {
  flex: 0 0 auto;
  font-size: 11px;
  opacity: 0.95;
}

/* Event time */
#calendar .cd5-event-time {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}

/* Event title */
#calendar .cd5-event-title-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}

/* Ensure text stays white on coloured backgrounds */
#calendar .fc-h-event .fc-event-main,
#calendar .fc-daygrid-event .fc-event-main {
  color: #fff !important;
}

/* tighter event rows */
#calendar .fc-daygrid-body-natural .fc-daygrid-day-events {
  margin-bottom: 2px;
}


/* ===============================
   MONTH CELL SIZING
================================ */

#calendar .fc-daygrid-day-frame {
  min-height: 110px;
}

@media (min-width: 992px) {
  #calendar .fc-daygrid-day-frame {
    min-height: 130px;
  }
}


/* ===============================
   MOBILE EVENT LAYOUT
================================ */

@media (max-width: 767px) {

  #calendar .cd5-event-inner {
    padding: 3px 6px;
    gap: 5px;
  }

  #calendar .cd5-event-time,
  #calendar .cd5-event-title-text {
    font-size: 11px;
  }

  #calendar .cd5-event-icon {
    font-size: 10px;
  }

}


/* ===============================
   SIDEBAR STYLING
================================ */

.sidebar .accordion-item {
  border: none;
  background-color: #f8f9fc;
  border-radius: 0.75rem;
  margin-bottom: 0.5rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.sidebar .accordion-button {
  background-color: #fff;
  font-weight: 600;
  color: #1f2937;
  border-bottom: 1px solid #e5e7eb;
  transition: background-color 0.2s ease;
}

.sidebar .accordion-button:not(.collapsed) {
  background-color: #eef2ff;
  color: #1e3a8a;
}

.sidebar .nav-tabs {
  border: none;
  margin-bottom: 0.75rem;
}

.sidebar .nav-tabs .nav-link {
  border: none;
  border-radius: 0.5rem;
  font-weight: 500;
  margin-right: 0.25rem;
  padding: 0.4rem 0.75rem;
  transition: all 0.2s ease;
}

.sidebar .tab-content {
  background: #fff;
  border-radius: 0.75rem;
  padding: 0.25rem;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
}

.sidebar .form-label {
  font-size: 0.85rem;
  color: #374151;
  margin-bottom: 0.2rem;
}

.sidebar .form-select {
  font-size: 0.85rem;
  border-radius: 0.5rem;
}

.sidebar .btn-primary {
  border-color: #1e3a8a;
  border-radius: 0.5rem;
  font-size: 0.9rem;
  padding: 0.4rem 0.75rem;
}

.calendar-settings-sidebar {
  width: 92vw;
  max-width: 420px;
}

@media (min-width: 1200px) {
  .calendar-settings-sidebar {
    max-width: 560px;
  }
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/contact-groups.css
   ========================================================== */
.contact-groups-stat-card {
 border: 1px solid #e9edf4;
 border-radius: 14px;
 padding: 16px;
 background: #fff;
 height: 100%;
 box-shadow: 0 6px 18px rgba(15,23,42,0.05);
}

.contact-groups-stat-icon {
 width: 42px;
 height: 42px;
 border-radius: 12px;
 display: flex;
 align-items: center;
 justify-content: center;
 margin-bottom: 10px;
 background: rgba(35,47,132,0.10);
 color: #232f84;
 font-size: 18px;
}

.contact-groups-stat-value {
 color: #282f53;
 font-size: 24px;
 font-weight: 700;
 line-height: 1;
}

.contact-groups-stat-label {
 color: #6c757d;
 font-size: 13px;
 margin-top: 5px;
}

.contact-groups-card {
 border: 0;
 border-radius: 16px;
 box-shadow: 0 8px 24px rgba(15,23,42,0.08);
 overflow: visible;
}

.contact-groups-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 flex-wrap: wrap;
}

.contact-groups-header-actions {
 display: flex;
 align-items: center;
 justify-content: flex-end;
 gap: 8px;
 margin-left: auto;
}

.contact-groups-header-action {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 170px;
 min-height: 36px;
 white-space: nowrap;
}

#contactGroupsTable {
 width: 100% !important;
}

#contactGroupsTable th {
 white-space: nowrap;
 font-size: 12px;
}

#contactGroupsTable td {
 vertical-align: middle;
}

/*
 Keep the actions column in the main DataTable row at every responsive
 breakpoint. Without this, DataTables moves the hamburger into the child
 details row, where Bootstrap positions the dropdown against the full-width
 child cell rather than against the button.
*/
#contactGroupsTable th.contact-group-actions-heading,
#contactGroupsTable td.contact-group-actions-cell {
 width: 1%;
 min-width: 58px;
 white-space: nowrap;
 text-align: center;
 position: relative;
}

#contactGroupsTable td.contact-group-actions-cell .dropdown {
 position: relative;
}

#contactGroupsTable td.contact-group-actions-cell .dropdown-menu {
 z-index: 1095;
}

/* Allow the dropdown to escape the DataTable/card without being clipped. */
.contact-groups-card,
.contact-groups-card .card-body,
.contact-groups-card .table-responsive,
#contactGroupsTable_wrapper {
 overflow: visible !important;
}

/* The responsive child row should only contain the columns intentionally
 hidden by DataTables; it must never restyle the action dropdown. */
#contactGroupsTable > tbody > tr.child ul.dtr-details {
 width: 100%;
 margin: 0;
}

#contactGroupsTable > tbody > tr.child .dtr-title {
 min-width: 115px;
}

.contact-group-name-badge {
 --contact-group-colour: #232f84;
 display: inline-flex;
 align-items: center;
 gap: 8px;
 min-height: 30px;
 padding: 7px 11px;
 border-radius: 999px;
 color: var(--contact-group-colour);
 background: rgba(108,117,125,0.10);
 border: 1px solid rgba(108,117,125,0.22);
 font-size: 12px;
 font-weight: 700;
 text-decoration: none !important;
 transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

.contact-group-name-badge::before {
 content: '';
 width: 9px;
 height: 9px;
 border-radius: 50%;
 flex: 0 0 9px;
 background: var(--contact-group-colour);
}

.contact-group-name-badge:hover {
 color: var(--contact-group-colour);
 border-color: var(--contact-group-colour);
 background: rgba(35,47,132,0.08);
 box-shadow: 0 5px 14px rgba(15,23,42,0.10);
}

.contact-group-name-badge.is-inactive {
 cursor: default;
 opacity: .62;
}

.contact-group-count-link {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 6px;
 min-width: 48px;
 padding: 6px 10px;
 border-radius: 999px;
 background: rgba(35,47,132,0.10);
 color: #232f84;
 border: 1px solid rgba(35,47,132,0.20);
 font-size: 12px;
 font-weight: 700;
 text-decoration: none !important;
}

.contact-group-count-link:hover {
 background: #232f84;
 color: #fff;
}

.contact-group-scope-badge,
.contact-group-status-badge {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 6px 9px;
 border-radius: 999px;
 font-size: 12px;
 font-weight: 700;
 white-space: nowrap;
}

.contact-group-scope-company {
 color: #232f84;
 background: rgba(35,47,132,0.10);
 border: 1px solid rgba(35,47,132,0.20);
}

.contact-group-scope-personal {
 color: #856404;
 background: rgba(255,193,7,0.18);
 border: 1px solid rgba(255,193,7,0.38);
}

.contact-group-status-active {
 color: #146c43;
 background: rgba(25,135,84,0.13);
 border: 1px solid rgba(25,135,84,0.25);
}

.contact-group-status-inactive {
 color: #6c757d;
 background: rgba(108,117,125,0.12);
 border: 1px solid rgba(108,117,125,0.24);
}

.contact-group-owner-name {
 color: #282f53;
 font-weight: 600;
}

.contact-group-updated {
 color: #6c757d;
 font-size: 12px;
 line-height: 1.45;
}

.contact-group-modal-section {
 border: 1px solid #e2e8f0;
 border-radius: 14px;
 padding: 16px;
 background: #fff;
}

.contact-group-modal-section-heading {
 display: flex;
 align-items: center;
 gap: 12px;
 margin-bottom: 16px;
}

.contact-group-modal-section-icon,
.contact-group-status-icon {
 width: 42px;
 height: 42px;
 border-radius: 12px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 flex: 0 0 42px;
 background: rgba(35,47,132,0.10);
 color: #232f84;
}

.contact-group-modal-section-title {
 color: #282f53;
 font-weight: 700;
}

.contact-group-modal-section-help {
 color: #6c757d;
 font-size: 12px;
 margin-top: 2px;
}

.contact-group-scope-options {
 display: grid;
 gap: 10px;
}

.contact-group-scope-option {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 11px 12px;
 border: 1px solid #dfe5ee;
 border-radius: 12px;
 cursor: pointer;
 margin: 0;
}

.contact-group-scope-option:hover {
 border-color: rgba(35,47,132,0.42);
 background: rgba(35,47,132,0.04);
}

.contact-group-scope-option input {
 margin: 0;
}

.contact-group-scope-option-icon {
 width: 34px;
 height: 34px;
 border-radius: 10px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 color: #232f84;
 background: rgba(35,47,132,0.10);
}

.contact-group-scope-option span:last-child {
 display: flex;
 flex-direction: column;
 line-height: 1.25;
}

.contact-group-scope-option small {
 color: #6c757d;
 margin-top: 2px;
}

.contact-group-page-notice {
 position: fixed;
 top: 85px;
 right: 24px;
 z-index: 2000;
 min-width: 280px;
 max-width: 420px;
 border-radius: 12px;
 padding: 12px 14px;
 box-shadow: 0 10px 30px rgba(15,23,42,0.18);
 background: #fff;
 border: 1px solid #e9edf4;
 display: none;
}

.contact-group-page-notice.show {
 display: block;
}

.contact-group-page-notice.success {
 border-left: 5px solid #198754;
}

.contact-group-page-notice.error {
 border-left: 5px solid #dc3545;
}

.contact-group-page-notice-title {
 color: #282f53;
 font-weight: 700;
 margin-bottom: 2px;
}

.contact-group-page-notice-text {
 color: #6c757d;
 font-size: 13px;
}

body.dark-mode .contact-groups-stat-card,
body.dark-mode .contact-groups-card,
body.dark-mode .contact-group-modal-section,
body.dark-mode .contact-group-page-notice {
 background: #2E303A !important;
 border-color: #3a3d4d !important;
}

body.dark-mode .contact-groups-stat-value,
body.dark-mode .contact-group-owner-name,
body.dark-mode .contact-group-modal-section-title,
body.dark-mode .contact-group-page-notice-title {
 color: #fff !important;
}

body.dark-mode .contact-groups-stat-label,
body.dark-mode .contact-group-updated,
body.dark-mode .contact-group-modal-section-help,
body.dark-mode .contact-group-scope-option small,
body.dark-mode .contact-group-page-notice-text {
 color: rgba(255,255,255,0.64) !important;
}

body.dark-mode .contact-group-scope-option {
 border-color: #3a3d4d;
 background: rgba(255,255,255,0.03);
}

@media (max-width: 767px) {
 .contact-groups-card .card-body {
  padding: 12px;
 }

 .contact-groups-header-actions {
  width: 100%;
  margin-left: 0;
 }

 .contact-groups-header-action {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
 }

 .contact-group-page-notice {
  left: 12px;
  right: 12px;
  min-width: 0;
 }
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/contact-list.css
   ========================================================== */
.contacts-stat-card {
 border: 1px solid #e9edf4;
 border-radius: 12px;
 padding: 16px;
 background: #fff;
 height: 100%;
}

.contacts-stat-card .stat-icon {
 width: 42px;
 height: 42px;
 border-radius: 12px;
 display: flex;
 align-items: center;
 justify-content: center;
 background: rgba(35,47,132,0.10);
 color: #232f84;
 font-size: 18px;
 margin-bottom: 10px;
}

.contacts-stat-card .stat-value {
 font-size: 24px;
 font-weight: 700;
 line-height: 1;
 color: #282f53;
}

.contacts-stat-card .stat-label {
 font-size: 13px;
 color: #6c757d;
 margin-top: 4px;
}

.contacts-page-card {
 border: 0;
 border-radius: 14px;
 box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
 overflow: visible;
}

#contactsTable {
 width: 100% !important;
}

#contactsTable thead th {
 white-space: nowrap;
 font-size: 12px;
 vertical-align: middle;
}

#contactsTable tbody td {
 vertical-align: middle;
}

.contact-name-wrap {
 display: flex;
 align-items: center;
 gap: 12px;
 min-width: 220px;
}

.contact-avatar {
 width: 44px;
 height: 44px;
 border-radius: 50%;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 flex: 0 0 44px;
 background: linear-gradient(135deg, #232f84, #5c6bc0);
 color: #fff;
 font-size: 16px;
 font-weight: 700;
 letter-spacing: .4px;
 text-transform: uppercase;
 box-shadow: 0 4px 10px rgba(35,47,132,0.18);
}

.contact-name-main {
 font-weight: 700;
 color: #282f53;
 line-height: 1.2;
}

.contact-name-sub {
 color: #6c757d;
 font-size: 12px;
 margin-top: 3px;
 line-height: 1.2;
}

.contact-pill-badge {
 display: inline-flex;
 align-items: center;
 min-height: 24px;
 padding: 5px 9px;
 border-radius: 999px;
 font-size: 12px;
 font-weight: 600;
 line-height: 1;
 white-space: nowrap;
}

.contact-primary-badge {
 background: rgba(35,47,132,0.10);
 color: #232f84;
 border: 1px solid rgba(35,47,132,0.25);
}

.contact-secondary-badge {
 background: rgba(108,117,125,0.12);
 color: #6c757d;
 border: 1px solid rgba(108,117,125,0.22);
}

.contact-email-copy {
 background: rgba(255,193,7,0.18);
 color: #856404;
 border: 1px solid rgba(255,193,7,0.45);
 cursor: pointer;
}

.contact-email-missing {
 background: rgba(108,117,125,0.12);
 color: #6c757d;
 border: 1px solid rgba(108,117,125,0.22);
}

.contact-group-pill {
 display: inline-flex;
 align-items: center;
 gap: 7px;
 min-height: 26px;
 padding: 5px 10px;
 border-radius: 999px;
 font-size: 12px;
 font-weight: 700;
 line-height: 1;
 white-space: nowrap;
 background: rgba(108,117,125,0.12);
 color: var(--contact-group-colour);
 border: 1px solid rgba(108,117,125,0.22);
}

.contact-group-pill:before {
 content: "";
 width: 8px;
 height: 8px;
 border-radius: 999px;
 background: var(--contact-group-colour);
 display: inline-block;
 flex: 0 0 auto;
}

.contacts-page-card .table-responsive {
 overflow: visible;
}

.dropdown-menu {
 z-index: 1080;
}

.contact-group-submenu {
 position: relative;
}

.contact-group-submenu-menu {
 display: none;
 position: absolute;
 top: 0;
 right: 100%;
 left: auto;
 margin-top: 0;
 margin-right: 2px;
 min-width: 245px;
 max-height: 360px;
 overflow-y: auto;
}

.contact-group-submenu:hover > .contact-group-submenu-menu,
.contact-group-submenu:focus-within > .contact-group-submenu-menu {
 display: block;
}

.contact-page-notice {
 position: fixed;
 top: 85px;
 right: 24px;
 z-index: 2000;
 min-width: 280px;
 max-width: 420px;
 border-radius: 12px;
 padding: 12px 14px;
 box-shadow: 0 10px 30px rgba(15,23,42,0.18);
 background: #fff;
 border: 1px solid #e9edf4;
 display: none;
}

.contact-page-notice.show {
 display: block;
}

.contact-page-notice-success {
 border-left: 5px solid #198754;
}

.contact-page-notice-error {
 border-left: 5px solid #dc3545;
}

.contact-page-notice-info {
 border-left: 5px solid #232f84;
}

.contact-page-notice-title {
 font-weight: 700;
 color: #282f53;
 margin-bottom: 2px;
}

.contact-page-notice-text {
 color: #6c757d;
 font-size: 13px;
}

.contact-group-filter-banner {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 14px;
 flex-wrap: wrap;
 border: 1px solid rgba(35,47,132,0.16);
 border-radius: 14px;
 padding: 14px 16px;
 margin-bottom: 18px;
 background: rgba(35,47,132,0.05);
}

.contact-group-filter-summary {
 display: flex;
 align-items: center;
 gap: 12px;
 min-width: 0;
}

.contact-group-filter-icon {
 width: 42px;
 height: 42px;
 border-radius: 12px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 flex: 0 0 42px;
 background: rgba(35,47,132,0.12);
 color: #232f84;
}

.contact-group-filter-title {
 color: #282f53;
 font-size: 15px;
 font-weight: 700;
 line-height: 1.25;
}

.contact-group-filter-subtitle {
 color: #6c757d;
 font-size: 12px;
 margin-top: 3px;
}

.contact-group-filter-pill {
 display: inline-flex;
 align-items: center;
 gap: 7px;
 min-height: 28px;
 margin-left: 5px;
 padding: 6px 11px;
 border-radius: 999px;
 color: var(--contact-group-filter-colour);
 background: rgba(108,117,125,0.10);
 border: 1px solid rgba(108,117,125,0.22);
 font-size: 12px;
 font-weight: 700;
 vertical-align: middle;
}

.contact-group-filter-pill::before {
 content: '';
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: var(--contact-group-filter-colour);
}

.contact-directory-heading {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 flex-wrap: wrap;
 width: 100%;
}

/* Responsive child rows keep labels readable while the Actions column remains in the parent row. */
#contactsTable > tbody > tr.child ul.dtr-details {
 width: 100%;
 margin: 0;
}

#contactsTable > tbody > tr.child .dtr-title {
 min-width: 130px;
 font-weight: 700;
}

#contactsTable th.contact-actions-heading,
#contactsTable td.contact-actions-cell {
 width: 64px;
 min-width: 64px;
 text-align: center;
 white-space: nowrap;
}

body.dark-mode .contact-group-filter-banner {
 background: rgba(255,255,255,0.04);
 border-color: #3a3d4d;
}

body.dark-mode .contact-group-filter-title {
 color: #fff;
}

body.dark-mode .contact-group-filter-subtitle {
 color: rgba(255,255,255,0.62);
}

body.dark-mode .contacts-stat-card,
body.dark-mode .contacts-page-card,
body.dark-mode .contact-page-notice {
 background: #2E303A !important;
 border-color: #2A2B42 !important;
}

body.dark-mode .contacts-stat-card .stat-value,
body.dark-mode .contact-name-main,
body.dark-mode .contact-page-notice-title {
 color: #fff !important;
}

body.dark-mode .contacts-stat-card .stat-label,
body.dark-mode .contact-name-sub,
body.dark-mode .contact-page-notice-text {
 color: rgba(255,255,255,0.65) !important;
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/contacts-add.css
   ========================================================== */
.contact-create-tabs{
 gap:10px;
 border-bottom:1px solid #e9edf4;
 padding-bottom:12px;
 margin-bottom:20px;
}
.contact-create-tabs .nav-link{
 border:1px solid #e9edf4;
 border-radius:10px;
 color:#282f53;
 font-weight:600;
 padding:10px 16px;
 background:#fff;
}
.contact-create-tabs .nav-link.active{
 background:var(--primary-bg-color);
 color:#fff;
 border-color:var(--primary-bg-color);
}
.contact-form-section{
 border:1px solid #e9edf4;
 border-radius:12px;
 overflow:visible;
 background:#fff;
 box-shadow:0 0.125rem 0.25rem rgba(0,0,0,0.04);
}
.contact-form-section + .contact-form-section{
 margin-top:20px;
}
.contact-form-section .section-header{
 padding:14px 18px;
 border-bottom:1px solid #e9edf4;
 background:#f9fafc;
}
.contact-form-section .section-header h4{
 margin:0;
 font-size:1rem;
 font-weight:700;
 color:#282f53;
}
.contact-form-section .section-body{
 padding:18px;
 overflow:visible;
}
.contact-form-actions{
 margin-top:20px;
 display:flex;
 gap:10px;
 flex-wrap:wrap;
}
.small-select-wrap{
 max-width:170px;
}

/* critical for dropdown positioning */
.card,
.card-body,
.tab-content,
.tab-pane,
.row,
.col-md-6,
.col-lg-12,
.main-container,
.side-app,
.main-content{
 overflow:visible !important;
}

.account-search-shell{
 position:relative;
 overflow:visible !important;
 z-index:50;
}

.account-search-results{
 display:none;
 position:absolute;
 top:calc(100% + 6px);
 left:0;
 width:100%;
 background:#fff;
 border:1px solid #dbe4f0;
 border-radius:12px;
 box-shadow:0 18px 40px rgba(15,35,60,0.14);
 z-index:99999;
 max-height:260px;
 overflow-y:auto;
}

.account-search-results.is-open{
 display:block;
}

.account-search-item{
 padding:12px 14px;
 border-bottom:1px solid #eef2f7;
 cursor:pointer;
 background:#fff;
}

.account-search-item:last-child{
 border-bottom:0;
}

.account-search-item:hover{
 background:#f6f8fb;
}

.account-search-item .title{
 font-weight:700;
 color:#282f53;
}

.account-search-item .meta{
 font-size:12px;
 color:#76839a;
 margin-top:4px;
}

.selected-account-box{
 display:none;
 margin-top:12px;
 padding:12px 14px;
 border-radius:10px;
 border:1px solid #d8e4ff;
 background:#f5f9ff;
}

.selected-account-box .title{
 font-weight:700;
 color:#233ac5;
}

.selected-account-box .meta{
 font-size:12px;
 color:#5f6b7a;
 margin-top:4px;
}

.selected-account-actions{
 margin-top:10px;
}

@media (max-width: 767px){
 .contact-create-tabs{
  gap:8px;
 }
 .contact-create-tabs .nav-link{
  width:100%;
  text-align:left;
 }
 .small-select-wrap{
  max-width:100%;
 }
}

.account-search-results{
 scrollbar-width: auto;
 scrollbar-color: #9aa8bd #eef2f7;
}

.account-search-results::-webkit-scrollbar{
 width: 12px;
}

.account-search-results::-webkit-scrollbar-track{
 background: #eef2f7;
 border-radius: 10px;
}

.account-search-results::-webkit-scrollbar-thumb{
 background: #9aa8bd;
 border-radius: 10px;
 border: 2px solid #eef2f7;
}

.account-search-results::-webkit-scrollbar-thumb:hover{
 background: #7f90a8;
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/edit-file.css
   ========================================================== */
#editDocumentModal .modal-content::before,
#editDocumentModal .modal-content::after,
#editDocumentModal .modal-body::before,
#editDocumentModal .modal-body::after {
 content: none !important;
 display: none !important;
 border: 0 !important;
 box-shadow: none !important;
 background: none !important;
}

#editDocumentModal .modal-content {
 overflow: hidden;
 background: #fff;
 border: 0;
 border-radius: 12px;
}

#editDocumentModal .modal-body {
 background: #f4f6fb;
 padding: 18px;
}

#editDocumentModal .form-control,
#editDocumentModal .form-select {
 width: 100%;
}

#editDocumentModal .edit-document-section-card {
 border: 1px solid #d9dfec !important;
 border-radius: 12px;
 background: #ffffff;
 box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
 overflow: hidden;
 margin-bottom: 18px;
}

#editDocumentModal .edit-document-section-card:last-child {
 margin-bottom: 0;
}

#editDocumentModal .edit-document-section-card .card-header {
 background: linear-gradient(90deg, rgba(35,47,132,0.13), rgba(35,47,132,0.04));
 border-bottom: 1px solid #d9dfec;
 padding: 14px 18px;
}

#editDocumentModal .edit-document-section-card .card-header h5 {
 display: flex;
 align-items: center;
 color: #232f84;
 font-weight: 700;
 margin-bottom: 0;
}

#editDocumentModal .edit-document-section-card .card-body {
 padding: 18px;
}

#editDocumentModal .edit-document-current-file {
 display: flex;
 align-items: center;
 gap: 14px;
 padding: 14px;
 border: 1px solid #e4e8f0;
 border-radius: 10px;
 background: #f8f9fc;
}

#editDocumentModal .edit-document-current-file-icon {
 width: 46px;
 min-width: 46px;
 height: 46px;
 border-radius: 10px;
 display: flex;
 align-items: center;
 justify-content: center;
 background: rgba(35,47,132,0.10);
 color: #232f84;
 font-size: 24px;
}

#editDocumentModal .edit-document-meta-grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 10px 20px;
 margin-top: 16px;
}

#editDocumentModal .edit-document-meta-item small {
 display: block;
 color: #6c757d;
 margin-bottom: 2px;
}

#editDocumentModal .edit-document-dropzone {
 border: 2px dashed #232f84;
 border-radius: 12px;
 padding: 26px 20px;
 text-align: center;
 cursor: pointer;
 background: rgba(35,47,132,0.06);
 color: #282f53;
 transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

#editDocumentModal .edit-document-dropzone:hover,
#editDocumentModal .edit-document-dropzone.bg-light {
 background: rgba(35,47,132,0.12) !important;
 border-color: #232f84;
 transform: translateY(-1px);
}

#editDocumentModal .edit-document-dropzone i,
#editDocumentModal .edit-document-dropzone strong {
 color: #232f84;
}

#editDocumentModal .edit-document-replacement-preview {
 display: none;
 margin-top: 14px;
 padding: 12px 14px;
 border: 1px solid #d9dfec;
 border-radius: 10px;
 background: #f8f9fc;
}

#editDocumentModal .edit-document-replacement-preview.is-visible {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
}

#editDocumentModal .edit-document-loading {
 min-height: 240px;
 display: flex;
 align-items: center;
 justify-content: center;
}

body.dark-mode #editDocumentModal .modal-content {
 background: #2E303A;
}

body.dark-mode #editDocumentModal .modal-body {
 background: #20222c;
}

body.dark-mode #editDocumentModal .edit-document-section-card {
 background: #2E303A;
 border-color: #3a3d4d !important;
 box-shadow: none;
}

body.dark-mode #editDocumentModal .edit-document-section-card .card-header {
 background: rgba(255,255,255,0.06);
 border-bottom-color: #3a3d4d;
}

body.dark-mode #editDocumentModal .edit-document-section-card .card-header h5 {
 color: #ffffff;
}

body.dark-mode #editDocumentModal .edit-document-current-file,
body.dark-mode #editDocumentModal .edit-document-replacement-preview {
 background: rgba(255,255,255,0.03);
 border-color: #3a3d4d;
}

body.dark-mode #editDocumentModal .edit-document-current-file-icon {
 background: rgba(255,255,255,0.08);
 color: #ffffff;
}

body.dark-mode #editDocumentModal .edit-document-meta-item small {
 color: rgba(255,255,255,0.58);
}

body.dark-mode #editDocumentModal .edit-document-dropzone {
 background: rgba(255,255,255,0.03);
 border-color: #3a3d4d;
 color: rgba(255,255,255,0.78);
}

body.dark-mode #editDocumentModal .edit-document-dropzone:hover,
body.dark-mode #editDocumentModal .edit-document-dropzone.bg-light {
 background: rgba(255,255,255,0.06) !important;
 border-color: rgba(255,255,255,0.20);
}

body.dark-mode #editDocumentModal .edit-document-dropzone i,
body.dark-mode #editDocumentModal .edit-document-dropzone strong {
 color: #ffffff;
}

@media (max-width: 767.98px) {
 #editDocumentModal .edit-document-meta-grid {
  grid-template-columns: 1fr;
 }
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/error-pages.css
   ========================================================== */
/* -- BEGIN MOBILE -- */
@media only screen and (max-device-width: 736px) {
body.crm-error-page a[class="button"] {display: block !important}
body.crm-error-page a[class="guid"] {display: block;
  font-size: 65% !important}
body.crm-error-page {font-size: 65% !important}
body.crm-error-page h1 {display: block !important;
  font-size: 75% !important;
  max-width: 350px !important;
  padding: 0 0 0 0 !important;
  text-align: center !important;}
body.crm-error-page span[class="mobile-footer-break"] {display: block}
body.crm-error-page table[class="body-table"] {width: 100% !important}
body.crm-error-page table[class="footer-table"] td:first-of-type {text-align: center !important;
  width: 50% !important}
body.crm-error-page table[class="footer-table"] td:last-of-type {text-align: center !important;
  width: 50% !important}
body.crm-error-page table[class="footer-table"] td:nth-child(2) {display: none}
body.crm-error-page table[class="mobile-apps-col"] {display: table !important}
body.crm-error-page table[class="two-btn-table"] a:first-of-type {margin-right: 0 !important}
body.crm-error-page table[class="two-btn-table"] a:last-of-type {margin-left: 0 !important;
        margin-top: 15px}
body.crm-error-page td[class="header-col"] {background-color: #fff;
  padding-bottom: 10px !important}
}
/* -- END MOBILE -- */
body.crm-error-page a {color: #10ade4;
      text-decoration: none}
body.crm-error-page a[class="button"] {border-radius: 20px;
      color: #fff;
      display: inline-block;
      font-size: 13px;
      padding: 10px 30px;
      text-align: center;
      text-transform: uppercase}
body.crm-error-page a[class="guid"] {font-weight: bold}
body.crm-error-page {background-color: #F9F9F9;
      color: #4C4C4C;
      font-family: "Montserrat", Arial, sans-serif !important;
      font-weight: 300 !important;
      line-height: 1.5em;
      margin: 0;
      outline: none;
      padding: 15px}
body.crm-error-page table {table-layout: fixed}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/followups-list.css
   ========================================================== */
a{ text-decoration:none !important; }

.followup-stat-card,
.followup-filter-card,
.followup-table-card{
 border:0;
 border-radius:18px;
 box-shadow:0 8px 24px rgba(15,23,42,.08);
 background:#fff;
}

.followup-stat-card{
 height:100%;
 padding:16px;
 cursor:pointer;
 border:1px solid rgba(15,23,42,.05);
 transition:transform .15s ease, box-shadow .15s ease;
}
.followup-stat-card:hover{
 transform:translateY(-2px);
 box-shadow:0 12px 28px rgba(15,23,42,.12);
}
.followup-stat-card.is-active{
 box-shadow:0 0 0 3px rgba(35,47,132,.18), 0 8px 24px rgba(15,23,42,.08);
}
.followup-stat-inner{ display:flex; align-items:center; gap:13px; }
.followup-stat-icon{
 width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center;
 font-size:19px; flex:0 0 auto;
}
.followup-stat-value{ font-size:24px; font-weight:800; line-height:1; }
.followup-stat-label{ margin-top:4px; font-size:12px; font-weight:700; }
.followup-stat-sub{ margin-top:2px; font-size:11px; color:#6c757d; }
.followup-stat-primary{ background:#edf4ff; }
.followup-stat-primary .followup-stat-icon{ background:#c9dcff; color:#2452a4; }
.followup-stat-amber{ background:#fff7e8; }
.followup-stat-amber .followup-stat-icon{ background:#f8dfad; color:#95610b; }
.followup-stat-orange{ background:#fff2e8; }
.followup-stat-orange .followup-stat-icon{ background:#ffd5b8; color:#a45114; }
.followup-stat-red{ background:#fff0f1; }
.followup-stat-red .followup-stat-icon{ background:#f8cdd2; color:#a83242; }
.followup-stat-purple{ background:#f5efff; }
.followup-stat-purple .followup-stat-icon{ background:#dfd0fb; color:#6542a1; }

.followup-filter-card{ padding:16px; margin-bottom:18px; }
.followup-filter-grid{ display:grid; grid-template-columns:repeat(5,minmax(150px,1fr)) auto; gap:12px; align-items:end; }
.followup-filter-card label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:#6c757d; margin-bottom:5px; }

.followup-table-card{ padding:18px; }
.followup-table-header{ display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.followup-table-title h4{ margin:0; font-weight:800; }
.followup-table-title p{ margin:4px 0 0; color:#6c757d; font-size:12px; }

.followup-bulk-bar{
 display:none; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px;
 padding:10px 12px; border-radius:12px; background:rgba(35,47,132,.08); border:1px solid rgba(35,47,132,.12);
}
.followup-bulk-bar.is-visible{ display:flex; }
.followup-selected-count{ font-weight:800; margin-right:6px; }

#followupsTable{ width:100% !important; }
#followupsTable thead th{ white-space:nowrap !important; font-size:11px; vertical-align:middle; }
#followupsTable tbody td{ vertical-align:middle; font-size:12px; }
#followupsTable tbody td:nth-child(2){ min-width:210px; }
.followup-company-link{ color:inherit !important; }
.followup-company-link:hover{ text-decoration:underline !important; }
.followup-date{ white-space:nowrap; font-weight:700; }
.followup-age-badge,
.followup-status,
.followup-assigned-badge{
 display:inline-flex; align-items:center; white-space:nowrap; border-radius:999px; padding:5px 9px; font-size:10px; font-weight:800;
}
.followup-age-6{ background:#fff3cd; color:#7a5b00; }
.followup-age-9{ background:#ffe1c5; color:#8a4300; }
.followup-age-12{ background:#f8d7da; color:#842029; }
.followup-status-open{ background:#e8efff; color:#243d89; }
.followup-status-snoozed{ background:#f5efff; color:#6542a1; }
.followup-status-reviewed{ background:#e8f7ec; color:#26713b; }
.followup-status-dismissed{ background:#eef0f2; color:#5f6871; }
.followup-assigned-badge{ background:#eef4ff; color:#274887; }
.followup-actions-button{ padding:4px 8px; }
.followup-actions-dropdown .dropdown-menu{ min-width:210px; font-size:12px; z-index:4000; }
.followup-actions-dropdown .dropdown-item{ padding:.48rem .75rem; }

.dt-buttons.btn-group{ position:relative !important; inset-block-end:0 !important; inset-inline-start:0 !important; }
.dt-buttons .btn{ margin-right:5px !important; }
div.dt-button-collection{ z-index:5000 !important; }

#followupPageAlert{ display:none; }
.followup-modal-help{ font-size:12px; color:#6c757d; }

body.dark-mode .followup-stat-card,
body.dark-mode .followup-filter-card,
body.dark-mode .followup-table-card{
 background:#2E303A; box-shadow:none; border-color:#3a3d4d;
}
body.dark-mode .followup-filter-card label,
body.dark-mode .followup-table-title p,
body.dark-mode .followup-stat-sub,
body.dark-mode .followup-modal-help{ color:#aeb4c0; }
body.dark-mode .followup-stat-primary{ background:#26334f; }
body.dark-mode .followup-stat-amber{ background:#463a24; }
body.dark-mode .followup-stat-orange{ background:#4a3427; }
body.dark-mode .followup-stat-red{ background:#4a292f; }
body.dark-mode .followup-stat-purple{ background:#372d4e; }
body.dark-mode .followup-age-6{ background:#5f4d20; color:#ffe7a0; }
body.dark-mode .followup-age-9{ background:#633c20; color:#ffd0ad; }
body.dark-mode .followup-age-12{ background:#60323a; color:#ffc7cf; }
body.dark-mode .followup-status-open,
body.dark-mode .followup-assigned-badge{ background:#30436b; color:#d7e3ff; }
body.dark-mode .followup-status-snoozed{ background:#4a3868; color:#eadcff; }
body.dark-mode .followup-status-reviewed{ background:#2e5438; color:#cef1d5; }
body.dark-mode .followup-status-dismissed{ background:#474b53; color:#d8dbe0; }

@media(max-width:1199px){ .followup-filter-grid{ grid-template-columns:repeat(3,minmax(150px,1fr)); } }
@media(max-width:767px){
 .followup-filter-grid{ grid-template-columns:1fr; }
 .followup-table-card{ padding:12px; }
 .followup-stat-card{ padding:13px; }
}


/* Follow-up hamburger target-list submenu */
.followup-target-list-submenu {
 position: relative;
}

.followup-target-list-submenu > .dropdown-menu {
 top: 0;
 right: 100%;
 left: auto;
 margin-top: -0.35rem;
 margin-right: 0.15rem;
 max-height: 320px;
 overflow-y: auto;
 min-width: 230px;
}

.followup-target-list-submenu > .dropdown-menu.show {
 display: block;
}

@media (min-width: 768px) {
 .followup-target-list-submenu:hover > .dropdown-menu {
  display: block;
 }
}

.followup-target-list-menu {
 z-index: 6000 !important;
}

.followup-target-list-toggle::after {
 float: right;
 margin-top: 0.45rem;
 transform: rotate(90deg);
}

@media (max-width: 767.98px) {
 .followup-target-list-submenu > .dropdown-menu {
  position: static !important;
  transform: none !important;
  margin: 0.25rem 0 0.35rem 0.75rem;
  max-height: 240px;
  border-left: 3px solid rgba(35,47,132,0.25);
  box-shadow: none;
 }
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/home-template.css
   ========================================================== */
.dashboard-filter-bar {
 display:flex;
 justify-content:flex-end;
 align-items:center;
 gap:.75rem;
 flex-wrap:wrap;
 margin-bottom:1rem;
}
.dashboard-filter-summary {
 font-size:.82rem;
 color:#6c757d;
}
.dashboard-health-attention {
 background:#fff1f2 !important;
 border-color:#efb8bf !important;
}
.dashboard-health-clear {
 background:#eefaf2 !important;
 border-color:#b8dfc5 !important;
}
.dashboard-health-attention .card-body,
.dashboard-health-clear .card-body {
 background:transparent !important;
}
body.dark-mode .dashboard-health-attention {
 background:rgba(220,53,69,.15) !important;
 border-color:rgba(220,53,69,.45) !important;
}
body.dark-mode .dashboard-health-clear {
 background:rgba(25,135,84,.15) !important;
 border-color:rgba(25,135,84,.45) !important;
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/login.css
   ========================================================== */
body.crm-login-page .logo {background-image: url("QualityThymeLogo.png");
   float: left;
   width: 400px;}
html.crm-login-page,
body.crm-login-page {margin: 0px;
  padding: 0px;
  min-height: 100%;
  height: 100%;}
body.crm-login-page div.showform {align: center;
 width: 50%;
 padding: 3em;}
body.crm-login-page #wrapper {min-height: 100%;
  height: auto !important;
  margin-bottom: -50px; /* the bottom margin is the negative value of the footer's total height */}
body.crm-login-page #wrapper:after {content: "";
  display: block;
  height: 50px; /* the footer's total height */}
body.crm-login-page #content {height: 100%;}
body.crm-login-page #footer {height: 50px; /* the footer's total height */}
body.crm-login-page #footer-content {border-top: 1px solid #556557;
  height: 32px; /* height + top/bottom paddding + top/bottom border must add up to footer height */
  text-align: right;
  padding: 8px;}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/map.css
   ========================================================== */
#mapCanvas{
        width:100%;
        height:500px;
    }

    .fa-marker {
          background: #ffffff;
          border-radius: 50%;
          padding: 6px;
          width: 32px;
          height: 32px;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 2px 6px rgba(0,0,0,.3);
        }

    .fa-marker i {
      font-size: 18px;
      color: #000000; /* change per SUBID if needed */
    }

    body.dark-mode .fa-marker {
     background: #1e1e1e !important;
    }


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/map4.css
   ========================================================== */
#mapCanvas{
 width:100%;
 height:70vh;
 min-height:600px;
 border-radius:8px;
}

.fa-marker {
 background:#ffffff;
 border-radius:50%;
 padding:6px;
 width:32px;
 height:32px;
 display:flex;
 align-items:center;
 justify-content:center;
 box-shadow:0 2px 6px rgba(0,0,0,.3);
}

.fa-marker i {
 font-size:18px;
 color:#000000;
}

body.dark-mode .fa-marker {
 background:#1e1e1e !important;
}

/* ===============================
   Google Maps popup styling
================================ */

.map-info-window {
 width:560px;
 max-width:560px;
 font-family:inherit;
 overflow-x:hidden;
}

.map-info-window,
.map-info-window * {
 max-width:100%;
 box-sizing:border-box;
 overflow-wrap:anywhere;
 word-break:normal;
}

.map-popup-header {
 display:flex;
 align-items:flex-start;
 gap:8px;
 margin-bottom:6px;
}

.map-popup-title {
 font-size:16px;
 font-weight:800;
 line-height:20px;
 flex:1;
 min-width:0;
}

.map-popup-title a {
 text-decoration:none;
 color:#0B1F3B;
}

.map-popup-status {
 display:inline-block;
 font-size:11px;
 font-weight:800;
 color:#fff;
 padding:3px 8px;
 border-radius:999px;
 white-space:nowrap;
}

.map-popup-line {
 font-size:12px;
 color:#555;
 margin-bottom:4px;
 line-height:17px;
 word-break:normal;
}

.map-popup-line i {
 width:16px;
 color:#1BA6A6;
}

.map-popup-address-line {
 display:flex;
 align-items:flex-start;
 gap:4px;
}

.map-popup-address-line i {
 flex:0 0 16px;
 margin-top:2px;
}

.map-popup-address-text {
 flex:1;
 min-width:0;
 line-height:18px;
}

.map-popup-address-part {
 display:inline;
 overflow-wrap:anywhere;
}

.map-popup-address-comma {
 display:inline;
}

.map-popup-contact {
 font-size:12px;
 color:#555;
 margin-bottom:6px;
 padding-bottom:8px;
 border-bottom:1px solid #e5e7eb;
 line-height:17px;
 word-break:normal;
}

.map-popup-contact i {
 width:16px;
 color:#1BA6A6;
}

.map-popup-parent-line {
 margin-bottom:10px;
 padding-bottom:8px;
 border-bottom:1px solid #e5e7eb;
}

.map-popup-details {
 display:flex;
 gap:14px;
}

.map-popup-col {
 flex:1;
 min-width:230px;
 font-size:12px;
 line-height:18px;
}

.map-popup-col + .map-popup-col {
 border-left:1px solid #e5e7eb;
 padding-left:14px;
}

.map-popup-item {
 margin-bottom:6px;
 word-break:normal;
}

.map-popup-item i {
 width:16px;
 color:#0B1F3B;
}

.map-popup-footer {
 margin-top:10px;
 padding-top:8px;
 border-top:1px solid #e5e7eb;
 font-size:12px;
 color:#475569;
 line-height:17px;
 word-break:normal;
}

.map-popup-footer i {
 width:16px;
 color:#1BA6A6;
}

/* Google InfoWindow shell */
.gm-style .gm-style-iw-c {
 max-width:620px !important;
 padding:12px !important;
 border-radius:12px !important;
 overflow:hidden !important;
}

.gm-style .gm-style-iw-d {
 overflow:auto !important;
 max-height:70vh !important;
 overflow-x:hidden !important;
}

/* ===============================
   Mobile popup improvements
================================ */

@media (max-width:768px) {

 #mapCanvas{
  height:75vh;
  min-height:520px;
 }

 .gm-style .gm-style-iw-c {
  width:auto !important;
  max-width:min(288px, calc(100vw - 118px)) !important;
  min-width:0 !important;
  padding:10px !important;
  overflow:hidden !important;
 }

 .gm-style .gm-style-iw-d {
  width:auto !important;
  max-width:min(270px, calc(100vw - 138px)) !important;
  max-height:65vh !important;
  overflow-x:hidden !important;
 }

 .map-info-window {
  width:min(260px, calc(100vw - 148px));
  max-width:100%;
  min-width:0;
  overflow-x:hidden;
 }

 .map-popup-header {
  flex-wrap:wrap;
  align-items:center;
 }

 .map-popup-title {
  flex-basis:100%;
  font-size:15px;
  line-height:19px;
 }

 .map-popup-status {
  margin-top:2px;
 }

 .map-popup-details {
  display:block;
 }

 .map-popup-col {
  min-width:0;
  width:100%;
 }

 .map-popup-col + .map-popup-col {
  border-left:0;
  padding-left:0;
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid #e5e7eb;
 }

 .map-popup-address-part {
  display:inline-block;
  max-width:100%;
 }

 .map-popup-address-comma {
  display:inline;
 }

 .map-popup-line,
 .map-popup-contact,
 .map-popup-item,
 .map-popup-footer {
  font-size:12px;
  line-height:18px;
 }
}

@media (max-width:420px) {

 .gm-style .gm-style-iw-c {
  width:auto !important;
  max-width:min(270px, calc(100vw - 108px)) !important;
  min-width:0 !important;
 }

 .gm-style .gm-style-iw-d {
  max-width:min(252px, calc(100vw - 128px)) !important;
 }

 .map-info-window {
  width:min(242px, calc(100vw - 138px));
  max-width:100%;
 }

 .map-popup-title {
  font-size:14px;
 }

 .map-popup-status {
  font-size:10px;
  padding:3px 7px;
 }
}

/* ===============================
   Dark mode popup styling
================================ */

body.dark-mode .gm-style .gm-style-iw-c,
body.dark-mode .gm-style .gm-style-iw-d {
 background:#1e1e1e !important;
 color:#f1f5f9 !important;
}

body.dark-mode .gm-style .gm-style-iw-tc::after {
 background:#1e1e1e !important;
}

body.dark-mode .map-info-window {
 background:#1e1e1e !important;
 color:#f1f5f9 !important;
}

body.dark-mode .map-popup-title,
body.dark-mode .map-popup-title a {
 color:#ffffff !important;
}

body.dark-mode .map-popup-line,
body.dark-mode .map-popup-contact,
body.dark-mode .map-popup-footer,
body.dark-mode .map-popup-item {
 color:#d1d5db !important;
}

body.dark-mode .map-popup-line a,
body.dark-mode .map-popup-contact a,
body.dark-mode .map-popup-footer a,
body.dark-mode .map-popup-item a {
 color:#FFD84D !important;
}

body.dark-mode .map-popup-contact,
body.dark-mode .map-popup-parent-line,
body.dark-mode .map-popup-footer,
body.dark-mode .map-popup-col + .map-popup-col {
 border-color:#3f4552 !important;
}

body.dark-mode .map-popup-line i,
body.dark-mode .map-popup-contact i,
body.dark-mode .map-popup-footer i,
body.dark-mode .map-popup-item i {
 color:#FFD84D !important;
}

body.dark-mode .gm-ui-hover-effect {
 filter:invert(1) grayscale(1) brightness(1.8) !important;
 opacity:0.9 !important;
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/monthly-activity.css
   ========================================================== */
/*
 * Monthly Activity summary cards intentionally use the same OTP report
 * card system as the Visits, Tasks and Opportunities reports.
 */
.otp-stat-card{
 --otp-stat-bg:#eef4ff;
 --otp-stat-icon-bg:#cbdafe;
 --otp-stat-icon-color:#24478f;
 --otp-stat-value-color:#1d376d;
 --otp-stat-label-color:#52678f;
 --otp-stat-sub-color:#6d7f9e;
 --otp-stat-bg-dark:#25304a;
 --otp-stat-icon-bg-dark:#394d78;
 --otp-stat-icon-color-dark:#b9cbff;
 --otp-stat-value-color-dark:#e7edff;
 --otp-stat-label-color-dark:#c4d0ef;
 --otp-stat-sub-color-dark:#aebbd8;
 padding:10px 12px;
 background:var(--otp-stat-bg);
 border:1px solid rgba(15,23,42,.04);
 border-radius:14px;
 box-shadow:0 5px 16px rgba(15, 23, 42, 0.07);
 height:100%;
}

.otp-stat-blue{
 --otp-stat-bg:#edf4ff;
 --otp-stat-icon-bg:#c9dcff;
 --otp-stat-icon-color:#2452a4;
 --otp-stat-value-color:#1d4080;
 --otp-stat-label-color:#4e6692;
 --otp-stat-sub-color:#6d7f9f;
 --otp-stat-bg-dark:#26334f;
 --otp-stat-icon-bg-dark:#3d5688;
 --otp-stat-icon-color-dark:#b8ccff;
}

.otp-stat-teal{
 --otp-stat-bg:#e9f8f6;
 --otp-stat-icon-bg:#bfe9e2;
 --otp-stat-icon-color:#176c63;
 --otp-stat-value-color:#14584f;
 --otp-stat-label-color:#4b746f;
 --otp-stat-sub-color:#668a85;
 --otp-stat-bg-dark:#203d3b;
 --otp-stat-icon-bg-dark:#2f625d;
 --otp-stat-icon-color-dark:#a9e2da;
}

.otp-stat-amber{
 --otp-stat-bg:#fff7e8;
 --otp-stat-icon-bg:#f8dfad;
 --otp-stat-icon-color:#95610b;
 --otp-stat-value-color:#754b08;
 --otp-stat-label-color:#826b43;
 --otp-stat-sub-color:#9a835c;
 --otp-stat-bg-dark:#463a24;
 --otp-stat-icon-bg-dark:#705729;
 --otp-stat-icon-color-dark:#ffe0a2;
}

.otp-stat-green{
 --otp-stat-bg:#edf8f0;
 --otp-stat-icon-bg:#c6e8ce;
 --otp-stat-icon-color:#26713b;
 --otp-stat-value-color:#1e5a30;
 --otp-stat-label-color:#56745e;
 --otp-stat-sub-color:#708c76;
 --otp-stat-bg-dark:#243c2b;
 --otp-stat-icon-bg-dark:#3a6547;
 --otp-stat-icon-color-dark:#b8e9c3;
}

.otp-stat-purple{
 --otp-stat-bg:#f4efff;
 --otp-stat-icon-bg:#ddd0fb;
 --otp-stat-icon-color:#6541a3;
 --otp-stat-value-color:#50327f;
 --otp-stat-label-color:#716084;
 --otp-stat-sub-color:#887a99;
 --otp-stat-bg-dark:#352c49;
 --otp-stat-icon-bg-dark:#574578;
 --otp-stat-icon-color-dark:#d5c3ff;
}

.otp-stat-slate{
 --otp-stat-bg:#f1f3f5;
 --otp-stat-icon-bg:#d7dce1;
 --otp-stat-icon-color:#53606c;
 --otp-stat-value-color:#414b55;
 --otp-stat-label-color:#69737c;
 --otp-stat-sub-color:#808990;
 --otp-stat-bg-dark:#32363d;
 --otp-stat-icon-bg-dark:#4c535d;
 --otp-stat-icon-color-dark:#d4d9df;
}

.otp-stat-label{
 font-size:10px;
 color:var(--otp-stat-label-color);
 text-transform:uppercase;
 letter-spacing:.03em;
 margin-bottom:3px;
}

.otp-stat-value{
 font-size:18px;
 font-weight:700;
 line-height:1.2;
 color:var(--otp-stat-value-color) !important;
}

.otp-stat-icon{
 width:34px;
 height:34px;
 border-radius:11px;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 background:var(--otp-stat-icon-bg);
 color:var(--otp-stat-icon-color);
 flex:0 0 auto;
}


.monthly-activity-stats-grid{
 display:grid;
 grid-template-columns:repeat(7, minmax(0, 1fr));
 gap:10px;
 margin-bottom:16px;
}

.monthly-activity-stats-grid > div{
 min-width:0;
}

.monthly-activity-stats-grid .otp-stat-card{
 min-height:68px;
}

.monthly-activity-stats-grid .otp-stat-label{
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis;
}

@media (max-width:1199.98px){
 .monthly-activity-stats-grid{
  grid-template-columns:repeat(4, minmax(0, 1fr));
 }
}

@media (max-width:767.98px){
 .monthly-activity-stats-grid{
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
 }
}

@media (max-width:420px){
 .monthly-activity-stats-grid{
  grid-template-columns:1fr;
 }
}

.monthly-activity-filter-card label{
 font-weight:600;
 margin-bottom:0.25rem;
}

.dark-mode .otp-stat-card,
body.dark-mode .otp-stat-card{
 background:var(--otp-stat-bg-dark);
 border-color:rgba(255,255,255,.07);
}

.dark-mode .otp-stat-label,
body.dark-mode .otp-stat-label{
 color:var(--otp-stat-label-color-dark) !important;
}

.dark-mode .otp-stat-value,
body.dark-mode .otp-stat-value{
 color:var(--otp-stat-value-color-dark) !important;
}

.dark-mode .otp-stat-icon,
body.dark-mode .otp-stat-icon{
 background:var(--otp-stat-icon-bg-dark);
 color:var(--otp-stat-icon-color-dark);
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/my-custom-list.css
   ========================================================== */
.dt-buttons.btn-group{
 position:relative !important;
 inset-block-end:0 !important;
 inset-inline-start:0 !important;
}

a{
 text-decoration:none !important;
}

.dt-buttons .btn{
 margin-right:5px !important;
}

.dt-buttons .btn:last-child{
 margin-right:0 !important;
}

.dt-buttons .btn.account-columns-btn{
 margin-right:20px !important;
}

/* DataTables Columns dropdown selected-state indicator - copied from account list styling */
div.dt-button-collection .buttons-columnVisibility{
 position:relative !important;
 display:block !important;
 width:100% !important;
 text-align:left !important;
 padding-left:2rem !important;
 color:inherit !important;
 background:transparent !important;
 border:0 !important;
 box-shadow:none !important;
}

div.dt-button-collection .buttons-columnVisibility.active::before,
div.dt-button-collection .buttons-columnVisibility.dt-button-active::before,
div.dt-button-collection .buttons-columnVisibility[aria-pressed="true"]::before{
 content:"\2713";
 position:absolute;
 left:0.75rem;
 top:50%;
 transform:translateY(-50%);
 font-weight:bold;
 font-size:0.85rem;
 color:inherit;
}

div.dt-button-collection .buttons-columnVisibility:hover{
 background:rgba(128,128,128,0.12) !important;
 color:inherit !important;
}

.export-buttons{
 margin-bottom:10px;
 clear:both;
}

.dropdown-menu{
 font-size:0.8rem !important;
 min-width:160px;
}

td .dropdown{
 position:relative;
 display:inline-block;
}

.dropdown-menu-left-fixed{
 right:0 !important;
 left:auto !important;
 transform:none !important;
 position:absolute !important;
 top:100% !important;
 z-index:3000 !important;
 margin-top:0.25rem !important;
}

.dropdown-item{
 padding:0.45rem 0.75rem;
 line-height:1.2;
 white-space:nowrap;
}

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

.btn-hamburger{
 padding:0;
 background-color:transparent;
 border:none;
 color:inherit;
 line-height:1;
}

.btn-hamburger:focus,
.btn-hamburger:hover{
 background-color:transparent !important;
 box-shadow:none !important;
}

.dropdown-submenu{
 position:relative;
}

.dropdown-submenu > .dropdown-menu{
 top:0 !important;
 right:100% !important;
 left:auto !important;
 margin-top:0 !important;
 margin-right:0.15rem !important;
 margin-left:0 !important;
 padding:0 !important;
 font-size:0.8rem !important;
 display:none;
 position:absolute !important;
 z-index:3010 !important;
 min-width:180px;
 transform:none !important;
}

.dropdown-submenu:hover > .dropdown-menu,
.dropdown-submenu:focus-within > .dropdown-menu{
 display:block;
}

.dropdown-submenu > a.dropdown-item{
 display:flex;
 align-items:center;
 justify-content:space-between;
}

.dropdown-submenu > a.dropdown-item::before{
 content:"◀";
 font-size:0.65rem;
 margin-right:0.5rem;
 opacity:0.7;
}

.dropdown-submenu > a.dropdown-item::after{
 content:"";
 margin-left:0;
}

/* DataTables buttons popup should not inherit hamburger positioning */
.dt-button-collection{
 min-width:220px !important;
}

.dt-button-collection .dropdown-menu,
div.dt-button-collection{
 transform:none !important;
 top:auto !important;
 left:auto !important;
 right:auto !important;
}

.account-v2-toolbar-note{
 font-size:12px;
 color:#6c757d;
}

#customListAccounts{
 width:100% !important;
}

#customListAccounts thead th{
 white-space:nowrap !important;
 font-size:12px;
 vertical-align:middle;
 background-color:inherit !important;
 color:inherit !important;
}

#customListAccounts thead th *,
#customListAccounts_wrapper table.dataTable thead th,
#customListAccounts_wrapper table.dataTable thead td{
 white-space:nowrap !important;
 background-color:inherit !important;
 color:inherit !important;
}

#customListAccounts tbody td{
 vertical-align:middle;
}

#customListAccounts td:last-child{
 white-space:nowrap;
}

#customListAccounts .custom-list-icon-cell{
 min-width:56px;
 font-size:18px;
}

#customListAccounts .custom-list-address-cell,
.account-v2-address,
.account-v2-outcome,
.account-v2-opportunity,
.account-v2-task{
 white-space:nowrap !important;
}

#customListAccounts .custom-list-actions{
 display:inline-flex;
 align-items:center;
 gap:6px;
 white-space:nowrap;
}

/* Let linked company names follow the active table/theme colour */
#customListAccounts tbody td a,
#customListAccounts tbody td a strong{
 color:inherit !important;
}

#customListAccounts tbody td a:hover,
#customListAccounts tbody td a:hover strong{
 color:inherit !important;
 text-decoration:underline !important;
}

@media (max-width:767.98px){
 .main-container.container-fluid{
  padding-left:8px !important;
  padding-right:8px !important;
 }

 #customListAccounts_filter{
  text-align:left !important;
  margin-top:10px;
 }

 #customListAccounts_filter input{
  width:100%;
  margin-left:0;
  margin-top:6px;
 }
}

/* CSS Cleanup V1: explicit dark header override for this ID-scoped DataTable. */
body.dark-mode #customListAccounts thead th,
body.dark-mode #customListAccounts thead td {
 background-color:#2e303a !important;
 color:#f4f6fb !important;
 border-color:#454957 !important;
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/newlogin.css
   ========================================================== */
html.crm-newlogin-page {--brand-primary:#0B1F3B;
   --brand-secondary:#1BA6A6;
   --brand-accent:#FFD84D;
   --brand-white:#FFFFFF;
   --page-bg:#f4f6fb;
   --card-border:#e6ebf5;
   --muted:#60708a;}
html.crm-newlogin-page,
body.crm-newlogin-page {height:100%;}
body.crm-newlogin-page {min-height:100vh;
   margin:0;
   background:var(--page-bg);
   color:#1f2a44;
   display:flex;
   flex-direction:column;}
body.crm-newlogin-page .auth-header {width:100%;
   background:var(--brand-white);
   border-bottom:4px solid var(--brand-primary);}
body.crm-newlogin-page .auth-header .inner {max-width:1100px;
   margin:0 auto;
   padding:18px 16px;
   display:flex;
   flex-direction:column;
   align-items:center;
   gap:8px;
   text-align:center;}
body.crm-newlogin-page .auth-logo {height:44px;
   width:auto;}
body.crm-newlogin-page .auth-tagline {font-size:12px;
   letter-spacing:0.18em;
   text-transform:uppercase;
   color:var(--brand-primary);
   font-weight:700;
   opacity:.85;}
body.crm-newlogin-page .auth-hero {background:linear-gradient(135deg,#0B1F3B,#0E2C4F);
   color:#fff;
   padding:48px 16px;}
body.crm-newlogin-page .auth-hero .inner {max-width:1100px;
   margin:0 auto;
   text-align:center;}
body.crm-newlogin-page .auth-hero h1 {font-size:2rem;
   font-weight:800;
   margin-bottom:12px;}
body.crm-newlogin-page .auth-hero p {max-width:760px;
   margin:0 auto;
   color:#d6deea;
   line-height:1.7;}
body.crm-newlogin-page .auth-strip {background:#fff;
   border-bottom:1px solid #e6ebf5;
   padding:18px 0;}
body.crm-newlogin-page .auth-strip .inner {max-width:1100px;
   margin:0 auto;
   padding:0 16px;}
body.crm-newlogin-page .auth-strip .meta-box {text-align:center;}
body.crm-newlogin-page .auth-strip .meta-box .small-label {font-size:12px;
   color:#7b8aa3;
   text-transform:uppercase;
   letter-spacing:.06em;}
body.crm-newlogin-page .auth-strip .meta-box .big-label {font-weight:700;
   color:#0B1F3B;}
body.crm-newlogin-page main.auth-main {flex:1 0 auto;
   width:100%;
   padding:34px 0 42px;}
body.crm-newlogin-page .auth-shell {max-width:1100px;
   margin:0 auto;
   padding:0 16px;}
body.crm-newlogin-page .auth-card {width:100%;
   border:1px solid var(--card-border);
   border-radius:16px;
   overflow:hidden;
   background:var(--brand-white);
   box-shadow:0 14px 30px rgba(11,31,59,.10);}
body.crm-newlogin-page .auth-card-top {height:6px;
   background: linear-gradient(90deg, var(--brand-secondary), var(--brand-accent));}
body.crm-newlogin-page .auth-card-body {padding:26px 26px 20px;}
body.crm-newlogin-page .auth-title {color:var(--brand-primary);
   font-weight:800;
   margin:0;}
body.crm-newlogin-page .auth-subtitle {color:var(--muted);
   margin-top:6px;
   margin-bottom:18px;}
body.crm-newlogin-page .form-signin .form-control {border-radius:12px;
   padding:12px;
   border-color:#d9e1f0;}
body.crm-newlogin-page .form-signin .form-control:focus {border-color: rgba(27,166,166,.55);
   box-shadow: 0 0 0 .25rem rgba(27,166,166,.18);}
body.crm-newlogin-page .form-signin .btn-primary {background:var(--brand-primary);
   border-color:var(--brand-primary);
   border-radius:12px;
   font-weight:700;
   padding:12px 14px;}
body.crm-newlogin-page .form-signin .btn-primary:hover {background:#091a31;
   border-color:#091a31;}
body.crm-newlogin-page .password-wrapper {position: relative;}
body.crm-newlogin-page .password-wrapper .form-control {padding-right: 44px;}
body.crm-newlogin-page .password-wrapper .toggle-password {position: absolute;
 right: 14px;
 top: calc(50% + 13px);
 transform: translateY(-50%);
 cursor: pointer;
 color: #6c757d;
 font-size: 16px;
 line-height: 1;
 z-index: 5;}
body.crm-newlogin-page .password-wrapper .toggle-password:hover {color: #212529;}
body.crm-newlogin-page .login-helper {color: #0B1F3B;}
body.crm-newlogin-page .login-helper .login-link {text-decoration: none;
   font-weight: 500;}
body.crm-newlogin-page .login-helper .signup-link {color: #1BA6A6;}
body.crm-newlogin-page .login-helper .login-link:hover {text-decoration: underline;}
body.crm-newlogin-page .auth-footer {margin-top:auto;
   width:100%;
   background:var(--brand-primary);
   color:rgba(255,255,255,.88);
   flex-shrink:0;}
body.crm-newlogin-page .auth-footer .inner {max-width:1100px;
   margin:0 auto;
   padding:18px 16px;
   display:flex;
   justify-content:space-between;
   flex-wrap:wrap;
   gap:10px;
   font-size:13px;}
body.crm-newlogin-page .auth-footer a {color:var(--brand-accent);
   font-weight:600;
   text-decoration:none;}
body.crm-newlogin-page .auth-footer a:hover {text-decoration:underline;}
@media (max-width: 576px) {
body.crm-newlogin-page .auth-card-body {padding:22px 18px 16px;}
body.crm-newlogin-page .auth-footer .inner {justify-content:center; text-align:center;}
body.crm-newlogin-page .auth-hero h1 {font-size:1.6rem;}
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/opportunities-list.css
   ========================================================== */
.dt-buttons.btn-group{
 position:relative !important;
 inset-block-end:0 !important;
 inset-inline-start:0 !important;
}

a{
 text-decoration:none !important;
}

.otp-report-header{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:12px;
 flex-wrap:wrap;
}

.otp-report-title p{
 margin:4px 0 0 0;
 color:#6c757d;
 font-size:13px;
}

.otp-status-buttons{
 display:flex !important;
 flex-wrap:wrap;
 justify-content:flex-start !important;
 align-items:center;
 gap:8px;
 width:100%;
 margin-left:0 !important;
 margin-right:auto !important;
}

.otp-report-status-row{
 justify-content:flex-start !important;
 width:100%;
 margin-left:0 !important;
 margin-right:auto !important;
}

/* Workflow status groups.
   Open and Completed are the two primary anchors. Related workflow
   statuses use softer shaded buttons so the groups are easy to scan. */
.otp-status-button{
 border-width:1px !important;
 font-weight:600;
 transition:background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.otp-status-button:hover{
 transform:translateY(-1px);
}

.otp-status-button-open{
 background:var(--primary-bg-color, #232f84) !important;
 border-color:var(--primary-bg-color, #232f84) !important;
 color:#fff !important;
}

.otp-status-button-open-related{
 background:rgba(35,47,132,.10) !important;
 border-color:rgba(35,47,132,.24) !important;
 color:var(--primary-bg-color, #232f84) !important;
}

.otp-status-button-completed{
 background:#198754 !important;
 border-color:#198754 !important;
 color:#fff !important;
 margin-left:8px;
}

.otp-status-button-closed-related{
 background:rgba(108,117,125,.14) !important;
 border-color:rgba(108,117,125,.28) !important;
 color:#5c636a !important;
}

.otp-status-button-all,
.otp-status-button-neutral{
 background:transparent !important;
 border-color:rgba(108,117,125,.45) !important;
 color:inherit !important;
}

.otp-status-button-all{
 margin-left:0;
}

.otp-status-button.is-active{
 box-shadow:0 0 0 3px rgba(35,47,132,.20) !important;
 border-color:currentColor !important;
}

.otp-status-button-completed.is-active{
 box-shadow:0 0 0 3px rgba(25,135,84,.22) !important;
}

.otp-status-button-closed-related.is-active{
 background:rgba(108,117,125,.28) !important;
 box-shadow:0 0 0 3px rgba(108,117,125,.18) !important;
}

.dark-mode .otp-status-button-open-related,
body.dark-mode .otp-status-button-open-related{
 background:rgba(120,135,255,.17) !important;
 border-color:rgba(150,160,255,.34) !important;
 color:#cbd1ff !important;
}

.dark-mode .otp-status-button-closed-related,
body.dark-mode .otp-status-button-closed-related{
 background:rgba(255,255,255,.10) !important;
 border-color:rgba(255,255,255,.20) !important;
 color:#d9dde7 !important;
}

.dark-mode .otp-status-button-all,
.dark-mode .otp-status-button-neutral,
body.dark-mode .otp-status-button-all,
body.dark-mode .otp-status-button-neutral{
 border-color:rgba(255,255,255,.30) !important;
 color:#e4e7ee !important;
}

.otp-stat-card,
.otp-filter-card,
.otp-table-card{
 border:0;
 border-radius:18px;
 box-shadow:0 8px 24px rgba(15, 23, 42, 0.08);
 background:#fff;
 height:100%;
}

.otp-stat-card{
 --otp-stat-bg:#eef4ff;
 --otp-stat-icon-bg:#cbdafe;
 --otp-stat-icon-color:#24478f;
 --otp-stat-value-color:#1d376d;
 --otp-stat-label-color:#52678f;
 --otp-stat-sub-color:#6d7f9e;
 --otp-stat-bg-dark:#25304a;
 --otp-stat-icon-bg-dark:#394d78;
 --otp-stat-icon-color-dark:#b9cbff;
 --otp-stat-value-color-dark:#e7edff;
 --otp-stat-label-color-dark:#c4d0ef;
 --otp-stat-sub-color-dark:#aebbd8;
 padding:14px;
 background:var(--otp-stat-bg);
 border:1px solid rgba(15,23,42,.04);
}

.otp-stat-blue{
 --otp-stat-bg:#edf4ff;
 --otp-stat-icon-bg:#c9dcff;
 --otp-stat-icon-color:#2452a4;
 --otp-stat-value-color:#1d4080;
 --otp-stat-label-color:#4e6692;
 --otp-stat-sub-color:#6d7f9f;
 --otp-stat-bg-dark:#26334f;
 --otp-stat-icon-bg-dark:#3d5688;
 --otp-stat-icon-color-dark:#b8ccff;
}

.otp-stat-teal{
 --otp-stat-bg:#e9f8f6;
 --otp-stat-icon-bg:#bfe9e2;
 --otp-stat-icon-color:#176c63;
 --otp-stat-value-color:#14584f;
 --otp-stat-label-color:#4b746f;
 --otp-stat-sub-color:#668a85;
 --otp-stat-bg-dark:#203d3b;
 --otp-stat-icon-bg-dark:#2f625d;
 --otp-stat-icon-color-dark:#a9e2da;
}

.otp-stat-red{
 --otp-stat-bg:#fff0f1;
 --otp-stat-icon-bg:#f8cdd2;
 --otp-stat-icon-color:#a83242;
 --otp-stat-value-color:#842737;
 --otp-stat-label-color:#8e5861;
 --otp-stat-sub-color:#a07179;
 --otp-stat-bg-dark:#4a292f;
 --otp-stat-icon-bg-dark:#743b47;
 --otp-stat-icon-color-dark:#ffc1ca;
}

.otp-stat-amber{
 --otp-stat-bg:#fff7e8;
 --otp-stat-icon-bg:#f8dfad;
 --otp-stat-icon-color:#95610b;
 --otp-stat-value-color:#754b08;
 --otp-stat-label-color:#826b43;
 --otp-stat-sub-color:#9a835c;
 --otp-stat-bg-dark:#463a24;
 --otp-stat-icon-bg-dark:#705729;
 --otp-stat-icon-color-dark:#ffe0a2;
}

.otp-stat-green{
 --otp-stat-bg:#edf8f0;
 --otp-stat-icon-bg:#c6e8ce;
 --otp-stat-icon-color:#26713b;
 --otp-stat-value-color:#1e5a30;
 --otp-stat-label-color:#56745e;
 --otp-stat-sub-color:#708c76;
 --otp-stat-bg-dark:#243c2b;
 --otp-stat-icon-bg-dark:#3a6547;
 --otp-stat-icon-color-dark:#b8e9c3;
}

.otp-stat-purple{
 --otp-stat-bg:#f4efff;
 --otp-stat-icon-bg:#ddd0fb;
 --otp-stat-icon-color:#6541a3;
 --otp-stat-value-color:#50327f;
 --otp-stat-label-color:#716084;
 --otp-stat-sub-color:#887a99;
 --otp-stat-bg-dark:#352c49;
 --otp-stat-icon-bg-dark:#574578;
 --otp-stat-icon-color-dark:#d5c3ff;
}

.otp-stat-slate{
 --otp-stat-bg:#f1f3f5;
 --otp-stat-icon-bg:#d7dce1;
 --otp-stat-icon-color:#53606c;
 --otp-stat-value-color:#414b55;
 --otp-stat-label-color:#69737c;
 --otp-stat-sub-color:#808990;
 --otp-stat-bg-dark:#32363d;
 --otp-stat-icon-bg-dark:#4c535d;
 --otp-stat-icon-color-dark:#d4d9df;
}

.otp-stat-label{
 font-size:12px;
 color:var(--otp-stat-label-color);
 text-transform:uppercase;
 letter-spacing:.03em;
 margin-bottom:6px;
}

.otp-stat-value{
 font-size:22px;
 font-weight:700;
 line-height:1.2;
 color:var(--otp-stat-value-color) !important;
}

.otp-stat-sub{
 font-size:12px;
 color:var(--otp-stat-sub-color);
 margin-top:5px;
}

.otp-stat-icon{
 width:42px;
 height:42px;
 border-radius:14px;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 background:var(--otp-stat-icon-bg);
 color:var(--otp-stat-icon-color);
 flex:0 0 auto;
}

.otp-filter-card{
 margin-bottom:18px;
}


.otp-filter-label{
 font-size:10px;
 font-weight:800;
 color:#6c757d;
 text-transform:uppercase;
 letter-spacing:.05em;
 margin-bottom:5px;
}

.otp-date-presets{
 display:flex;
 flex-wrap:wrap;
 gap:6px;
}

.otp-date-preset{
 border:1px solid #dfe4ee;
 background:#fff;
 border-radius:8px;
 padding:6px 10px;
 font-size:11px;
 font-weight:700;
 color:#4b5563;
 cursor:pointer;
 transition:all .15s ease;
}

.otp-date-preset:hover{
 border-color:rgba(35,47,132,.35);
 color:var(--primary-bg-color, #232f84);
}

.otp-date-preset.active{
 background:var(--primary-bg-color, #232f84);
 border-color:var(--primary-bg-color, #232f84);
 color:#fff;
 box-shadow:0 5px 12px rgba(35,47,132,.18);
}

.otp-filter-status{
 min-height:18px;
 padding-top:3px;
 font-size:10px;
 color:#6c757d;
 text-align:center;
}

body.dark-mode .otp-date-preset,
.dark-mode .otp-date-preset{
 background:#2e303a;
 border-color:#444756;
 color:#d6d9e0;
}

body.dark-mode .otp-date-preset.active,
.dark-mode .otp-date-preset.active{
 background:var(--primary-bg-color, #232f84);
 border-color:var(--primary-bg-color, #232f84);
 color:#fff;
}

body.dark-mode .otp-filter-label,
body.dark-mode .otp-filter-status,
.dark-mode .otp-filter-label,
.dark-mode .otp-filter-status{
 color:#b0b5c0;
}

.otp-table-card .table-responsive{
 width:100%;
 overflow-x:auto;
}

.otp-report-table{
 width:100% !important;
 font-size:13px;
}

.otp-report-table thead th{
 white-space:nowrap !important;
 font-size:12px !important;
 vertical-align:middle !important;
 background-color:inherit !important;
 color:inherit !important;
}

.otp-report-table tbody td{
 vertical-align:middle !important;
 font-size:13px !important;
 white-space:nowrap !important;
}

.otp-report-table td.otp-text-cell{
 white-space:normal !important;
 min-width:220px;
 max-width:360px;
 overflow:hidden;
 text-overflow:ellipsis;
}

.otp-report-table td.otp-actions-cell{
 white-space:nowrap !important;
 text-align:center;
 min-width:90px;
}

.otp-report-table tbody td a,
.otp-report-table tbody td a strong{
 color:inherit !important;
}

.otp-report-table tbody td a:hover,
.otp-report-table tbody td a:hover strong{
 color:inherit !important;
 text-decoration:underline !important;
}

.badge-otp{
 font-size:11px;
 padding:5px 8px;
 border-radius:50px;
}

.otp-actions{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 gap:4px;
}

.otp-actions a{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 width:30px;
 height:30px;
 border-radius:8px;
 text-decoration:none !important;
 background:rgba(35,47,132,.08);
}

.otp-actions a:hover{
 background:rgba(35,47,132,.15);
}

.otp-actions a.text-danger,
.otp-actions .deleteVisitFromList{
 color:#dc3545 !important;
 background:rgba(220,53,69,.08);
}

.otp-table-message .alert{
 margin-bottom:12px;
}

.dark-mode .otp-filter-card,
.dark-mode .otp-table-card,
body.dark-mode .otp-filter-card,
body.dark-mode .otp-table-card{
 background:#2E303A;
 border-color:rgba(255,255,255,0.08);
}

.dark-mode .otp-stat-card,
body.dark-mode .otp-stat-card{
 background:var(--otp-stat-bg-dark);
 border-color:rgba(255,255,255,.07);
}

.dark-mode .otp-stat-label,
body.dark-mode .otp-stat-label{
 color:var(--otp-stat-label-color-dark) !important;
}

.dark-mode .otp-stat-value,
body.dark-mode .otp-stat-value{
 color:var(--otp-stat-value-color-dark) !important;
}

.dark-mode .otp-stat-sub,
body.dark-mode .otp-stat-sub{
 color:var(--otp-stat-sub-color-dark) !important;
}

.dark-mode .otp-stat-icon,
body.dark-mode .otp-stat-icon{
 background:var(--otp-stat-icon-bg-dark);
 color:var(--otp-stat-icon-color-dark);
}


/* Mobile-only spacing reduction for report pages.
   Keeps the desktop card layout unchanged, but gives the DataTable
   almost the full phone viewport on smaller screens. */
@media (max-width: 767.98px){
 .otp-report-mobile-page,
 .otp-report-mobile-page .side-app,
 .otp-report-mobile-page .main-container,
 .otp-report-mobile-page .container-fluid{
  padding-left:2px !important;
  padding-right:2px !important;
 }

 .otp-report-mobile-page .jumps-prevent{
  padding-top:0 !important;
 }

 .otp-report-mobile-page .row,
 .otp-report-mobile-page .row-sm{
  margin-left:-2px !important;
  margin-right:-2px !important;
 }

 .otp-report-mobile-page .row > [class*="col-"],
 .otp-report-mobile-page .row-sm > [class*="col-"]{
  padding-left:2px !important;
  padding-right:2px !important;
 }

 .otp-report-mobile-page .page-header,
 .otp-report-mobile-page .page-title,
 .otp-report-mobile-page .breadcrumb{
  margin-bottom:6px !important;
  padding-left:0 !important;
  padding-right:0 !important;
 }

 .otp-report-mobile-page .card{
  border-radius:10px !important;
  margin-bottom:8px !important;
  padding:5px !important;
 }

 .otp-report-mobile-page .card-header,
 .otp-report-mobile-page .card-body{
  padding:6px !important;
 }

 .otp-report-mobile-page .otp-report-header{
  gap:6px !important;
 }

 .otp-report-mobile-page .otp-report-title p{
  display:none !important;
 }

 .otp-report-mobile-page .otp-status-buttons{
  gap:5px !important;
 }

 .otp-report-mobile-page .otp-status-buttons .btn,
 .otp-report-mobile-page .btn-sm{
  padding:0.25rem 0.45rem !important;
  font-size:12px !important;
 }

 .otp-report-mobile-page .otp-stat-card,
 .otp-report-mobile-page .otp-filter-card,
 .otp-report-mobile-page .otp-table-card{
  border-radius:10px !important;
  box-shadow:none !important;
 }

 .otp-report-mobile-page .otp-stat-card{
  padding:8px !important;
 }

 .otp-report-mobile-page .otp-stat-icon{
  width:34px !important;
  height:34px !important;
  border-radius:10px !important;
 }

 .otp-report-mobile-page .otp-stat-value{
  font-size:18px !important;
 }

 .otp-report-mobile-page .otp-table-card{
  padding:2px !important;
 }

 .otp-report-mobile-page .otp-table-card .card-body{
  padding:2px !important;
 }

 .otp-report-mobile-page .otp-table-card .table-responsive{
  width:calc(100vw - 8px) !important;
  max-width:calc(100vw - 8px) !important;
  margin-left:calc(50% - 50vw + 4px) !important;
  margin-right:calc(50% - 50vw + 4px) !important;
  padding:0 !important;
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch;
 }

 .otp-report-mobile-page .otp-report-table{
  margin-bottom:0 !important;
  font-size:12px !important;
 }

 .otp-report-mobile-page .otp-report-table thead th,
 .otp-report-mobile-page .otp-report-table tbody td{
  padding:0.35rem 0.45rem !important;
  font-size:12px !important;
 }

 .otp-report-mobile-page .otp-report-table td.otp-text-cell{
  min-width:160px !important;
  max-width:220px !important;
 }

 .otp-report-mobile-page .otp-actions a{
  width:26px !important;
  height:26px !important;
 }

 .otp-report-mobile-page .dataTables_wrapper .row,
 .otp-report-mobile-page .dt-container .row{
  margin-left:0 !important;
  margin-right:0 !important;
 }

 .otp-report-mobile-page .dataTables_wrapper .row > [class*="col-"],
 .otp-report-mobile-page .dt-container .row > [class*="col-"]{
  padding-left:0 !important;
  padding-right:0 !important;
 }

 .otp-report-mobile-page .dataTables_length,
 .otp-report-mobile-page .dataTables_filter,
 .otp-report-mobile-page .dataTables_info,
 .otp-report-mobile-page .dataTables_paginate,
 .otp-report-mobile-page .dt-buttons{
  margin-bottom:6px !important;
 }

 .otp-report-mobile-page .dataTables_filter,
 .otp-report-mobile-page .dataTables_filter label,
 .otp-report-mobile-page .dataTables_filter input{
  width:100% !important;
 }

 .otp-report-mobile-page .pagination{
  flex-wrap:wrap !important;
  justify-content:flex-start !important;
 }
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/profile-home.css
   ========================================================== */
/* Settings home: hierarchy + spacing (kept inline for now as requested) */
.settings-section-card {
  border: 0;
  border-radius: 12px;
  margin-bottom: 1.5rem; /* additional separation */
  box-shadow: 0 .5rem 1.5rem rgba(0,0,0,1);
}

.settings-section-header {
  padding: 1.25rem 1.25rem 0.75rem 1.25rem;
}

.settings-section-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
}

.settings-section-subtitle {
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

.settings-section-body {
  padding: 0 1.25rem 1.25rem 1.25rem;
}

}

/* Tiles */
.oldsettings-tile {
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.08);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  min-height: 86px; /* consistent click target */
  background: #fff;
}

.settings-tile {
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.06);
  min-height: 86px;
  background: transparent;
  box-shadow: 0 6px 16px rgba(0,0,0,0.07);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.settings-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.08);
  border-color: rgba(0,0,0,0.14);
}

.settings-tile-body {
  padding: 1rem;
}

.settings-tile-title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.settings-tile-meta {
  font-size: 0.85rem;
  margin-top: 0.3rem;
}

/* Sub-group block (e.g. Default Settings) */
.settings-subgroup {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0,0,0,0.08);
}

.settings-subgroup-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 0.75rem 0;
}

/* Ensure anchor hover doesn't recolor content unexpectedly */
.settings-tile-link,
.settings-tile-link:hover {
  text-decoration: none;
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/public-404.css
   ========================================================== */
body.crm-public-404 .affiliate-404-page {--acr-navy:#0B1F3B;
 --acr-blue:#0E2C4F;
 --acr-muted:#667085;
 --acr-card-border:#e8edf5;
 --acr-warning:#ffc107;
 font-family:"Montserrat", Arial, sans-serif;
 background:#fff;
 color:#1f2937;}
body.crm-public-404 .affiliate-404-hero {background:
  radial-gradient(circle at 18% 15%, rgba(255,193,7,0.18), transparent 28%),
  radial-gradient(circle at 82% 18%, rgba(255,255,255,0.14), transparent 24%),
  linear-gradient(135deg, var(--acr-navy), var(--acr-blue));
 color:#fff;
 overflow:hidden;
 position:relative;}
body.crm-public-404 .affiliate-404-hero:after {content:"";
 position:absolute;
 right:-90px;
 bottom:-120px;
 width:340px;
 height:340px;
 border-radius:50%;
 border:38px solid rgba(255,255,255,0.06);}
body.crm-public-404 .affiliate-404-hero .container {position:relative;
 z-index:2;}
body.crm-public-404 .affiliate-404-badge {display:inline-flex;
 align-items:center;
 gap:8px;
 background:rgba(255,255,255,0.12);
 border:1px solid rgba(255,255,255,0.18);
 border-radius:999px;
 padding:8px 14px;
 color:#f8fafc;
 font-size:13px;
 font-weight:700;
 letter-spacing:.03em;
 text-transform:uppercase;}
body.crm-public-404 .affiliate-404-title {font-size:clamp(2.4rem, 5vw, 4.5rem);
 line-height:1.02;
 font-weight:800;
 letter-spacing:-.04em;
 margin:18px 0 18px;}
body.crm-public-404 .affiliate-404-lead {color:#d6deea;
 font-size:1.12rem;
 line-height:1.75;
 max-width:650px;
 margin:0;}
body.crm-public-404 .affiliate-404-actions {display:flex;
 flex-wrap:wrap;
 gap:12px;
 margin-top:28px;}
body.crm-public-404 .affiliate-404-actions .btn {border-radius:999px;
 padding:.78rem 1.45rem;
 font-weight:700;}
body.crm-public-404 .affiliate-404-panel {background:rgba(255,255,255,0.96);
 color:#1f2937;
 border:1px solid rgba(255,255,255,0.30);
 border-radius:28px;
 box-shadow:0 26px 70px rgba(3,7,18,0.25);
 padding:28px;}
body.crm-public-404 .affiliate-404-number {display:flex;
 align-items:center;
 justify-content:center;
 width:112px;
 height:112px;
 border-radius:28px;
 background:linear-gradient(135deg, #fff7d6, #ffe08a);
 color:#0B1F3B;
 font-size:2rem;
 font-weight:800;
 margin-bottom:18px;}
body.crm-public-404 .affiliate-404-panel h2 {font-size:1.35rem;
 font-weight:800;
 margin-bottom:8px;}
body.crm-public-404 .affiliate-404-panel p {color:var(--acr-muted);
 margin-bottom:0;
 line-height:1.65;}
body.crm-public-404 .affiliate-404-requested {margin-top:18px;
 border-radius:16px;
 background:#f8fafc;
 border:1px solid #e5e7eb;
 padding:12px 14px;
 font-size:13px;
 color:#667085;}
body.crm-public-404 .affiliate-404-requested span {display:block;
 font-weight:700;
 color:#344054;
 margin-bottom:4px;}
body.crm-public-404 .affiliate-404-requested code {color:#0B1F3B;
 white-space:normal;
 word-break:break-word;}
body.crm-public-404 .affiliate-404-links {background:#f8fafc;
 border-bottom:1px solid #e9edf4;}
body.crm-public-404 .affiliate-404-link-card {height:100%;
 background:#fff;
 border:1px solid var(--acr-card-border);
 border-radius:18px;
 padding:22px;
 box-shadow:0 8px 24px rgba(15,23,42,0.05);
 transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;}
body.crm-public-404 .affiliate-404-link-card:hover {transform:translateY(-3px);
 box-shadow:0 14px 34px rgba(15,23,42,0.10);
 border-color:#d7dfec;}
body.crm-public-404 .affiliate-404-link-card a {color:#0B1F3B;
 text-decoration:none;
 font-weight:800;}
body.crm-public-404 .affiliate-404-link-card a:hover {text-decoration:underline;}
body.crm-public-404 .affiliate-404-link-card p {color:var(--acr-muted);
 font-size:14px;
 line-height:1.65;
 margin:.55rem 0 0;}
body.crm-public-404 .affiliate-404-icon {width:42px;
 height:42px;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 border-radius:14px;
 background:#fff7d6;
 color:#0B1F3B;
 font-weight:800;
 margin-bottom:14px;}
body.crm-public-404 .affiliate-404-trust {background:#fff;
 border-bottom:1px solid #e9edf4;}
body.crm-public-404 .affiliate-404-trust .col {color:#667085;
 font-size:13px;
 font-weight:600;}
body.crm-public-404 .affiliate-404-cta {background:#0B1F3B;
 color:#fff;}
body.crm-public-404 .affiliate-404-cta p {color:#d6deea;}
@media (max-width:991.98px) {
body.crm-public-404 .affiliate-404-panel {margin-top:34px;}
}
@media (max-width:575.98px) {
body.crm-public-404 .affiliate-404-actions .btn {width:100%;}
body.crm-public-404 .affiliate-404-panel {padding:22px;
  border-radius:22px;}
body.crm-public-404 .affiliate-404-number {width:92px;
  height:92px;
  border-radius:22px;}
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/quarterly-activity.css
   ========================================================== */
.quarterly-activity-stat-card .card-body{
 min-height:115px;
}

.quarterly-activity-stat-icon{
 width:42px;
 height:42px;
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 background:var(--primary005);
 color:var(--primary-bg-color);
}

.quarterly-activity-summary-value{
 font-size:1.55rem;
 font-weight:700;
 line-height:1.2;
}

.quarterly-activity-summary-label{
 color:#76839a;
 font-size:0.85rem;
}

.quarterly-activity-filter-card label{
 font-weight:600;
 margin-bottom:0.25rem;
}

#quarterlyActivityTable{
 width:100% !important;
}

#quarterlyActivityTable thead th{
 white-space:nowrap;
 font-size:12px;
 vertical-align:middle;
}

#quarterlyActivityTable tbody td{
 vertical-align:middle;
}

.dark-mode .quarterly-activity-summary-label{
 color:#d6deea !important;
}

.dark-mode .quarterly-activity-stat-icon{
 background:rgba(255,255,255,0.08);
 color:#fff;
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/reportMate.css
   ========================================================== */
body.crm-reportmate-page {background-color: #f9f9f9;}
body.crm-reportmate-page .header-container {background: linear-gradient(135deg, #6a9bf3, #95e5b5);
            color: white;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
            text-align: center;}
body.crm-reportmate-page .header-container h1 {font-family: "Arial", sans-serif;
            font-size: 2.5rem;
            margin-bottom: 10px;}
body.crm-reportmate-page .header-container p {font-family: "Arial", sans-serif;
            font-size: 1.2rem;}
body.crm-reportmate-page .nav-tabs .nav-link.active {background-color: #6a9bf3;
            color: white;}
body.crm-reportmate-page .nav-tabs .nav-link {color: #6a9bf3;}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/reports-permission-flow-template.css
   ========================================================== */
.reports-v4-page {
 --r4-primary: var(--primary-bg-color, #232f84);
 --r4-surface: #ffffff;
 --r4-surface-soft: #f7f9fc;
 --r4-border: #e5e9f2;
 --r4-text: #20263d;
 --r4-muted: #6b7280;
 --r4-shadow: 0 8px 24px rgba(15,23,42,.08);
}

.reports-v4-page a { text-decoration:none !important; }

.reports-v4-filter-card,
.reports-v4-library-card {
 border:0;
 border-radius:16px;
 box-shadow:var(--r4-shadow);
 background:var(--r4-surface);
 overflow:hidden;
}

.reports-v4-filter-head-actions {
 display:flex;
 align-items:center;
 justify-content:flex-end;
 gap:10px;
 flex-wrap:wrap;
 margin-left:auto;
}

.reports-v4-filter-summary {
 display:flex;
 align-items:stretch;
 gap:7px;
 flex-wrap:wrap;
}

.reports-v4-filter-summary-item {
 display:flex;
 align-items:center;
 gap:7px;
 min-height:34px;
 padding:6px 9px;
 border:1px solid var(--r4-border);
 border-radius:8px;
 background:var(--r4-surface-soft);
 white-space:nowrap;
}

.reports-v4-filter-summary-item strong {
 font-size:14px;
 line-height:1;
 color:var(--r4-text);
 font-weight:800;
}

.reports-v4-filter-summary-item span {
 font-size:10px;
 line-height:1.1;
 color:var(--r4-muted);
 font-weight:600;
}

.reports-v4-card-header {
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:10px;
 padding:14px 16px;
 border-bottom:1px solid var(--r4-border);
 background:transparent;
 flex-wrap:wrap;
}
.reports-v4-card-header h3 { margin:0; font-size:16px; font-weight:800; color:var(--r4-text); }
.reports-v4-card-header p { margin:2px 0 0; font-size:11px; color:var(--r4-muted); }

.reports-v4-filter-card .card-body { padding:13px 16px 14px; }
.reports-v4-filter-card .form-control,
.reports-v4-filter-card .form-select { min-height:34px; height:34px; padding-top:5px; padding-bottom:5px; font-size:12px; }
.reports-v4-filter-card .btn { min-height:34px; font-size:12px; font-weight:700; }
.reports-v4-filter-label {
 font-size:10px;
 font-weight:800;
 color:var(--r4-muted);
 text-transform:uppercase;
 letter-spacing:.05em;
 margin-bottom:5px;
}
.reports-v4-filter-help { font-size:10px; color:var(--r4-muted); margin-top:2px; line-height:1.35; }

.reports-v4-date-presets { display:flex; flex-wrap:wrap; gap:6px; }
.reports-v4-date-preset,
.reports-v4-scope-btn,
.reports-v4-category-btn {
 border:1px solid var(--r4-border);
 background:var(--r4-surface);
 border-radius:8px;
 padding:6px 10px;
 font-size:11px;
 font-weight:700;
 color:#4b5563;
 cursor:pointer;
 transition:all .15s ease;
}
.reports-v4-date-preset:hover,
.reports-v4-scope-btn:hover,
.reports-v4-category-btn:hover { border-color:rgba(35,47,132,.35); color:var(--r4-primary); }
.reports-v4-date-preset.active,
.reports-v4-scope-btn.active,
.reports-v4-category-btn.active {
 background:var(--r4-primary);
 border-color:var(--r4-primary);
 color:#fff;
 box-shadow:0 5px 12px rgba(35,47,132,.18);
}
.reports-v4-scope-wrap { display:flex; flex-wrap:wrap; gap:7px; }

.reports-v4-filter-status {
 min-height:18px;
 font-size:11px;
 color:#198754;
 margin-top:6px;
 text-align:right;
}

.reports-v4-library-card .card-body { padding:20px; }
.reports-v4-library-tools { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.reports-v4-search-wrap { position:relative; min-width:240px; }
.reports-v4-search-wrap i { position:absolute; top:50%; left:12px; transform:translateY(-50%); color:#98a1ad; font-size:12px; }
.reports-v4-search-wrap input { padding-left:34px; border-radius:999px; }
.reports-v4-category-bar { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:22px; }
.reports-v4-category-btn .badge { font-size:10px; margin-left:5px; }

.report-category-section { margin-bottom:28px; }
.report-category-section:last-child { margin-bottom:0; }
.report-category-heading { display:flex; align-items:center; gap:11px; margin-bottom:12px; }
.report-category-icon {
 width:38px;
 height:38px;
 border-radius:12px;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 color:var(--r4-primary);
 background:rgba(35,47,132,.09);
 flex:0 0 auto;
}
.report-category-title { font-size:15px; font-weight:800; color:var(--r4-text); margin:0; }
.report-category-description { color:var(--r4-muted); font-size:11px; margin-top:2px; }

.report-grid-card {
 --report-accent: var(--r4-primary);
 --report-soft: rgba(35,47,132,.08);
 position:relative;
 height:100%;
 border:1px solid var(--r4-border);
 border-radius:17px;
 background:var(--r4-surface);
 transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
 overflow:hidden;
}
.report-grid-card::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--report-accent); opacity:.85; }
.report-grid-card:hover { transform:translateY(-2px); border-color:rgba(35,47,132,.18); box-shadow:0 12px 28px rgba(15,23,42,.10); }
.report-grid-card.report-tone-info { --report-accent:#0dcaf0; --report-soft:rgba(13,202,240,.10); }
.report-grid-card.report-tone-success { --report-accent:#198754; --report-soft:rgba(25,135,84,.09); }
.report-grid-card.report-tone-warning { --report-accent:#d28a00; --report-soft:rgba(255,193,7,.13); }
.report-grid-card.report-tone-danger { --report-accent:#dc3545; --report-soft:rgba(220,53,69,.09); }
.report-grid-card.report-tone-secondary { --report-accent:#6c757d; --report-soft:rgba(108,117,125,.10); }
.report-grid-card-body { padding:17px 17px 16px 20px; min-height:246px; display:flex; flex-direction:column; }
.report-grid-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.report-grid-icon {
 width:44px;
 height:44px;
 border-radius:14px;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 background:var(--report-soft);
 color:var(--report-accent);
 font-size:18px;
 flex:0 0 auto;
}
.report-grid-category { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--report-accent); }
.report-grid-card h4 { font-size:15px; font-weight:800; color:var(--r4-text); margin:13px 0 6px; }
.report-grid-card p { font-size:12px; color:var(--r4-muted); line-height:1.5; margin:0 0 12px; }
.report-grid-hint { font-size:11px; color:#7b8490; line-height:1.45; margin-bottom:13px; }
.report-grid-meta { margin-top:auto; border-top:1px solid var(--r4-border); padding-top:12px; }
.report-grid-meta-row { display:flex; align-items:flex-start; gap:7px; color:var(--r4-muted); font-size:10px; line-height:1.35; margin-bottom:5px; }
.report-grid-meta-row:last-child { margin-bottom:0; }
.report-grid-meta-row i { color:var(--report-accent); width:12px; margin-top:2px; }
.report-grid-actions { margin-top:13px; display:flex; gap:7px; }
.report-grid-actions .btn { font-weight:700; }
.report-card-hidden { display:none !important; }

.report-empty-card {
 border:1px dashed #cfd5df;
 border-radius:17px;
 padding:34px 22px;
 text-align:center;
 color:var(--r4-muted);
 background:var(--r4-surface-soft);
}
.report-empty-card i { font-size:30px; color:#a7afba; margin-bottom:10px; }

/* Report workspace */
#reportViewModal .modal-dialog { max-width:1500px; width:calc(100% - 34px); }
#reportViewModal .modal-content { border:0; border-radius:18px; overflow:hidden; box-shadow:0 22px 65px rgba(15,23,42,.28); }
#reportViewModal .modal-header {
 background:linear-gradient(135deg,#0b1f3b,#172d69);
 color:#fff;
 border-bottom:0;
 padding:18px 20px;
}
#reportViewModal .btn-close { filter:invert(1); opacity:.85; }
.report-workspace-heading { display:flex; align-items:center; gap:12px; min-width:0; }
.report-workspace-icon { width:44px; height:44px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.12); color:#fff; flex:0 0 auto; }
.report-workspace-title { font-size:18px; font-weight:800; margin:0; color:#fff; }
.report-workspace-subtitle { font-size:11px; color:rgba(255,255,255,.72); margin-top:3px; white-space:normal; }
.report-print-brand { display:none; }
#reportViewModalBody { background:#f6f8fc; padding:18px; }
.report-workspace-toolbar {
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:10px;
 flex-wrap:wrap;
 background:#fff;
 border:1px solid var(--r4-border);
 border-radius:14px;
 padding:10px 12px;
 margin-bottom:14px;
}
.report-workspace-filter-chips { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.report-workspace-chip { display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:5px 9px; background:#f1f4f8; color:#5c6675; font-size:10px; font-weight:700; }
.report-workspace-actions { display:flex; gap:7px; flex-wrap:wrap; }
.report-workspace-actions .btn { font-weight:700; }

.report-modal-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:11px; margin-bottom:14px; }
.report-modal-stat {
 --summary-accent:var(--r4-primary);
 border:1px solid var(--r4-border);
 border-radius:14px;
 background:#fff;
 padding:13px;
 min-height:92px;
 position:relative;
 overflow:hidden;
}
.report-modal-stat .label { font-size:10px; color:#737d8a; font-weight:800; text-transform:uppercase; letter-spacing:.04em; margin-bottom:7px; }
.report-modal-stat .value { font-size:23px; line-height:1.15; font-weight:800; color:#1f2937; word-break:break-word; }

.report-workspace-insights {
 display:grid;
 grid-template-columns:minmax(250px,360px) 1fr;
 gap:14px;
 margin-bottom:14px;
}
.report-insight-card,
.report-table-card { background:#fff; border:1px solid var(--r4-border); border-radius:14px; overflow:hidden; }
.report-insight-card { padding:15px; }
.report-insight-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:11px; }
.report-insight-heading strong { font-size:12px; color:#30384b; }
.report-insight-heading span { font-size:10px; color:#8b95a1; }
.report-summary-bars { display:flex; flex-direction:column; gap:9px; }
.report-summary-bar-row { display:grid; grid-template-columns:minmax(90px,125px) 1fr auto; align-items:center; gap:8px; }
.report-summary-bar-label { font-size:10px; color:#5f6875; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.report-summary-bar-track { height:7px; border-radius:999px; background:#edf0f5; overflow:hidden; }
.report-summary-bar-fill { display:block; height:100%; border-radius:999px; background:var(--r4-primary); min-width:2px; }
.report-summary-bar-value { font-size:10px; font-weight:800; color:#424b5b; }
.report-summary-empty { color:#8b95a1; font-size:11px; line-height:1.45; padding:10px 0; }
.report-basis-card { padding:15px; display:flex; flex-direction:column; gap:10px; }
.report-basis-row { display:flex; gap:9px; align-items:flex-start; }
.report-basis-icon { width:30px; height:30px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; background:rgba(35,47,132,.08); color:var(--r4-primary); flex:0 0 auto; }
.report-basis-row strong { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:#7a8491; }
.report-basis-row span { display:block; font-size:11px; color:#3f4858; margin-top:2px; line-height:1.4; }

.report-table-card { padding:0; }
.report-table-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:12px 14px; border-bottom:1px solid var(--r4-border); }
.report-table-toolbar strong { font-size:12px; color:#30384b; }
.report-table-search { position:relative; width:min(100%,280px); }
.report-table-search i { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:#9aa3af; font-size:11px; }
.report-table-search input { padding-left:30px; border-radius:999px; height:34px; font-size:11px; }
.report-modal-table { width:100%; overflow-x:auto; }
.report-modal-table table { margin:0 !important; width:100% !important; font-size:11px; }
.report-modal-table thead th { white-space:nowrap; background:#f8f9fc !important; color:#566071 !important; font-size:10px; text-transform:uppercase; letter-spacing:.03em; border-bottom-width:1px !important; }
.report-modal-table td { white-space:nowrap; vertical-align:middle !important; }
.report-modal-table td.report-notes { white-space:normal; min-width:240px; max-width:420px; line-height:1.45; }
.report-status-pill { display:inline-flex; align-items:center; border-radius:999px; padding:4px 8px; font-size:9px; font-weight:800; background:#eef1f5; color:#5d6674; }
.report-status-pill.status-good { background:rgba(25,135,84,.11); color:#17663f; }
.report-status-pill.status-risk { background:rgba(220,53,69,.10); color:#a62936; }
.report-status-pill.status-warn { background:rgba(255,193,7,.16); color:#856404; }
.report-dt-top,
.report-dt-bottom { padding:9px 13px; display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; font-size:10px; color:#737d89; }
.report-dt-top { border-bottom:1px solid #edf0f4; }
.report-dt-bottom { border-top:1px solid #edf0f4; }
.report-dt-top .dataTables_length label { display:flex; align-items:center; gap:5px; margin:0; }
.report-dt-top .dataTables_length select { width:auto !important; min-width:68px; }
.report-dt-bottom .dataTables_info { padding-top:0 !important; }
.report-dt-bottom .pagination { margin:0 !important; }

body.dark-mode .reports-v4-page {
 --r4-surface:#2e303a;
 --r4-surface-soft:#272933;
 --r4-border:#3b3e4d;
 --r4-text:#f3f4f8;
 --r4-muted:#b0b5c0;
 --r4-shadow:none;
}
body.dark-mode .reports-v4-filter-summary-item { background:#272933; border-color:#444756; }
body.dark-mode .reports-v4-date-preset,
body.dark-mode .reports-v4-scope-btn,
body.dark-mode .reports-v4-category-btn { background:#2e303a; border-color:#444756; color:#d6d9e0; }
body.dark-mode .reports-v4-date-preset.active,
body.dark-mode .reports-v4-scope-btn.active,
body.dark-mode .reports-v4-category-btn.active { background:var(--r4-primary); color:#fff; border-color:var(--r4-primary); }
body.dark-mode .report-grid-card { background:#2e303a; }
body.dark-mode .report-grid-card p,
body.dark-mode .report-grid-hint,
body.dark-mode .report-grid-meta-row { color:#b0b5c0; }
body.dark-mode .report-empty-card { background:#272933; border-color:#454858; }
body.dark-mode #reportViewModal .modal-content { background:#2e303a; }
body.dark-mode #reportViewModalBody { background:#22242d; }
body.dark-mode .report-workspace-toolbar,
body.dark-mode .report-modal-stat,
body.dark-mode .report-insight-card,
body.dark-mode .report-table-card { background:#2e303a; border-color:#3b3e4d; }
body.dark-mode .report-workspace-chip { background:#3a3d49; color:#d2d6df; }
body.dark-mode .report-modal-stat .label,
body.dark-mode .report-insight-heading span,
body.dark-mode .report-basis-row strong { color:#a9afbb; }
body.dark-mode .report-modal-stat .value,
body.dark-mode .report-insight-heading strong,
body.dark-mode .report-table-toolbar strong,
body.dark-mode .report-basis-row span,
body.dark-mode .report-summary-bar-value { color:#f1f3f7; }
body.dark-mode .report-summary-bar-label { color:#c4c9d2; }
body.dark-mode .report-summary-bar-track { background:#3b3e49; }
body.dark-mode .report-modal-table thead th { background:#272933 !important; color:#d9dce3 !important; border-color:#3b3e4d !important; }
body.dark-mode .report-modal-table tbody td { background:#2e303a !important; color:#e8eaf0 !important; border-color:#3b3e4d !important; }
body.dark-mode .report-dt-top,
body.dark-mode .report-dt-bottom { border-color:#3b3e4d; color:#b9bec8; }
body.dark-mode .report-status-pill { background:#3e414d; color:#dfe2e8; }
body.dark-mode .report-table-search input { background:#272933; border-color:#454856; color:#fff; }
body.dark-mode .reports-v4-search-wrap input { background:#272933; border-color:#454856; color:#fff; }
body.dark-mode .form-control,
body.dark-mode .form-select { border-color:#454856; }

@media(max-width:1199px) {
 .reports-v4-filter-head-actions { width:100%; justify-content:space-between; }
 .report-modal-summary { grid-template-columns:repeat(2,1fr); }
 .report-workspace-insights { grid-template-columns:1fr; }
}

@media(max-width:767px) {
 .reports-v4-card-header { padding:12px 13px; align-items:flex-start; }
 .reports-v4-filter-head-actions { width:100%; align-items:stretch; }
 .reports-v4-filter-summary { flex:1 1 100%; display:grid; grid-template-columns:repeat(3,1fr); }
 .reports-v4-filter-summary-item { min-width:0; white-space:normal; flex-direction:column; align-items:flex-start; gap:2px; }
 .reports-v4-filter-card .card-body { padding:11px 13px 12px; }
 .reports-v4-library-card .card-body { padding:15px; }
 .reports-v4-search-wrap { min-width:100%; width:100%; }
 .reports-v4-library-tools { width:100%; }
 .reports-v4-category-bar { overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; }
 .reports-v4-category-btn { white-space:nowrap; }
 .report-grid-card-body { min-height:auto; }
 #reportViewModal .modal-dialog { width:100%; max-width:none; height:100%; margin:0; }
 #reportViewModal .modal-content { min-height:100%; border-radius:0; }
 #reportViewModal .modal-header { padding:14px; }
 #reportViewModalBody { padding:12px; }
 .report-workspace-icon { width:38px; height:38px; border-radius:12px; }
 .report-workspace-title { font-size:15px; }
 .report-workspace-toolbar { padding:9px; }
 .report-workspace-actions { width:100%; }
 .report-workspace-actions .btn { flex:1 1 auto; }
 .report-modal-summary { grid-template-columns:1fr 1fr; }
 .report-modal-stat { min-height:80px; }
 .report-modal-stat .value { font-size:19px; }
 .report-summary-bar-row { grid-template-columns:85px 1fr auto; }
 .report-table-toolbar { align-items:flex-start; }
 .report-table-search { width:100%; }
 .reports-v4-filter-status { text-align:left; }
}

@media(max-width:420px) {
 .report-modal-summary { grid-template-columns:1fr; }
}

@media print {
 body.reports-v4-printing > * { visibility:hidden !important; }
 body.reports-v4-printing #reportViewModal,
 body.reports-v4-printing #reportViewModal * { visibility:visible !important; }
 body.reports-v4-printing #reportViewModal { position:absolute !important; inset:0 !important; display:block !important; overflow:visible !important; background:#fff !important; }
 body.reports-v4-printing #reportViewModal .modal-dialog { width:100% !important; max-width:none !important; margin:0 !important; }
 body.reports-v4-printing #reportViewModal .modal-content { box-shadow:none !important; border-radius:0 !important; }
 body.reports-v4-printing .report-print-brand { display:flex !important; align-items:center; justify-content:space-between; gap:18px; padding:0 0 14px; margin-bottom:14px; border-bottom:1px solid #dfe3ea; }
 body.reports-v4-printing .report-print-brand img { max-width:210px; max-height:70px; object-fit:contain; }
 body.reports-v4-printing .report-print-brand-title { text-align:right; color:#111827; }
 body.reports-v4-printing .report-print-brand-title strong { display:block; font-size:16pt; }
 body.reports-v4-printing .report-print-brand-title span { display:block; font-size:9pt; margin-top:3px; color:#5b6472; }
 body.reports-v4-printing .report-workspace-actions,
 body.reports-v4-printing .report-table-search,
 body.reports-v4-printing .btn-close,
 body.reports-v4-printing .modal-footer,
 body.reports-v4-printing .dataTables_length,
 body.reports-v4-printing .dataTables_paginate { display:none !important; }
 body.reports-v4-printing .report-modal-table { overflow:visible !important; }
 body.reports-v4-printing .report-modal-table td,
 body.reports-v4-printing .report-modal-table th { white-space:normal !important; font-size:8pt !important; }
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/reports.css
   ========================================================== */
.reports-page a{ text-decoration:none !important; }

.reports-hero{
 border:0;
 border-radius:22px;
 overflow:hidden;
 background:linear-gradient(135deg,#0B1F3B 0%,#132F58 52%,#232f84 100%);
 color:#fff;
 box-shadow:0 18px 45px rgba(15,23,42,.18);
}

.reports-hero .card-body{ padding:28px; }

.reports-hero-kicker{
 display:inline-flex;
 align-items:center;
 gap:8px;
 padding:6px 12px;
 border-radius:999px;
 background:rgba(255,255,255,.10);
 color:#FFD84D;
 font-size:12px;
 font-weight:800;
 letter-spacing:.04em;
 text-transform:uppercase;
 margin-bottom:12px;
}

.reports-hero h2{ color:#fff; font-weight:800; margin-bottom:8px; }
.reports-hero p{ color:rgba(255,255,255,.78); max-width:820px; margin-bottom:0; }

.reports-hero-actions{ display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; }

.reports-access-grid{
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:14px;
 margin-top:20px;
}

.reports-access-card{
 border:1px solid rgba(255,255,255,.14);
 border-radius:18px;
 padding:15px;
 background:rgba(255,255,255,.08);
 backdrop-filter:blur(6px);
 min-height:126px;
}

.reports-access-card-icon{
 width:40px;
 height:40px;
 border-radius:14px;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 color:#0B1F3B;
 background:#FFD84D;
 margin-bottom:12px;
}

.reports-access-card h5{ color:#fff; margin-bottom:5px; font-weight:800; }
.reports-access-card p{ font-size:12px; color:rgba(255,255,255,.73); margin-bottom:0; }

.reports-filter-card,
.reports-library-card,
.reports-results-card{
 border:0;
 border-radius:20px;
 box-shadow:0 10px 30px rgba(15,23,42,.08);
 overflow:hidden;
}

.reports-filter-card .card-header,
.reports-library-card .card-header,
.reports-results-card .card-header{ border-bottom:1px solid rgba(15,23,42,.06); }

.reports-filter-label{
 font-size:12px;
 font-weight:800;
 color:#6c757d;
 text-transform:uppercase;
 letter-spacing:.03em;
 margin-bottom:6px;
}

.reports-scope-pills{ display:flex; flex-wrap:wrap; gap:8px; }

.reports-scope-pill{
 border:1px solid rgba(15,23,42,.10);
 background:#fff;
 border-radius:999px;
 padding:8px 14px;
 font-size:13px;
 font-weight:800;
 color:#4b5563;
 cursor:pointer;
}

.reports-scope-pill.active{
 background:var(--primary-bg-color);
 color:#fff;
 border-color:var(--primary-bg-color);
}

.report-category-heading{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:12px;
 margin:4px 0 14px 0;
}

.report-category-heading h4{ font-weight:800; margin-bottom:0; }

.report-card{
 position:relative;
 border:1px solid rgba(15,23,42,.08);
 border-radius:18px;
 transition:all .18s ease;
 height:100%;
 overflow:hidden;
 background:#fff;
}

.report-card:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(15,23,42,.10); }
.report-card.report-active{ border-color:var(--primary-bg-color); box-shadow:0 12px 30px rgba(35,47,132,.14); }
.report-card.report-scope-hidden{ display:none !important; }

.report-card-body{ padding:18px; }

.report-card-top{
 display:flex;
 align-items:flex-start;
 justify-content:space-between;
 gap:12px;
 margin-bottom:16px;
}

.report-card-icon{
 width:44px;
 height:44px;
 border-radius:15px;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 background:rgba(35,47,132,.10);
 color:var(--primary-bg-color);
 font-size:18px;
}

.report-card-number{ font-size:28px; font-weight:800; line-height:1; margin-top:4px; }
.report-card h5{ font-weight:800; margin-bottom:8px; }
.report-card p{ color:#6c757d; font-size:13px; min-height:56px; margin-bottom:15px; }

.report-card-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.report-mini-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px; }

.report-severity-dot{ width:10px; height:10px; border-radius:999px; display:inline-block; margin-right:6px; }
.report-severity-info{ background:#0dcaf0; }
.report-severity-success{ background:#198754; }
.report-severity-warning{ background:#ffc107; }
.report-severity-danger{ background:#dc3545; }
.report-severity-primary{ background:var(--primary-bg-color); }

.report-results-empty{ padding:44px 20px; text-align:center; color:#6c757d; }
.report-results-empty i{ font-size:38px; opacity:.45; margin-bottom:12px; }

#reportResultsTable{ width:100% !important; }
#reportResultsTable thead th,
#reportResultsTable tbody td{ white-space:nowrap !important; vertical-align:middle !important; }
#reportResultsTable tbody td.report-result-notes{ white-space:normal !important; min-width:260px; }

.report-preview-alert{ border-radius:14px; }

@media(max-width:1199px){ .reports-access-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:991px){ .reports-hero-actions{ justify-content:flex-start; margin-top:18px; } }
@media(max-width:575px){
 .reports-hero .card-body{ padding:20px; }
 .reports-access-grid{ grid-template-columns:1fr; }
 .report-card-actions .btn{ width:100%; }
 .reports-scope-pills{ display:grid; grid-template-columns:1fr; }
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/rightsidebar.css
   ========================================================== */
/* Wider right sidebar: desktop gets a proper schedule panel, mobile stays edge-to-edge friendly. */
           .sidebar.sidebar-right.crm-wide-right-sidebar {
            width: 480px !important;
            max-width: calc(100vw - 32px) !important;
            right: -700px !important;
            border-radius: 20px 0 0 20px;
            overflow: hidden;
            box-shadow: -18px 0 45px rgba(15, 23, 42, .18);
           }

           .sidebar.sidebar-right.crm-wide-right-sidebar.sidebar-open,
           .sidebar.sidebar-right.crm-wide-right-sidebar.open,
           .sidebar.sidebar-right.crm-wide-right-sidebar.active,
           .sidebar.sidebar-right.crm-wide-right-sidebar.show,
           .sidebar.sidebar-right.crm-wide-right-sidebar.sidebar-opened,
           body.sidebar-right-open .sidebar.sidebar-right.crm-wide-right-sidebar,
           body.sidebar-open .sidebar.sidebar-right.crm-wide-right-sidebar {
            right: 0 !important;
           }

           @media (min-width: 1400px) {
            .sidebar.sidebar-right.crm-wide-right-sidebar {
             width: 580px !important;
             right: -760px !important;
            }

            .sidebar.sidebar-right.crm-wide-right-sidebar.sidebar-open,
            .sidebar.sidebar-right.crm-wide-right-sidebar.open,
            .sidebar.sidebar-right.crm-wide-right-sidebar.active,
            .sidebar.sidebar-right.crm-wide-right-sidebar.show,
            .sidebar.sidebar-right.crm-wide-right-sidebar.sidebar-opened,
            body.sidebar-right-open .sidebar.sidebar-right.crm-wide-right-sidebar,
            body.sidebar-open .sidebar.sidebar-right.crm-wide-right-sidebar {
             right: 0 !important;
            }
           }

           @media (max-width: 991.98px) {
            .sidebar.sidebar-right.crm-wide-right-sidebar {
             width: 94vw !important;
             max-width: 94vw !important;
             right: -96vw !important;
             border-radius: 18px 0 0 18px;
            }

            .sidebar.sidebar-right.crm-wide-right-sidebar.sidebar-open,
            .sidebar.sidebar-right.crm-wide-right-sidebar.open,
            .sidebar.sidebar-right.crm-wide-right-sidebar.active,
            .sidebar.sidebar-right.crm-wide-right-sidebar.show,
            .sidebar.sidebar-right.crm-wide-right-sidebar.sidebar-opened,
            body.sidebar-right-open .sidebar.sidebar-right.crm-wide-right-sidebar,
            body.sidebar-open .sidebar.sidebar-right.crm-wide-right-sidebar {
             right: 0 !important;
            }
           }

           @media (max-width: 575.98px) {
            .sidebar.sidebar-right.crm-wide-right-sidebar {
             width: 100vw !important;
             max-width: 100vw !important;
             right: -102vw !important;
             border-radius: 0;
            }

            .sidebar.sidebar-right.crm-wide-right-sidebar.sidebar-open,
            .sidebar.sidebar-right.crm-wide-right-sidebar.open,
            .sidebar.sidebar-right.crm-wide-right-sidebar.active,
            .sidebar.sidebar-right.crm-wide-right-sidebar.show,
            .sidebar.sidebar-right.crm-wide-right-sidebar.sidebar-opened,
            body.sidebar-right-open .sidebar.sidebar-right.crm-wide-right-sidebar,
            body.sidebar-open .sidebar.sidebar-right.crm-wide-right-sidebar {
             right: 0 !important;
            }
           }

           .crm-today-sidebar {
            min-height: 100%;
            background: var(--white, #ffffff);
           }

           .crm-today-sidebar .tab-menu-heading {
            background: linear-gradient(135deg, #0B1F3B 0%, #232f84 100%);
            color: #ffffff;
            border-bottom: 0 !important;
           }

           .crm-today-sidebar .card-title {
            color: #ffffff;
            font-weight: 700;
            letter-spacing: .01em;
           }

           .crm-today-body {
            height: calc(100vh - 72px);
            overflow-y: auto;
            background: linear-gradient(180deg, rgba(11,31,59,.04), rgba(35,47,132,.02));
           }

           .crm-today-hero {
            margin: 20px;
            padding: 22px;
            border-radius: 18px;
            background: linear-gradient(135deg, #0B1F3B 0%, #132F58 55%, #232f84 100%);
            color: #ffffff;
            box-shadow: 0 12px 30px rgba(11, 31, 59, .22);
            position: relative;
            overflow: hidden;
           }

           .crm-today-hero:after {
            content: "";
            position: absolute;
            width: 150px;
            height: 150px;
            right: -55px;
            top: -55px;
            border-radius: 999px;
            background: rgba(255, 216, 77, .16);
           }

           .crm-today-kicker {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: .12em;
            color: #FFD84D;
            font-weight: 800;
            margin-bottom: 5px;
           }

           .crm-today-date {
            position: relative;
            z-index: 1;
            font-size: 22px;
            line-height: 1.25;
            font-weight: 800;
            margin-bottom: 14px;
           }

           .crm-today-stats {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
           }

           .crm-today-stat {
            border-radius: 14px;
            padding: 13px 12px;
            background: rgba(255,255,255,.10);
            border: 1px solid rgba(255,255,255,.12);
            backdrop-filter: blur(6px);
           }

           .crm-today-stat strong {
            display: block;
            color: #ffffff;
            font-size: 18px;
            line-height: 1;
           }

           .crm-today-stat span {
            display: block;
            color: rgba(255,255,255,.74);
            font-size: 11px;
            margin-top: 5px;
           }

           .crm-today-next {
            margin: 0 20px 16px;
            padding: 14px 16px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            background: rgba(255, 216, 77, .16);
            border: 1px solid rgba(255, 216, 77, .32);
            color: inherit;
           }

           .crm-today-next-icon {
            width: 34px;
            height: 34px;
            min-width: 34px;
            border-radius: 11px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #FFD84D;
            color: #0B1F3B;
            margin-right: 10px;
           }

           .crm-today-section-title {
            margin: 0 20px 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
           }

           .crm-today-section-title h6 {
            margin: 0;
            font-weight: 800;
           }

           .crm-today-section-title a {
            font-size: 12px;
            font-weight: 700;
           }

           .crm-schedule-list {
            margin: 0 20px 20px;
            padding: 0;
            list-style: none;
           }

           .crm-schedule-item {
            position: relative;
            display: flex;
            gap: 16px;
            padding: 14px 0;
           }

           .crm-schedule-item:not(:last-child) {
            border-bottom: 1px solid rgba(0,0,0,.06);
           }

           .crm-schedule-time {
            width: 92px;
            min-width: 92px;
            font-size: 12px;
            font-weight: 800;
            line-height: 1.25;
            color: var(--primary-bg-color, #232f84);
            padding-top: 3px;
           }

           .crm-schedule-card {
            flex: 1;
            min-width: 0;
            border-radius: 18px;
            padding: 16px;
            background: #ffffff;
            border: 1px solid rgba(15,23,42,.07);
            box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
           }

           .crm-schedule-topline {
            display: flex;
            align-items: flex-start;
            gap: 14px;
           }

           .crm-schedule-icon {
            width: 34px;
            height: 34px;
            min-width: 34px;
            border-radius: 12px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--primary-bg-color, #232f84);
            background: rgba(35, 47, 132, .09);
           }

           .crm-schedule-title {
            font-weight: 800;
            line-height: 1.25;
            font-size: 15px;
            margin-bottom: 4px;
            overflow-wrap: anywhere;
           }

           .crm-schedule-meta {
            font-size: 12px;
            color: #6c757d;
            line-height: 1.4;
           }

           .crm-schedule-meta i {
            width: 14px;
            text-align: center;
            margin-right: 4px;
           }

           .crm-schedule-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 10px;
           }

           .crm-schedule-pill {
            display: inline-flex;
            align-items: center;
            border-radius: 999px;
            padding: 4px 8px;
            font-size: 11px;
            font-weight: 700;
            line-height: 1;
            background: rgba(108,117,125,.12);
            color: #6c757d;
           }

           .crm-schedule-pill.schedule-status-now {
            background: rgba(25,135,84,.13);
            color: #198754;
           }

           .crm-schedule-pill.schedule-status-upcoming {
            background: rgba(35,47,132,.12);
            color: var(--primary-bg-color, #232f84);
           }

           .crm-schedule-pill.schedule-status-done {
            background: rgba(108,117,125,.13);
            color: #6c757d;
           }

           .crm-schedule-pill.schedule-status-tentative {
            background: rgba(255,193,7,.22);
            color: #8a6500;
           }

           .crm-schedule-empty,
           .crm-schedule-error {
            margin: 0 20px 20px;
            padding: 24px 18px;
            border-radius: 18px;
            background: #ffffff;
            border: 1px dashed rgba(35,47,132,.22);
            text-align: center;
            box-shadow: 0 8px 18px rgba(15, 23, 42, .05);
           }

           .crm-schedule-empty i,
           .crm-schedule-error i {
            width: 46px;
            height: 46px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 16px;
            background: rgba(35,47,132,.09);
            color: var(--primary-bg-color, #232f84);
            font-size: 20px;
            margin-bottom: 12px;
           }

           .crm-today-footer-action {
            margin: 0 20px 24px;
           }

           .crm-today-footer-action .btn {
            border-radius: 12px;
            font-weight: 800;
           }

           @media (max-width: 575.98px) {
            .crm-today-hero {
             margin: 14px;
             padding: 16px;
             border-radius: 16px;
            }

            .crm-today-date {
             font-size: 18px;
            }

            .crm-today-stats {
             gap: 8px;
            }

            .crm-today-stat {
             padding: 10px 8px;
            }

            .crm-today-next,
            .crm-today-section-title,
            .crm-schedule-list,
            .crm-schedule-empty,
            .crm-schedule-error,
            .crm-today-footer-action {
             margin-left: 14px;
             margin-right: 14px;
            }

            .crm-schedule-item {
             gap: 10px;
            }

            .crm-schedule-time {
             width: 62px;
             min-width: 62px;
             font-size: 11px;
            }

            .crm-schedule-card {
             padding: 12px;
             border-radius: 15px;
            }

            .crm-schedule-icon {
             width: 30px;
             height: 30px;
             min-width: 30px;
             border-radius: 10px;
            }
           }

           body.dark-mode .crm-today-sidebar,
           .dark-mode .crm-today-sidebar {
            background: #111827;
           }

           body.dark-mode .crm-today-body,
           .dark-mode .crm-today-body {
            background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
           }

           body.dark-mode .crm-schedule-card,
           body.dark-mode .crm-schedule-empty,
           body.dark-mode .crm-schedule-error,
           .dark-mode .crm-schedule-card,
           .dark-mode .crm-schedule-empty,
           .dark-mode .crm-schedule-error {
            background: #1f2937;
            border-color: rgba(255,255,255,.08);
            color: #e5e7eb;
           }

           body.dark-mode .crm-schedule-item:not(:last-child),
           .dark-mode .crm-schedule-item:not(:last-child) {
            border-bottom-color: rgba(255,255,255,.08);
           }

           body.dark-mode .crm-schedule-meta,
           .dark-mode .crm-schedule-meta {
            color: #9ca3af;
           }


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/search-list.css
   ========================================================== */
.crm-search-wrap{
 width:100%;
}

.crm-search-hero{
 display:flex;
 justify-content:space-between;
 align-items:center;
 gap:20px;
 padding:24px;
 border-radius:18px;
 background:linear-gradient(135deg, var(--primary-bg-color), #0b1f3b);
 color:#fff;
 margin-bottom:20px;
 box-shadow:0 10px 25px rgba(0,0,0,0.12);
}

.crm-search-kicker{
 text-transform:uppercase;
 letter-spacing:.08em;
 font-size:12px;
 opacity:.8;
 margin-bottom:6px;
}

.crm-search-hero h2{
 color:#fff !important;
 margin:0 0 6px 0;
 font-size:26px;
 font-weight:700;
}

.crm-search-hero p{
 color:rgba(255,255,255,.82);
 margin:0;
}

.crm-search-total{
 min-width:120px;
 height:120px;
 border-radius:24px;
 background:rgba(255,255,255,.14);
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 border:1px solid rgba(255,255,255,.18);
}

.crm-search-total strong{
 font-size:38px;
 line-height:1;
}

.crm-search-total span{
 font-size:13px;
 opacity:.85;
 margin-top:6px;
}

.crm-search-stats{
 display:grid;
 grid-template-columns:repeat(6, minmax(0, 1fr));
 gap:12px;
 margin-bottom:22px;
}

.crm-search-stat-card{
 display:flex;
 align-items:center;
 gap:12px;
 padding:16px;
 border-radius:14px;
 background:#fff;
 border:1px solid #edf0f6;
 box-shadow:0 4px 14px rgba(0,0,0,.04);
}

.crm-search-stat-icon{
 width:38px;
 height:38px;
 border-radius:12px;
 display:flex;
 align-items:center;
 justify-content:center;
 background:var(--primary005);
 color:var(--primary-bg-color);
}

.crm-search-stat-card strong{
 display:block;
 font-size:22px;
 line-height:1;
 color:#1f2d3d;
}

.crm-search-stat-card span{
 display:block;
 font-size:12px;
 color:#6c757d;
 margin-top:4px;
}

.crm-search-section{
 margin-bottom:24px;
}

.crm-search-section-title{
 display:flex;
 align-items:center;
 justify-content:space-between;
 margin-bottom:10px;
}

.crm-search-section-title h4{
 margin:0;
 font-size:18px;
 font-weight:700;
}

.crm-search-section-title span{
 font-size:12px;
 color:#6c757d;
}

.crm-search-results{
 display:grid;
 grid-template-columns:repeat(2, minmax(0, 1fr));
 gap:14px;
}

.crm-search-result-card{
 display:flex;
 gap:14px;
 padding:16px;
 border-radius:16px;
 background:#fff;
 border:1px solid #edf0f6;
 box-shadow:0 4px 14px rgba(0,0,0,.04);
 color:inherit;
 transition:all .18s ease;
}

.crm-search-result-card:hover{
 transform:translateY(-2px);
 box-shadow:0 10px 24px rgba(0,0,0,.08);
 text-decoration:none !important;
}

.crm-search-result-icon{
 width:44px;
 height:44px;
 min-width:44px;
 border-radius:14px;
 display:flex;
 align-items:center;
 justify-content:center;
 color:#fff;
}

.crm-search-result-main{
 flex:1;
 min-width:0;
}

.crm-search-result-top{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:10px;
}

.crm-search-result-top h5{
 margin:0;
 font-size:15px;
 font-weight:700;
 color:#1f2d3d;
}

.crm-search-result-subtitle{
 margin-top:3px;
 font-size:13px;
 color:#6c757d;
}

.crm-search-result-main p{
 margin:8px 0;
 color:#4f5d75;
 font-size:13px;
}

.crm-search-result-meta{
 display:flex;
 flex-wrap:wrap;
 gap:12px;
 font-size:12px;
 color:#7b8191;
}

.crm-search-result-meta i{
 margin-right:4px;
}

.crm-search-empty{
 text-align:center;
 background:#fff;
 border:1px dashed #ccd3df;
 border-radius:18px;
 padding:36px;
}

.crm-search-empty i{
 font-size:34px;
 color:var(--primary-bg-color);
 margin-bottom:12px;
}

.crm-search-empty h4{
 margin-bottom:8px;
}

body.dark-mode .crm-search-stat-card,
body.dark-mode .crm-search-result-card,
body.dark-mode .crm-search-empty{
 background:#2e303a !important;
 border-color:#3b3d4a !important;
}

body.dark-mode .crm-search-stat-card strong,
body.dark-mode .crm-search-result-top h5,
body.dark-mode .crm-search-section-title h4,
body.dark-mode .crm-search-empty h4{
 color:#fff !important;
}

body.dark-mode .crm-search-result-main p,
body.dark-mode .crm-search-result-subtitle,
body.dark-mode .crm-search-stat-card span,
body.dark-mode .crm-search-section-title span,
body.dark-mode .crm-search-result-meta{
 color:#cbd3df !important;
}

@media(max-width:1200px){
 .crm-search-stats{
  grid-template-columns:repeat(3, minmax(0, 1fr));
 }
}

@media(max-width:768px){
 .crm-search-hero{
  flex-direction:column;
  align-items:flex-start;
 }

 .crm-search-total{
  width:100%;
  height:auto;
  padding:18px;
 }

 .crm-search-stats,
 .crm-search-results{
  grid-template-columns:1fr;
 }
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/settings-account-care.css
   ========================================================== */
.ac-stat,.ac-card{background:#fff;border:1px solid #e8ebf1;border-radius:14px;box-shadow:0 7px 22px rgba(15,23,42,.06)}
.ac-stat{padding:16px;height:100%}.ac-stat-icon{width:42px;height:42px;border-radius:12px;background:rgba(35,47,132,.10);color:#232f84;display:flex;align-items:center;justify-content:center;margin-bottom:10px}.ac-stat-value{font-size:25px;font-weight:800;color:#282f53;line-height:1}.ac-stat-label{font-size:12px;color:#778090;margin-top:6px}
.ac-card{overflow:hidden}.ac-card-header{padding:16px 18px;border-bottom:1px solid #e8ebf1;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.ac-card-header .ac-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}.ac-card-body{padding:18px}
.ac-rule{border:1px solid #e5e9f0;border-radius:13px;padding:14px;margin-bottom:12px;background:#fff}.ac-rule:last-child{margin-bottom:0}.ac-rule-top{display:flex;gap:12px;align-items:flex-start}.ac-rule-icon{width:42px;height:42px;border-radius:12px;background:#f0f2fa;color:#232f84;display:flex;align-items:center;justify-content:center;flex:0 0 auto}.ac-rule-main{min-width:0;flex:1}.ac-rule-title{font-weight:800;color:#282f53}.ac-rule-desc{font-size:12px;color:#737d8d;margin-top:3px}.ac-rule-meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.ac-rule-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.ac-soft{background:#f8fafc;border:1px solid #edf0f5;border-radius:12px;padding:13px}.ac-section-title{font-size:13px;font-weight:800;color:#303857;margin-bottom:10px}.ac-help{font-size:11px;color:#7a8494;line-height:1.45}.ac-preview-row{border-bottom:1px solid #edf0f5;padding:10px 0}.ac-preview-row:last-child{border-bottom:0}.ac-assignment-note{font-size:11px;color:#6f7888;margin-top:3px}.ac-resp-table td,.ac-resp-table th{vertical-align:middle}.ac-pill{display:inline-flex;align-items:center;border-radius:999px;padding:4px 9px;font-size:11px;font-weight:700;background:#f0f2f8;color:#45506a}
/* Keep Account Care modals consistent with the CRM's existing modal pattern. */
#accountCareRuleModal .modal-body,#accountCarePreviewModal .modal-body,#responsibilityModal .modal-body{overflow-y:auto!important;overscroll-behavior:contain}
#accountCareRuleModal .modal-content,#accountCarePreviewModal .modal-content,#responsibilityModal .modal-content{max-height:calc(100vh - 2rem)}
.ac-toggle-row{display:grid!important;grid-template-columns:48px minmax(0,1fr);gap:12px;align-items:center;min-width:0}
.ac-toggle-control.form-check.form-switch{width:48px;min-width:48px;padding-left:0!important;margin:0!important;display:flex!important;align-items:center;justify-content:flex-start}
.ac-toggle-control.form-check.form-switch .form-check-input{position:static!important;float:none!important;left:auto!important;right:auto!important;top:auto!important;transform:none!important;margin:0!important;width:2.25rem!important;height:1.2rem!important;flex:0 0 auto}
.ac-toggle-row .form-check-label{display:block!important;margin:0!important;padding:0!important;line-height:1.4;min-width:0;overflow-wrap:anywhere}
.ac-switch-block{border:1px solid #e5e9f0;border-radius:10px;padding:12px 14px;background:#fff;overflow:hidden}
body.dark-mode .ac-switch-block{background:#2E303A!important;border-color:#3a3d4d!important}
body.dark-mode .ac-stat,body.dark-mode .ac-card,body.dark-mode .ac-rule{background:#2E303A!important;border-color:#3a3d4d!important}body.dark-mode .ac-stat-value,body.dark-mode .ac-rule-title,body.dark-mode .ac-section-title{color:#fff!important}body.dark-mode .ac-stat-label,body.dark-mode .ac-rule-desc,body.dark-mode .ac-help,body.dark-mode .ac-assignment-note{color:rgba(255,255,255,.62)!important}body.dark-mode .ac-soft{background:#252731!important;border-color:#3a3d4d!important}body.dark-mode .ac-pill{background:#3a3d4d;color:#fff}
@media(max-width:767px){.ac-card-header .ac-actions{width:100%;margin-left:0}.ac-card-header .ac-actions .btn{flex:1}.ac-rule-top{flex-wrap:wrap}.ac-rule-icon{width:36px;height:36px}.ac-rule-actions .btn{flex:1 1 auto}.modal-xl{max-width:96%}}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/settings-account-data-consistency-v2.css
   ========================================================== */
.data-management-hero {
 border: 0;
 border-radius: 18px;
 overflow: hidden;
 background: linear-gradient(135deg, #0B1F3B, #132F58);
 color: #ffffff;
 box-shadow: 0 10px 30px rgba(15, 23, 42, 0.16);
}

.data-management-hero .card-body {
 padding: 20px 24px;
}

.data-management-hero p {
 color: rgba(255,255,255,0.78);
}

.data-management-filter-card {
 border: 0;
 border-radius: 18px;
 box-shadow: 0 8px 24px rgba(15,23,42,0.08);
}

.data-management-card {
 border: 0;
 border-radius: 18px;
 box-shadow: 0 8px 24px rgba(15,23,42,0.08);
 height: 100%;
 overflow: hidden;
}

.data-management-card .card-body {
 padding: 18px;
}

.data-management-icon {
 width: 48px;
 height: 48px;
 border-radius: 16px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 background: rgba(35,47,132,0.10);
 color: var(--primary-bg-color);
 font-size: 20px;
}

.data-management-status {
 font-size: 12px;
}

.data-management-muted {
 font-size: 13px;
 color: #6c757d;
}

.data-management-check-list {
 margin: 0;
 padding-left: 18px;
 color: #6c757d;
 font-size: 13px;
 line-height: 1.8;
}

.data-management-footer {
 border-top: 1px solid rgba(0,0,0,0.06);
 padding: 14px 18px;
 background: rgba(248,250,252,0.70);
}

.data-management-how-card {
 border: 0;
 border-radius: 18px;
 box-shadow: 0 8px 24px rgba(15,23,42,0.08);
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/settings-account-data-consistency-v3.css
   ========================================================== */
.data-management-hero {
 border: 0;
 border-radius: 18px;
 overflow: hidden;
 background: linear-gradient(135deg, #0B1F3B, #132F58);
 color: #ffffff;
 box-shadow: 0 10px 30px rgba(15, 23, 42, 0.16);
}

.data-management-hero .card-body {
 padding: 20px 24px;
}

.data-management-hero p {
 color: rgba(255,255,255,0.78);
}

.data-management-card {
 border: 0;
 border-radius: 18px;
 box-shadow: 0 8px 24px rgba(15,23,42,0.08);
 height: 100%;
 overflow: hidden;
}

.data-management-card .card-body {
 padding: 18px;
}

.data-management-icon {
 width: 48px;
 height: 48px;
 border-radius: 16px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 background: rgba(35,47,132,0.10);
 color: var(--primary-bg-color);
 font-size: 20px;
}

.data-management-status {
 font-size: 12px;
}

.data-management-muted {
 font-size: 13px;
 color: #6c757d;
}

.data-management-check-list {
 margin: 0;
 padding-left: 18px;
 color: #6c757d;
 font-size: 13px;
 line-height: 1.8;
}

.data-management-footer {
 border-top: 1px solid rgba(0,0,0,0.06);
 padding: 14px 18px;
 background: rgba(248,250,252,0.70);
}

.data-management-how-card {
 border: 0;
 border-radius: 18px;
 box-shadow: 0 8px 24px rgba(15,23,42,0.08);
}

#dataManagementModal .modal-content {
 border: 0;
 border-radius: 18px;
 overflow: hidden;
 box-shadow: 0 20px 60px rgba(15,23,42,.25);
}

#dataManagementModal .modal-header {
 background: linear-gradient(135deg, #0B1F3B, #132F58);
 color: #ffffff;
 border-bottom: 0;
 padding: 16px 20px;
 display: flex;
 align-items: center;
 justify-content: space-between;
}

#dataManagementModal .modal-title {
 color: #ffffff;
 font-weight: 600;
}

.data-management-modal-close {
 width: 34px;
 height: 34px;
 border: 1px solid rgba(255,255,255,0.35);
 border-radius: 50%;
 background: rgba(255,255,255,0.12);
 color: #ffffff;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 font-size: 18px;
 line-height: 1;
 padding: 0;
 cursor: pointer;
}

.data-management-modal-close:hover,
.data-management-modal-close:focus {
 background: rgba(255,255,255,0.22);
 color: #ffffff;
 outline: none;
 box-shadow: none;
}

.data-management-modal-overview {
 border: 1px solid rgba(35,47,132,0.12);
 border-radius: 14px;
 background: rgba(35,47,132,0.06);
 padding: 14px 16px;
 margin-bottom: 16px;
}

.data-management-modal-overview-title {
 font-weight: 600;
 margin-bottom: 4px;
 color: #18233c;
}

.data-management-modal-overview-text {
 color: #6c757d;
 font-size: 13px;
 margin: 0;
}

.data-management-results-table th,
.data-management-results-table td {
 white-space: nowrap;
 font-size: 12px;
 vertical-align: middle;
}

.data-management-results-table th {
 background: rgba(248,250,252,0.95);
}

.data-management-action-cell {
 min-width: 110px;
 text-align: right;
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/settings-account-roles-permissions.css
   ========================================================== */
.role-sync-card{
         background:#fff8e1;
         border-color:#ffe08a !important;
        }

        .role-hierarchy{
         display:flex;
         flex-direction:column;
         gap:10px;
        }

        .role-hierarchy-item{
         position:relative;
        }

        .role-hierarchy-item[style*="margin-left"]::before{
         content:"";
         position:absolute;
         left:-15px;
         top:0;
         bottom:0;
         width:1px;
         background:#e5e7eb;
        }

        .role-hierarchy-card{
         border:1px solid #e5e7eb;
         border-radius:12px;
         padding:12px 14px;
         background:#f8f9fb;
        }

        .role-top-card{
         background:#ffffff;
         border-color:#cfd6e4;
        }

        .role-child-card{
         background:#f8f9fb;
        }

        .role-hierarchy-title{
         font-weight:600;
         font-size:14px;
        }

        .role-hierarchy-meta{
         margin-top:4px;
         font-size:12px;
         color:#6c757d;
        }

        .permission-category-card{
         border:1px solid #e5e7eb;
         border-radius:12px;
         padding:14px;
         background:#fff;
         margin-bottom:14px;
        }

        .permission-action-block{
         border-top:1px dashed #eceff3;
         padding-top:12px;
         margin-top:12px;
        }

        .permission-action-block:first-child{
         border-top:none;
         padding-top:0;
         margin-top:0;
        }

        .permission-list{
         display:grid;
         grid-template-columns: repeat(2, minmax(0, 1fr));
         gap:10px 18px;
        }

        .permission-item{
         border:1px solid #eceff3;
         border-radius:10px;
         padding:10px 12px;
         background:#f8f9fb;
        }

        @media (max-width: 991px){
         .permission-list{
          grid-template-columns: 1fr;
         }
        }


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/settings-account-sectors.css
   ========================================================== */
.sector-icon-preview{
             width:34px;
             height:34px;
             display:inline-flex;
             align-items:center;
             justify-content:center;
             border-radius:50%;
             background:#f1f4fb;
             color:#232f84;
             margin-right:8px;
            }

            .fa-icon-picker{
             position:relative;
            }

            .fa-icon-picker-toggle{
             display:flex;
             align-items:center;
             justify-content:space-between;
             min-height:42px;
             text-align:left;
             background:#fff;
            }

            .fa-icon-picker-selected{
             display:flex;
             align-items:center;
             min-width:0;
            }

            .fa-icon-picker-icon,
            .fa-icon-picker-option-icon{
             width:28px;
             height:28px;
             display:inline-flex;
             align-items:center;
             justify-content:center;
             border-radius:50%;
             background:#f1f4fb;
             color:#232f84;
             margin-right:9px;
             flex:0 0 auto;
            }

            .fa-icon-picker-label{
             overflow:hidden;
             text-overflow:ellipsis;
             white-space:nowrap;
            }

            .fa-icon-picker-menu{
             width:100%;
             min-width:360px;
             padding:0;
             max-height:360px;
             overflow:hidden;
            }

            .fa-icon-picker-list{
             max-height:300px;
             overflow-y:auto;
            }

            .fa-icon-picker-option{
             display:flex;
             align-items:center;
             gap:0;
             padding:8px 10px;
            }

            .fa-icon-picker-option small{
             font-size:10px;
             max-width:145px;
             overflow:hidden;
             text-overflow:ellipsis;
             white-space:nowrap;
            }

            .fa-icon-picker-option.active,
            .fa-icon-picker-option:hover{
             background:#eef2ff;
             color:#232f84;
            }

            body.dark-mode .fa-icon-picker-toggle{
             background:#2e303a;
             color:#fff;
             border-color:#4b4d59;
            }

            body.dark-mode .fa-icon-picker-menu{
             background:#2e303a;
             color:#fff;
             border-color:#4b4d59;
            }

            body.dark-mode .fa-icon-picker-search{
             background:#262832;
             color:#fff;
             border-color:#4b4d59;
            }

            body.dark-mode .fa-icon-picker-icon,
            body.dark-mode .fa-icon-picker-option-icon,
            body.dark-mode .sector-icon-preview{
             background:#1f2230;
             color:#ffd84d;
            }

            body.dark-mode .fa-icon-picker-option:hover,
            body.dark-mode .fa-icon-picker-option.active{
             background:#1f2230;
             color:#fff;
            }


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/settings-account-security.css
   ========================================================== */
.security-card {
             border: 1px solid rgba(0,0,0,.08);
             box-shadow: 0 0.35rem 1rem rgba(0,0,0,.08);
            }
            .security-summary-box {
             border: 1px solid rgba(0,0,0,.08);
             border-radius: 10px;
             padding: 14px 16px;
             height: 100%;
             background: rgba(255,255,255,.35);
            }
            .security-summary-label {
             font-size: 12px;
             text-transform: uppercase;
             letter-spacing: .04em;
             opacity: .75;
             margin-bottom: 4px;
            }
            .security-summary-value {
             font-size: 15px;
             font-weight: 600;
            }
            .security-section-note {
             font-size: 13px;
             opacity: .8;
            }
            .security-staff-table th,
            .security-staff-table td {
             vertical-align: middle;
            }
            .security-pill {
             display: inline-block;
             padding: 4px 10px;
             border-radius: 999px;
             font-size: 12px;
             font-weight: 600;
             border: 1px solid rgba(0,0,0,.08);
            }
            .security-pill.yes {
             background: rgba(25,135,84,.12);
            }
            .security-pill.no {
             background: rgba(220,53,69,.08);
            }
            .security-subtle {
             font-size: 12px;
             opacity: .75;
            }
            .staff-override-row {
             background: rgba(0,0,0,.015);
             border-radius: 10px;
             padding: 14px;
             margin-bottom: 14px;
             border: 1px solid rgba(0,0,0,.06);
            }


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/settings-account-staff-groups.css
   ========================================================== */
.staff-group-hierarchy{
         display:flex;
         flex-direction:column;
         gap:12px;
        }
        .group-hierarchy-item.is-child{
         padding-left:24px;
        }
        .group-hierarchy-card{
         border:1px solid #e5e7eb;
         border-radius:12px;
         padding:12px 14px;
         background:#f8f9fb;
        }
        .group-hierarchy-title{
         font-weight:600;
         font-size:14px;
        }
        .group-hierarchy-meta{
         margin-top:4px;
         font-size:12px;
         color:#6c757d;
        }


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/settings-account-staff-members.css
   ========================================================== */
.login-access-box{
         border:1px solid #e5e7eb;
         border-radius:12px;
         padding:16px;
         background:#f8f9fb;
         margin-top:8px;
        }
        .login-access-fields.is-disabled{
         opacity:0.55;
         pointer-events:none;
        }
        .group-membership-box{
         border:1px solid #e5e7eb;
         border-radius:12px;
         padding:16px;
         background:#fff;
         margin-bottom:16px;
        }
        .additional-groups-wrap{
         max-height:240px;
         overflow:auto;
         border:1px solid #eceff3;
         border-radius:10px;
         padding:12px;
         background:#f8f9fb;
        }
        .additional-group-item{
         padding:6px 0;
         border-bottom:1px dashed #e6eaf0;
        }
        .additional-group-item:last-child{
         border-bottom:none;
        }


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/settings-account-subsectors.css
   ========================================================== */
.subsector-icon-preview{
             width:34px;
             height:34px;
             display:inline-flex;
             align-items:center;
             justify-content:center;
             border-radius:50%;
             background:#f1f4fb;
             color:#232f84;
             margin-right:8px;
            }

            .fa-icon-picker{
             position:relative;
            }

            .fa-icon-picker-toggle{
             display:flex;
             align-items:center;
             justify-content:space-between;
             min-height:42px;
             text-align:left;
             background:#fff;
            }

            .fa-icon-picker-selected{
             display:flex;
             align-items:center;
             min-width:0;
            }

            .fa-icon-picker-icon,
            .fa-icon-picker-option-icon{
             width:28px;
             height:28px;
             display:inline-flex;
             align-items:center;
             justify-content:center;
             border-radius:50%;
             background:#f1f4fb;
             color:#232f84;
             margin-right:9px;
             flex:0 0 auto;
            }

            .fa-icon-picker-label{
             overflow:hidden;
             text-overflow:ellipsis;
             white-space:nowrap;
            }

            .fa-icon-picker-menu{
             width:100%;
             min-width:360px;
             padding:0;
             max-height:360px;
             overflow:hidden;
            }

            .fa-icon-picker-list{
             max-height:300px;
             overflow-y:auto;
            }

            .fa-icon-picker-option{
             display:flex;
             align-items:center;
             gap:0;
             padding:8px 10px;
            }

            .fa-icon-picker-option small{
             font-size:10px;
             max-width:145px;
             overflow:hidden;
             text-overflow:ellipsis;
             white-space:nowrap;
            }

            .fa-icon-picker-option.active,
            .fa-icon-picker-option:hover{
             background:#eef2ff;
             color:#232f84;
            }

            body.dark-mode .fa-icon-picker-toggle{
             background:#2e303a;
             color:#fff;
             border-color:#4b4d59;
            }

            body.dark-mode .fa-icon-picker-menu{
             background:#2e303a;
             color:#fff;
             border-color:#4b4d59;
            }

            body.dark-mode .fa-icon-picker-search{
             background:#262832;
             color:#fff;
             border-color:#4b4d59;
            }

            body.dark-mode .fa-icon-picker-icon,
            body.dark-mode .fa-icon-picker-option-icon,
            body.dark-mode .subsector-icon-preview{
             background:#1f2230;
             color:#ffd84d;
            }

            body.dark-mode .fa-icon-picker-option:hover,
            body.dark-mode .fa-icon-picker-option.active{
             background:#1f2230;
             color:#fff;
            }


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/settings-account-territories.css
   ========================================================== */
.territory-stat-card{
 border:1px solid #e9edf4;
 border-radius:14px;
 padding:16px;
 background:#fff;
 height:100%;
 box-shadow:0 6px 18px rgba(15,23,42,.05);
}
.territory-stat-icon{
 width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
 background:rgba(35,47,132,.10);color:#232f84;font-size:18px;margin-bottom:10px;
}
.territory-stat-value{font-size:24px;font-weight:700;line-height:1;color:#282f53;}
.territory-stat-label{font-size:13px;color:#6c757d;margin-top:5px;}
.territory-main-card{border:0;border-radius:14px;box-shadow:0 8px 24px rgba(15,23,42,.08);overflow:visible;}
.territory-colour-dot{width:13px;height:13px;border-radius:50%;display:inline-block;vertical-align:-1px;margin-right:8px;border:1px solid rgba(0,0,0,.12);}
.territory-country-list{white-space:normal;min-width:220px;line-height:1.45;}
.territory-description{white-space:normal;min-width:220px;max-width:420px;color:#6c757d;font-size:12px;}
.territory-dataset-card{border:1px solid #e9edf4;border-radius:14px;background:#fff;box-shadow:0 6px 18px rgba(15,23,42,.05);overflow:hidden;}
.territory-dataset-header{display:flex;align-items:center;gap:12px;padding:16px;border-bottom:1px solid #e9edf4;}
.territory-dataset-icon{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:rgba(25,135,84,.10);color:#198754;font-size:18px;flex:0 0 auto;}
.territory-dataset-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;padding:16px;}
.territory-dataset-metric{border:1px solid #edf0f5;border-radius:12px;padding:12px;background:#f8fafc;}
.territory-dataset-metric-label{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#7b8494;margin-bottom:5px;}
.territory-dataset-metric-value{font-weight:700;color:#282f53;overflow-wrap:anywhere;}
.territory-dataset-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:0 16px 16px;}
.territory-dataset-message{font-size:13px;line-height:1.45;}
body.dark-mode .territory-dataset-card{background:#2E303A!important;border-color:#3a3d4d!important;}
body.dark-mode .territory-dataset-header{border-color:#3a3d4d!important;}
body.dark-mode .territory-dataset-metric{background:#252731!important;border-color:#3a3d4d!important;}
body.dark-mode .territory-dataset-metric-label{color:rgba(255,255,255,.55)!important;}
body.dark-mode .territory-dataset-metric-value{color:#fff!important;}
@media(max-width:900px){.territory-dataset-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:560px){.territory-dataset-grid{grid-template-columns:1fr;}}
body.dark-mode .territory-stat-card,body.dark-mode .territory-main-card{background:#2E303A!important;border-color:#3a3d4d!important;}
body.dark-mode .territory-stat-value{color:#fff!important;}
body.dark-mode .territory-stat-label,body.dark-mode .territory-description{color:rgba(255,255,255,.65)!important;}

.territory-overview-card{
 border:0;
 border-radius:14px;
 background:#fff;
 box-shadow:0 8px 24px rgba(15,23,42,.08);
 overflow:hidden;
 position:relative;
}
.territory-overview-header{
 display:flex;
 align-items:center;
 gap:12px;
 flex-wrap:wrap;
 padding:16px 18px;
 border-bottom:1px solid #e7ebf1;
}
.territory-overview-icon{
 width:44px;
 height:44px;
 border-radius:13px;
 display:flex;
 align-items:center;
 justify-content:center;
 flex:0 0 auto;
 background:rgba(35,47,132,.10);
 color:#232f84;
 font-size:19px;
}
.territory-overview-actions{
 margin-left:auto;
 display:flex;
 gap:8px;
 flex-wrap:wrap;
}
.territory-overview-layout{
 display:grid;
 grid-template-columns:minmax(0,1fr) 320px;
 min-height:540px;
}
.territory-overview-map-wrap{
 position:relative;
 min-width:0;
 border-right:1px solid #e7ebf1;
}
#territoryOverviewMap{
 width:100%;
 height:540px;
 background:#eef1f4;
}
.territory-overview-loading{
 position:absolute;
 inset:0;
 z-index:900;
 display:flex;
 align-items:center;
 justify-content:center;
 background:rgba(255,255,255,.72);
 backdrop-filter:blur(1px);
}
.territory-overview-loading.is-hidden{display:none;}
.territory-overview-loading-panel{
 padding:13px 17px;
 border-radius:12px;
 background:#fff;
 border:1px solid #dfe4ec;
 box-shadow:0 10px 28px rgba(15,23,42,.12);
 color:#232f84;
 font-size:13px;
 font-weight:800;
}
.territory-overview-sidebar{
 padding:14px;
 min-width:0;
 background:#fbfcfe;
 display:flex;
 flex-direction:column;
}
.territory-overview-summary{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:8px;
 margin-bottom:12px;
}
.territory-overview-summary-box{
 border:1px solid #e5e9f0;
 border-radius:10px;
 padding:9px 10px;
 background:#fff;
}
.territory-overview-summary-value{
 font-size:18px;
 line-height:1;
 font-weight:800;
 color:#282f53;
}
.territory-overview-summary-label{
 margin-top:5px;
 font-size:10px;
 text-transform:uppercase;
 letter-spacing:.04em;
 color:#7b8494;
}
.territory-overview-legend{
 overflow:auto;
 max-height:405px;
 padding-right:3px;
}
.territory-overview-legend-item{
 display:flex;
 gap:10px;
 align-items:flex-start;
 padding:9px 8px;
 border:1px solid transparent;
 border-radius:10px;
 margin-bottom:5px;
 cursor:pointer;
 transition:background .14s ease,border-color .14s ease,opacity .14s ease;
}
.territory-overview-legend-item:hover{
 background:#f1f4f8;
 border-color:#e3e8ef;
}
.territory-overview-legend-item.is-hidden-territory{opacity:.42;}
.territory-overview-legend-swatch{
 width:15px;
 height:15px;
 border-radius:4px;
 flex:0 0 auto;
 margin-top:2px;
 box-shadow:inset 0 0 0 1px rgba(0,0,0,.13);
}
.territory-overview-legend-main{min-width:0;flex:1;}
.territory-overview-legend-name{
 font-size:12px;
 font-weight:800;
 color:#2d3555;
 line-height:1.25;
}
.territory-overview-legend-meta{
 margin-top:3px;
 color:#7b8494;
 font-size:10px;
 line-height:1.35;
}
.territory-overview-eye{
 flex:0 0 auto;
 color:#7b8494;
 font-size:12px;
 padding-top:1px;
}
.territory-overview-footer{
 margin-top:auto;
 padding-top:10px;
 border-top:1px solid #e7ebf1;
 font-size:11px;
 color:#7b8494;
 line-height:1.45;
}
.territory-overview-status{
 font-size:12px;
 color:#6c757d;
}
.territory-overview-popup-title{
 display:flex;
 align-items:center;
 gap:7px;
 font-weight:800;
 font-size:14px;
 margin-bottom:6px;
}
.territory-overview-popup-swatch{
 width:12px;
 height:12px;
 border-radius:3px;
 display:inline-block;
 border:1px solid rgba(0,0,0,.12);
}
.territory-overview-popup-row{
 font-size:11px;
 line-height:1.5;
 margin-top:2px;
}
.territory-overview-popup-actions{margin-top:8px;}
.leaflet-tooltip.territory-overview-tooltip{
 border:0;
 border-radius:7px;
 background:rgba(15,23,42,.94);
 color:#fff;
 padding:6px 9px;
 box-shadow:none;
 font-weight:700;
}
.territory-overview-label{
 background:rgba(255,255,255,.90);
 color:#222b50;
 border:1px solid rgba(35,47,132,.16);
 border-radius:6px;
 box-shadow:0 1px 5px rgba(15,23,42,.10);
 padding:3px 6px;
 font-size:10px;
 font-weight:800;
 white-space:nowrap;
}
.territory-overview-label:before{display:none;}
.territory-overview-card.is-expanded{
 position:fixed;
 inset:14px;
 z-index:99999;
 margin:0!important;
 border-radius:14px;
 display:flex;
 flex-direction:column;
}
.territory-overview-card.is-expanded .territory-overview-layout{
 flex:1;
 min-height:0;
}
.territory-overview-card.is-expanded #territoryOverviewMap{
 height:100%;
 min-height:0;
}
.territory-overview-card.is-expanded .territory-overview-map-wrap,
.territory-overview-card.is-expanded .territory-overview-sidebar{
 min-height:0;
}
body.territory-overview-expanded{overflow:hidden!important;}

body.dark-mode .territory-overview-card{background:#2E303A!important;}
body.dark-mode .territory-overview-header,
body.dark-mode .territory-overview-map-wrap,
body.dark-mode .territory-overview-footer{border-color:#3a3d4d!important;}
body.dark-mode .territory-overview-sidebar{background:#272933!important;}
body.dark-mode .territory-overview-summary-box{background:#2E303A!important;border-color:#3a3d4d!important;}
body.dark-mode .territory-overview-summary-value,
body.dark-mode .territory-overview-legend-name{color:#fff!important;}
body.dark-mode .territory-overview-summary-label,
body.dark-mode .territory-overview-legend-meta,
body.dark-mode .territory-overview-footer,
body.dark-mode .territory-overview-status,
body.dark-mode .territory-overview-eye{color:rgba(255,255,255,.58)!important;}
body.dark-mode .territory-overview-legend-item:hover{background:#333641;border-color:#444856;}
body.dark-mode #territoryOverviewMap{background:#171923;}
body.dark-mode #territoryOverviewMap .leaflet-control-zoom a{
 background:#2E303A;
 color:#f1f5f9;
 border-color:#454857;
}
body.dark-mode #territoryOverviewMap .leaflet-control-zoom a:hover{background:#3a3d49;color:#fff;}
body.dark-mode #territoryOverviewMap .leaflet-control-attribution{background:rgba(32,34,44,.88);color:#cbd5e1;}
body.dark-mode #territoryOverviewMap .leaflet-control-attribution a{color:#9db5ff;}
body.dark-mode .territory-overview-loading{background:rgba(32,34,44,.72);}
body.dark-mode .territory-overview-loading-panel{background:#2E303A;border-color:#3a3d4d;color:#fff;}
body.dark-mode .territory-overview-label{
 background:rgba(32,34,44,.92);
 color:#f4f6ff;
 border-color:rgba(255,255,255,.14);
}
body.dark-mode .leaflet-popup-content-wrapper,
body.dark-mode .leaflet-popup-tip{background:#2E303A;color:#fff;}
body.dark-mode .leaflet-popup-content a{color:#9db5ff;}

@media(max-width:1100px){
 .territory-overview-layout{grid-template-columns:1fr;}
 .territory-overview-map-wrap{border-right:0;border-bottom:1px solid #e7ebf1;}
 .territory-overview-sidebar{min-height:0;}
 .territory-overview-legend{max-height:260px;}
}
@media(max-width:700px){
 #territoryOverviewMap{height:440px;}
 .territory-overview-header{align-items:flex-start;}
 .territory-overview-actions{width:100%;margin-left:0;}
 .territory-overview-actions .btn{flex:1;}
 .territory-overview-summary{grid-template-columns:repeat(2,1fr);}
 .territory-overview-card.is-expanded{inset:0;border-radius:0;}
 .territory-overview-card.is-expanded .territory-overview-layout{grid-template-columns:1fr;}
 .territory-overview-card.is-expanded .territory-overview-sidebar{max-height:36vh;}
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/settings-account-territory-edit.css
   ========================================================== */
.territory-editor-card{border:0;border-radius:14px;box-shadow:0 8px 24px rgba(15,23,42,.08);overflow:visible;}
.territory-details-grid{display:grid;grid-template-columns:minmax(220px,1.1fr) minmax(280px,1.8fr) 140px 140px;gap:14px;align-items:end;}
.territory-map-toolbar{display:grid;grid-template-columns:repeat(4,minmax(160px,1fr)) auto;gap:12px;align-items:end;}
.territory-builder-mode{display:flex;gap:8px;flex-wrap:wrap;}
.territory-builder-mode .btn{font-weight:700;}
.territory-toolbar-hidden{display:none!important;}
.territory-postal-help{font-size:12px;color:#6c757d;line-height:1.5;}
@media(max-width:1400px){.territory-map-toolbar{grid-template-columns:repeat(2,minmax(180px,1fr));}}
.territory-builder-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;align-items:start;}
.territory-map-card,.territory-selection-card{border:1px solid #dde3ec;border-radius:14px;background:#fff;overflow:hidden;}
.territory-map-head{padding:12px 14px;border-bottom:1px solid #dde3ec;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.territory-map-wrap{position:relative;}
#territoryMap{width:100%;height:66vh;min-height:580px;background:#eef1f4;transition:background-color .18s ease;}
body.dark-mode #territoryMap{background:#171923;}
#territoryMap .leaflet-tile-pane{transition:opacity .18s ease;}
#territoryMap .leaflet-control-zoom a,
#territoryMap .leaflet-control-attribution{transition:background-color .18s ease,color .18s ease,border-color .18s ease;}
body.dark-mode #territoryMap .leaflet-control-zoom a{background:#2E303A;color:#f1f5f9;border-color:#454857;}
body.dark-mode #territoryMap .leaflet-control-zoom a:hover{background:#3a3d49;color:#fff;}
body.dark-mode #territoryMap .leaflet-control-attribution{background:rgba(32,34,44,.88);color:#cbd5e1;}
body.dark-mode #territoryMap .leaflet-control-attribution a{color:#9db5ff;}
.territory-loading-mask{position:absolute;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;background:rgba(255,255,255,.78);backdrop-filter:blur(1px);}
.territory-loading-mask.show{display:flex;}
.territory-loading-panel{padding:14px 18px;border-radius:12px;background:#fff;border:1px solid #dce2ec;box-shadow:0 10px 30px rgba(15,23,42,.12);font-weight:700;color:#232f84;}
.territory-selection-card{position:sticky;top:18px;padding:14px;}
.territory-selection-list{max-height:56vh;overflow-y:auto;border-top:1px solid #e5e9f0;padding-top:10px;margin-top:12px;}
.territory-selection-item{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:9px 10px;border:1px solid #dce4de;border-radius:10px;background:#f3faf6;margin-bottom:8px;}
.territory-selection-name{font-size:13px;font-weight:700;line-height:1.3;}
.territory-selection-id{font-size:10px;color:#6c757d;margin-top:2px;overflow-wrap:anywhere;}
.territory-selection-source{display:inline-flex;margin-top:5px;padding:3px 7px;border-radius:999px;background:rgba(35,47,132,.09);color:#232f84;font-size:10px;font-weight:800;}
.territory-remove-area{border:0;background:transparent;color:#dc3545;font-size:18px;line-height:1;cursor:pointer;}
.territory-selection-empty{font-size:13px;color:#8791a2;padding:8px 0;}
.territory-count{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:24px;padding:0 8px;border-radius:999px;background:rgba(35,47,132,.10);color:#232f84;font-size:12px;font-weight:800;}
.leaflet-tooltip.territory-boundary-tooltip{border:0;border-radius:7px;background:rgba(15,23,42,.92);color:#fff;padding:6px 9px;box-shadow:none;font-weight:700;}
body.dark-mode .leaflet-tooltip.territory-boundary-tooltip{background:rgba(8,10,16,.95);color:#fff;}

.leaflet-tooltip.territory-postcode-area-label{
 background:rgba(255,255,255,.90);
 color:#232f84;
 border:1px solid rgba(35,47,132,.18);
 border-radius:5px;
 box-shadow:0 1px 4px rgba(15,23,42,.10);
 padding:2px 4px;
 font-size:10px;
 font-weight:800;
 line-height:1;
 pointer-events:none;
}
.leaflet-tooltip.territory-postcode-area-label:before{display:none;}
body.dark-mode .leaflet-tooltip.territory-postcode-area-label{
 background:rgba(32,34,44,.92);
 color:#dbe3ff;
 border-color:rgba(219,227,255,.18);
}
.territory-note{font-size:12px;color:#6c757d;line-height:1.5;}
body.dark-mode .territory-editor-card,body.dark-mode .territory-map-card,body.dark-mode .territory-selection-card{background:#2E303A!important;border-color:#3a3d4d!important;}
body.dark-mode .territory-map-head{border-color:#3a3d4d!important;}
body.dark-mode .territory-selection-item{background:#26352d;border-color:#3d5747;}
body.dark-mode .territory-selection-list{border-color:#3a3d4d;}
body.dark-mode .territory-loading-mask{background:rgba(32,34,44,.78);}
body.dark-mode .territory-loading-panel{background:#2E303A;border-color:#3a3d4d;color:#fff;}
@media(max-width:1200px){.territory-details-grid{grid-template-columns:1fr 1fr;}.territory-builder-grid{grid-template-columns:1fr;}.territory-selection-card{position:static;}.territory-selection-list{max-height:320px;}}
@media(max-width:800px){.territory-details-grid,.territory-map-toolbar{grid-template-columns:1fr;}#territoryMap{height:62vh;min-height:480px;}}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/settings-account-territory-policy.css
   ========================================================== */
.territory-policy-main-card {
 border: 0;
 border-radius: 14px;
 box-shadow: 0 8px 24px rgba(15,23,42,.08);
 overflow: hidden;
}

.territory-policy-summary-card {
 border: 1px solid #e9edf4;
 border-radius: 14px;
 background: #fff;
 height: 100%;
 box-shadow: 0 6px 18px rgba(15,23,42,.05);
}

.territory-policy-summary-card .card-body {
 padding: 16px;
}

.territory-policy-summary-label {
 font-size: 12px;
 text-transform: uppercase;
 letter-spacing: .04em;
 color: #7b8494;
 margin-bottom: 6px;
}

.territory-policy-summary-value {
 font-size: 24px;
 font-weight: 700;
 line-height: 1.15;
 color: #282f53;
}

.territory-policy-tabs {
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
 border: 1px solid #e2e7ef;
 border-radius: 12px;
 padding: 6px;
 background: #f8fafc;
 margin-bottom: 20px;
}

.territory-policy-tabs .nav-link {
 border: 0;
 border-radius: 9px;
 color: #596174;
 font-weight: 600;
 padding: 8px 14px;
}

.territory-policy-tabs .nav-link:hover {
 background: rgba(35,47,132,.07);
 color: #232f84;
}

.territory-policy-tabs .nav-link.active {
 background: #232f84;
 color: #fff;
 box-shadow: 0 5px 14px rgba(35,47,132,.18);
}

.territory-policy-section-card {
 border: 1px solid #e2e7ef;
 border-radius: 12px;
 box-shadow: 0 4px 14px rgba(15,23,42,.04);
 overflow: hidden;
 margin-bottom: 18px;
}

.territory-policy-section-card > .card-header {
 padding: 14px 16px;
 background: #f8fafc;
 border-bottom: 1px solid #e2e7ef;
}

.territory-policy-section-card > .card-body {
 padding: 18px;
}

.territory-policy-section-title {
 font-size: 15px;
 font-weight: 700;
 margin: 0;
 color: #282f53;
}

.territory-policy-section-note {
 font-size: 12px;
 color: #7b8494;
 margin-top: 3px;
}

.territory-policy-mode {
 display: block;
 width: 100%;
 height: 100%;
 border: 1px solid #dfe4ee;
 border-radius: 12px;
 padding: 15px;
 margin-bottom: 0;
 background: #fff;
 cursor: pointer;
 transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

/*
 The CRM theme positions .form-check-input absolutely with a negative
 inline margin. That is correct inside Bootstrap .form-check wrappers,
 but these policy cards use flex labels instead. Keep these particular
 radios/checkboxes in normal document flow so they align with their text.
*/
.territory-policy-mode .tap-mode-radio,
.territory-policy-territory-option .tap-group-territory,
.territory-policy-territory-option .tap-staff-territory {
 -webkit-appearance: auto !important;
 appearance: auto !important;
 position: static !important;
 float: none !important;
 display: inline-block !important;
 width: 16px !important;
 height: 16px !important;
 min-width: 16px !important;
 min-height: 16px !important;
 max-width: 16px !important;
 max-height: 16px !important;
 margin: 0 !important;
 padding: 0 !important;
 opacity: 1 !important;
 flex: 0 0 16px !important;
 vertical-align: middle !important;
}

.territory-policy-mode .tap-mode-radio {
 margin-top: 3px !important;
}

.territory-policy-mode:hover {
 border-color: rgba(35,47,132,.45);
 transform: translateY(-1px);
}

.territory-policy-mode.active {
 border-color: #232f84;
 box-shadow: 0 0 0 2px rgba(35,47,132,.10);
 background: rgba(35,47,132,.025);
}

.territory-policy-mode-title {
 font-size: 16px;
 font-weight: 700;
 color: #282f53;
}

.territory-policy-mode-subtitle {
 font-size: 12px;
 font-weight: 600;
 color: #596174;
 margin-top: 2px;
}

.territory-policy-mode-description {
 font-size: 12px;
 color: #7b8494;
 line-height: 1.45;
 margin-top: 7px;
}

.territory-policy-switch-row {
 border: 1px solid #edf0f5;
 border-radius: 10px;
 padding: 12px 14px;
 height: 100%;
 background: #fff;
}

.territory-policy-switch-row .form-check {
 margin: 0;
 min-height: 0;
}

.territory-policy-switch-label {
 font-weight: 600;
 color: #333b55;
}

.territory-policy-colour {
 width: 12px;
 height: 12px;
 border-radius: 50%;
 display: inline-block;
 vertical-align: -1px;
 margin-right: 6px;
 border: 1px solid rgba(0,0,0,.10);
}

.territory-policy-territory-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
 gap: 8px;
}

.territory-policy-territory-option {
 border: 1px solid #e2e7ef;
 border-radius: 9px;
 padding: 9px 10px;
 margin-bottom: 0;
 display: flex;
 gap: 8px;
 align-items: center;
 background: #fff;
 cursor: pointer;
 min-width: 0;
}

.territory-policy-territory-option:hover {
 background: #f8fafc;
 border-color: #d3d9e5;
}

.territory-policy-territory-option .form-check-input {
 position: static !important;
 flex: 0 0 16px !important;
 margin: 0 !important;
}

.territory-policy-territory-name {
 min-width: 0;
 overflow-wrap: anywhere;
 line-height: 1.35;
}

.territory-policy-assignment-row {
 border: 1px solid #e7ebf1;
 border-radius: 12px;
 padding: 15px;
 margin-bottom: 12px;
 background: #fff;
}

.territory-policy-assignment-row:last-child {
 margin-bottom: 0;
}

.territory-policy-person-title {
 font-weight: 700;
 color: #282f53;
}

.territory-policy-effective {
 display: flex;
 flex-wrap: wrap;
 gap: 5px;
 margin-top: 8px;
}

.territory-policy-pill {
 display: inline-flex;
 align-items: center;
 font-size: 11px;
 line-height: 1.2;
 padding: 5px 8px;
 border-radius: 999px;
 background: #eef1ff;
 color: #232f84;
 border: 1px solid rgba(35,47,132,.10);
}

.territory-policy-stat-box {
 border: 1px solid #e7ebf1;
 border-radius: 12px;
 padding: 15px;
 height: 100%;
 background: #f8fafc;
}

.territory-policy-stat-label {
 font-size: 12px;
 color: #7b8494;
 margin-bottom: 5px;
}

.territory-policy-stat-value {
 font-size: 24px;
 line-height: 1.1;
 font-weight: 700;
 color: #282f53;
}

.territory-policy-rollout {
 border-left: 4px solid #f0ad4e;
}

body.dark-mode .territory-policy-main-card,
body.dark-mode .territory-policy-summary-card,
body.dark-mode .territory-policy-section-card,
body.dark-mode .territory-policy-mode,
body.dark-mode .territory-policy-switch-row,
body.dark-mode .territory-policy-territory-option,
body.dark-mode .territory-policy-assignment-row {
 background: #2E303A !important;
 border-color: #3a3d4d !important;
}

body.dark-mode .territory-policy-tabs,
body.dark-mode .territory-policy-section-card > .card-header,
body.dark-mode .territory-policy-stat-box {
 background: #252731 !important;
 border-color: #3a3d4d !important;
}

body.dark-mode .territory-policy-tabs .nav-link {
 color: rgba(255,255,255,.72);
}

body.dark-mode .territory-policy-tabs .nav-link:hover {
 color: #fff;
 background: rgba(255,255,255,.06);
}

body.dark-mode .territory-policy-tabs .nav-link.active {
 color: #fff;
 background: #232f84;
}

body.dark-mode .territory-policy-summary-value,
body.dark-mode .territory-policy-section-title,
body.dark-mode .territory-policy-mode-title,
body.dark-mode .territory-policy-switch-label,
body.dark-mode .territory-policy-person-title,
body.dark-mode .territory-policy-stat-value {
 color: #fff !important;
}

body.dark-mode .territory-policy-summary-label,
body.dark-mode .territory-policy-section-note,
body.dark-mode .territory-policy-mode-subtitle,
body.dark-mode .territory-policy-mode-description,
body.dark-mode .territory-policy-stat-label {
 color: rgba(255,255,255,.60) !important;
}

body.dark-mode .territory-policy-mode.active {
 background: rgba(109,124,255,.10) !important;
 border-color: #8591ff !important;
}

body.dark-mode .territory-policy-territory-option:hover {
 background: rgba(255,255,255,.04) !important;
}

body.dark-mode .territory-policy-pill {
 background: #3b4264;
 color: #e8ebff;
 border-color: #4e577f;
}

@media(max-width: 767.98px) {
 .territory-policy-tabs .nav-item,
 .territory-policy-tabs .nav-link {
  width: 100%;
 }

 .territory-policy-tabs .nav-link {
  text-align: left;
 }

 .territory-policy-territory-grid {
  grid-template-columns: 1fr;
 }

 .territory-policy-assignment-actions {
  width: 100%;
 }

 .territory-policy-assignment-actions .btn {
  width: 100%;
 }
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/settings-branding.css
   ========================================================== */
.branding-summary-card{
 border:2px solid #e9edf4;
 border-radius:8px;
 padding:16px;
 height:100%;
 background:#fff;
}

.branding-slot-card{
 border-radius:8px;
 background:#fff;
}

.branding-preview-box{
 border-radius:6px;
 min-height:90px;
 display:flex;
 align-items:center;
 justify-content:center;
}

.branding-mode-pill{
 display:inline-flex;
 align-items:center;
 gap:6px;
 border:1px solid #e9edf4;
 border-radius:50px;
 padding:5px 10px;
 font-size:12px;
 background:#f8f9fa;
}

.branding-document-disabled{
 opacity:.6;
}

body.dark-mode .branding-summary-card,
body.dark-mode .branding-slot-card{
 background:#1f2433 !important;
 border-color:#343a4f !important;
}

body.dark-mode .branding-preview-box{
 background:#fff !important;
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/settings-custom-fields.css
   ========================================================== */
.customFieldsTable th,
.customFieldsTable td {
 font-size: 14px !important;
 vertical-align: middle;
}

.customFieldsTable .form-control,
.customFieldsTable .form-select,
.customFieldsTable .btn {
 font-size: 14px !important;
}

/* Keep Slot slightly smaller/subtle if you prefer */
.customFieldsTable th:first-child,
.customFieldsTable td:first-child {
 font-size: 13px !important;
 white-space: nowrap;
}

/* Let the label/list/action columns breathe */
.customFieldsTable td:not(:first-child),
.customFieldsTable th:not(:first-child) {
 white-space: normal !important;
}

.customFieldsTable .form-select,
.customFieldsTable select.form-select {
 min-height: 38px !important;
 height: 38px !important;
 padding: 0.45rem 2.25rem 0.45rem 0.75rem !important;
 line-height: 1.4 !important;
 font-size: 14px !important;
}

.customFieldsTable .form-control {
 min-height: 38px !important;
 height: 38px !important;
 padding: 0.45rem 0.75rem !important;
 line-height: 1.4 !important;
 font-size: 14px !important;
}

.customFieldsTable .btn {
 min-height: 38px !important;
 padding: 0.45rem 0.75rem !important;
 line-height: 1.4 !important;
 font-size: 14px !important;
}

/* Helps if the Bootstrap small class is crushing the select height */
.customFieldsTable .form-select-sm,
.customFieldsTable .form-control-sm,
.customFieldsTable .btn-sm {
 padding-top: 0.45rem !important;
 padding-bottom: 0.45rem !important;
 font-size: 14px !important;
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/settings-custom-lists.css
   ========================================================== */
.custom-lists-page .table th,
         .custom-lists-page .table td {
          vertical-align: middle;
          font-size: 14px;
         }

         .custom-lists-page .form-control,
         .custom-lists-page .form-select,
         .custom-lists-page .btn {
          font-size: 14px;
         }

         .custom-lists-page .form-control,
         .custom-lists-page .form-select {
          min-height: 38px;
          padding: 0.45rem 0.75rem;
          line-height: 1.4;
         }

         .custom-lists-page .form-select {
          padding-right: 2.25rem;
         }

         .custom-list-item-pill {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          background: #f5f6fb;
          border: 1px solid #e3e6f0;
          border-radius: 999px;
          padding: 4px 10px;
          font-size: 13px;
          margin: 2px 4px 2px 0;
         }

         .custom-list-item-pill.default {
          background: rgba(19, 191, 166, 0.12);
          border-color: rgba(19, 191, 166, 0.35);
         }

         .custom-list-empty {
          color: #6c757d;
          font-size: 13px;
         }

         .custom-lists-page .modal-header .fa-times-circle {
          cursor: pointer;
         }

         .custom-list-unsaved-row {
          background: rgba(247, 183, 49, 0.08);
         }

         .custom-list-status-badge {
          min-width: 78px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 4px;
         }


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/settings-home.css
   ========================================================== */
/* Settings home: hierarchy + spacing */
.settings-section-card {
 border: 0;
 border-radius: 12px;
 margin-bottom: 1.5rem;
 box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.10);
}

.settings-section-header {
 padding: 1.25rem 1.25rem 0.75rem 1.25rem;
}

.settings-section-title {
 font-size: 1.1rem;
 font-weight: 700;
 margin: 0;
}

.settings-section-subtitle {
 font-size: 0.9rem;
 margin-top: 0.25rem;
}

.settings-section-body {
 padding: 0 1.25rem 1.25rem 1.25rem;
}

/* Tiles */
.settings-tile {
 border-radius: 12px;
 border: 1px solid rgba(0,0,0,0.06);
 min-height: 86px;
 background: transparent;
 box-shadow: 0 6px 16px rgba(0,0,0,0.07);
 transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.settings-tile:hover {
 transform: translateY(-2px);
 box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.08);
 border-color: rgba(0,0,0,0.14);
}

.settings-tile-body {
 padding: 1rem;
}

.settings-tile-title {
 font-size: 1rem;
 font-weight: 700;
 line-height: 1.2;
 margin: 0;
}

.settings-tile-meta {
 font-size: 0.85rem;
 margin-top: 0.3rem;
}

/* Sub-group block */
.settings-subgroup {
 margin-top: 1rem;
 padding-top: 1rem;
 border-top: 1px solid rgba(0,0,0,0.08);
}

.settings-subgroup-title {
 font-size: 0.95rem;
 font-weight: 700;
 margin: 0 0 0.75rem 0;
}

/* Ensure anchor hover doesn't recolor content unexpectedly */
.settings-tile-link,
.settings-tile-link:hover {
 text-decoration: none;
}

.settings-empty-message {
 padding: 1rem;
 border-radius: 10px;
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/settings-import-data.css
   ========================================================== */
.import-section-card{
 border:1px solid rgba(0,0,0,.08);
 border-radius:14px;
 box-shadow:0 .4rem 1.2rem rgba(0,0,0,.08);
}
.import-section-card .card-header{
 background:transparent;
 border-bottom:1px solid rgba(0,0,0,.06);
}
.import-section-icon{
 width:54px;
 height:54px;
 border-radius:14px;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:22px;
 background:rgba(var(--primary-rgb),.08);
 color:var(--primary-bg-color);
}
.import-stat-chip{
 display:inline-flex;
 align-items:center;
 gap:8px;
 padding:8px 12px;
 border-radius:999px;
 background:#f6f8fb;
 border:1px solid rgba(0,0,0,.06);
 font-size:12px;
 font-weight:600;
}
.import-stepper{
 display:flex;
 flex-wrap:wrap;
 gap:10px;
 margin-bottom:1rem;
}
.import-step{
 min-width:120px;
 padding:10px 14px;
 border-radius:10px;
 border:1px solid rgba(0,0,0,.08);
 background:#f8f9fb;
 color:#6c757d;
 font-size:13px;
 font-weight:600;
}
.import-step.active{
 background:rgba(var(--primary-rgb),.08);
 border-color:rgba(var(--primary-rgb),.25);
 color:var(--primary-bg-color);
}
.import-step.done{
 background:#eaf8f1;
 border-color:#b8e7cb;
 color:#16834f;
}
.import-wizard-panel{
 border:1px solid rgba(0,0,0,.08);
 border-radius:12px;
 padding:1rem;
 background:#fff;
}
.import-dropzone{
 border:2px dashed rgba(var(--primary-rgb),.25);
 border-radius:14px;
 padding:1.5rem;
 text-align:center;
 background:#fafbfd;
 transition:all .15s ease;
}
.import-dropzone.dragover{
 border-color:var(--primary-bg-color);
 background:rgba(var(--primary-rgb),.05);
}
.import-mapping-table th,
.import-mapping-table td{
 vertical-align:middle;
}
.import-preview-table{
 font-size:13px;
}
.import-hidden{
 display:none !important;
}
.import-summary-card{
 border:1px solid rgba(0,0,0,.06);
 border-radius:12px;
 padding:1rem;
 background:#fafbfd;
}
.import-complete-icon{
 width:72px;
 height:72px;
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:28px;
 margin:0 auto 1rem auto;
 background:#eaf8f1;
 color:#16834f;
}
@media (min-width: 992px){
 #importWizardModal .modal-dialog{
  max-width:1100px;
 }
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/settings-tag-cloud.css
   ========================================================== */
.tag-cloud-section{
 padding:1rem;
 height:100%;
 border:1px solid #dfe3ea;
 border-radius:8px;
 background:transparent;
}

.tag-delete-warning{
 border:1px solid #dc3545 !important;
 background:rgba(220,53,69,0.08) !important;
 color:#dc3545 !important;
}

.tag-delete-warning strong,
.tag-delete-warning div{
 color:#dc3545 !important;
}

.dark-mode .tag-cloud-section{
 border-color:rgba(255,255,255,0.12) !important;
 background:transparent !important;
 color:#ffffff !important;
}

/* Tables */
#tagCategoriesTable,
#tagsTable{
 width:100% !important;
}

#tagCategoriesTable thead th,
#tagsTable thead th{
 white-space:nowrap;
 font-size:12px;
 vertical-align:middle;
 background:#eef0f5 !important;
 color:#282f53 !important;
 border-color:#dfe3ea !important;
}

#tagCategoriesTable tbody td,
#tagsTable tbody td{
 vertical-align:middle;
}

/* Dark mode table headers only */
.dark-mode #tagCategoriesTable thead th,
.dark-mode #tagsTable thead th{
 background:#0b1f3b !important;
 color:#ffffff !important;
 border-color:rgba(255,255,255,0.12) !important;
}

/* Dark mode table body */
.dark-mode #tagCategoriesTable,
.dark-mode #tagsTable{
 color:#ffffff !important;
}

.dark-mode #tagCategoriesTable tbody td,
.dark-mode #tagsTable tbody td{
 color:#ffffff !important;
 border-color:rgba(255,255,255,0.12) !important;
}

/* Do not force row backgrounds */
.dark-mode #tagCategoriesTable tbody tr,
.dark-mode #tagsTable tbody tr{
 background:transparent !important;
}

/* DataTables controls */
.dark-mode .dataTables_wrapper,
.dark-mode .dataTables_wrapper label,
.dark-mode .dataTables_wrapper .dataTables_info,
.dark-mode .dataTables_wrapper .dataTables_length,
.dark-mode .dataTables_wrapper .dataTables_filter{
 color:#ffffff !important;
}

.dark-mode .dataTables_wrapper .form-control,
.dark-mode .dataTables_wrapper .form-select{
 background-color:#0b1f3b !important;
 color:#ffffff !important;
 border-color:rgba(255,255,255,0.12) !important;
}

.dark-mode .dataTables_wrapper .page-link{
 background-color:#0b1f3b !important;
 color:#ffffff !important;
 border-color:rgba(255,255,255,0.12) !important;
}

.dark-mode .dataTables_wrapper .page-item.active .page-link{
 background-color:var(--primary-bg-color) !important;
 border-color:var(--primary-bg-color) !important;
 color:#ffffff !important;
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/staff-list.css
   ========================================================== */
.choices__list--dropdown .choices__item--selectable.is-highlighted::after {
    content: '✓';
    float: right;
    margin-right: 10px;
    color: #28a745;
    font-weight: bold;
  }

    .choices__list--single .choices__item {
      background-color: transparent;  /* Transparent background */
      border: none;                   /* No borders for the item */
      padding: 0;                     /* Remove padding to make it look like plain text */
      margin: 0;
      color: #495057;                 /* Bootstrap text color */
    }

    /* Remove the remove button */
    .choices__list--single .choices__item .choices__button {
      display: none;
    }

    .editStaffGroupBtn i{
      color: var(--primary-bg-color) !important;
    }


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/tasks-list.css
   ========================================================== */
.dt-buttons.btn-group{
 position:relative !important;
 inset-block-end:0 !important;
 inset-inline-start:0 !important;
}

a{
 text-decoration:none !important;
}

.otp-report-header{
 display:flex;
 align-items:center;
 justify-content:flex-start;
 gap:12px;
 flex-wrap:nowrap;
 width:100% !important;
 flex:1 1 100%;
}

.otp-report-header .otp-report-title{
 min-width:0;
 flex:1 1 auto;
}

.otp-report-header .otp-add-task-button{
 margin-left:auto !important;
 flex:0 0 auto;
}

.otp-report-title p{
 margin:4px 0 0 0;
 color:#6c757d;
 font-size:13px;
}

.otp-status-buttons{
 display:flex;
 flex-wrap:wrap;
 gap:8px;
}

/* Task workflow status groups.
   Open and Completed are the two primary anchors. Related workflow
   statuses use softer shaded buttons so the groups are easy to scan. */
.otp-status-button{
 border-width:1px !important;
 font-weight:600;
 transition:background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.otp-status-button:hover{
 transform:translateY(-1px);
}

.otp-status-button-open{
 background:var(--primary-bg-color, #232f84) !important;
 border-color:var(--primary-bg-color, #232f84) !important;
 color:#fff !important;
}

.otp-status-button-open-related{
 background:rgba(35,47,132,.10) !important;
 border-color:rgba(35,47,132,.24) !important;
 color:var(--primary-bg-color, #232f84) !important;
}

.otp-status-button-completed{
 background:#198754 !important;
 border-color:#198754 !important;
 color:#fff !important;
 margin-left:8px;
}

.otp-status-button-closed-related{
 background:rgba(108,117,125,.14) !important;
 border-color:rgba(108,117,125,.28) !important;
 color:#5c636a !important;
}

.otp-status-button-all,
.otp-status-button-neutral{
 background:transparent !important;
 border-color:rgba(108,117,125,.45) !important;
 color:inherit !important;
}

.otp-status-button-all{
 margin-left:0;
}

.otp-status-button.is-active{
 box-shadow:0 0 0 3px rgba(35,47,132,.20) !important;
 border-color:currentColor !important;
}

.otp-status-button-completed.is-active{
 box-shadow:0 0 0 3px rgba(25,135,84,.22) !important;
}

.otp-status-button-closed-related.is-active{
 background:rgba(108,117,125,.28) !important;
 box-shadow:0 0 0 3px rgba(108,117,125,.18) !important;
}

.dark-mode .otp-status-button-open-related,
body.dark-mode .otp-status-button-open-related{
 background:rgba(120,135,255,.17) !important;
 border-color:rgba(150,160,255,.34) !important;
 color:#cbd1ff !important;
}

.dark-mode .otp-status-button-closed-related,
body.dark-mode .otp-status-button-closed-related{
 background:rgba(255,255,255,.10) !important;
 border-color:rgba(255,255,255,.20) !important;
 color:#d9dde7 !important;
}

.dark-mode .otp-status-button-all,
.dark-mode .otp-status-button-neutral,
body.dark-mode .otp-status-button-all,
body.dark-mode .otp-status-button-neutral{
 border-color:rgba(255,255,255,.30) !important;
 color:#e4e7ee !important;
}

.otp-stat-card,
.otp-filter-card,
.otp-table-card{
 border:0;
 border-radius:18px;
 box-shadow:0 8px 24px rgba(15, 23, 42, 0.08);
 background:#fff;
 height:100%;
}

.otp-stat-card{
 --otp-stat-bg:#eef4ff;
 --otp-stat-icon-bg:#cbdafe;
 --otp-stat-icon-color:#24478f;
 --otp-stat-value-color:#1d376d;
 --otp-stat-label-color:#52678f;
 --otp-stat-sub-color:#6d7f9e;
 --otp-stat-bg-dark:#25304a;
 --otp-stat-icon-bg-dark:#394d78;
 --otp-stat-icon-color-dark:#b9cbff;
 --otp-stat-value-color-dark:#e7edff;
 --otp-stat-label-color-dark:#c4d0ef;
 --otp-stat-sub-color-dark:#aebbd8;
 padding:14px;
 background:var(--otp-stat-bg);
 border:1px solid rgba(15,23,42,.04);
}

.otp-stat-blue{
 --otp-stat-bg:#edf4ff;
 --otp-stat-icon-bg:#c9dcff;
 --otp-stat-icon-color:#2452a4;
 --otp-stat-value-color:#1d4080;
 --otp-stat-label-color:#4e6692;
 --otp-stat-sub-color:#6d7f9f;
 --otp-stat-bg-dark:#26334f;
 --otp-stat-icon-bg-dark:#3d5688;
 --otp-stat-icon-color-dark:#b8ccff;
}

.otp-stat-teal{
 --otp-stat-bg:#e9f8f6;
 --otp-stat-icon-bg:#bfe9e2;
 --otp-stat-icon-color:#176c63;
 --otp-stat-value-color:#14584f;
 --otp-stat-label-color:#4b746f;
 --otp-stat-sub-color:#668a85;
 --otp-stat-bg-dark:#203d3b;
 --otp-stat-icon-bg-dark:#2f625d;
 --otp-stat-icon-color-dark:#a9e2da;
}

.otp-stat-red{
 --otp-stat-bg:#fff0f1;
 --otp-stat-icon-bg:#f8cdd2;
 --otp-stat-icon-color:#a83242;
 --otp-stat-value-color:#842737;
 --otp-stat-label-color:#8e5861;
 --otp-stat-sub-color:#a07179;
 --otp-stat-bg-dark:#4a292f;
 --otp-stat-icon-bg-dark:#743b47;
 --otp-stat-icon-color-dark:#ffc1ca;
}

.otp-stat-amber{
 --otp-stat-bg:#fff7e8;
 --otp-stat-icon-bg:#f8dfad;
 --otp-stat-icon-color:#95610b;
 --otp-stat-value-color:#754b08;
 --otp-stat-label-color:#826b43;
 --otp-stat-sub-color:#9a835c;
 --otp-stat-bg-dark:#463a24;
 --otp-stat-icon-bg-dark:#705729;
 --otp-stat-icon-color-dark:#ffe0a2;
}

.otp-stat-green{
 --otp-stat-bg:#edf8f0;
 --otp-stat-icon-bg:#c6e8ce;
 --otp-stat-icon-color:#26713b;
 --otp-stat-value-color:#1e5a30;
 --otp-stat-label-color:#56745e;
 --otp-stat-sub-color:#708c76;
 --otp-stat-bg-dark:#243c2b;
 --otp-stat-icon-bg-dark:#3a6547;
 --otp-stat-icon-color-dark:#b8e9c3;
}

.otp-stat-purple{
 --otp-stat-bg:#f4efff;
 --otp-stat-icon-bg:#ddd0fb;
 --otp-stat-icon-color:#6541a3;
 --otp-stat-value-color:#50327f;
 --otp-stat-label-color:#716084;
 --otp-stat-sub-color:#887a99;
 --otp-stat-bg-dark:#352c49;
 --otp-stat-icon-bg-dark:#574578;
 --otp-stat-icon-color-dark:#d5c3ff;
}

.otp-stat-slate{
 --otp-stat-bg:#f1f3f5;
 --otp-stat-icon-bg:#d7dce1;
 --otp-stat-icon-color:#53606c;
 --otp-stat-value-color:#414b55;
 --otp-stat-label-color:#69737c;
 --otp-stat-sub-color:#808990;
 --otp-stat-bg-dark:#32363d;
 --otp-stat-icon-bg-dark:#4c535d;
 --otp-stat-icon-color-dark:#d4d9df;
}

.otp-stat-label{
 font-size:12px;
 color:var(--otp-stat-label-color);
 text-transform:uppercase;
 letter-spacing:.03em;
 margin-bottom:6px;
}

.otp-stat-value{
 font-size:22px;
 font-weight:700;
 line-height:1.2;
 color:var(--otp-stat-value-color) !important;
}

.otp-stat-sub{
 font-size:12px;
 color:var(--otp-stat-sub-color);
 margin-top:5px;
}

.otp-stat-icon{
 width:42px;
 height:42px;
 border-radius:14px;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 background:var(--otp-stat-icon-bg);
 color:var(--otp-stat-icon-color);
 flex:0 0 auto;
}

.otp-filter-card{
 margin-bottom:18px;
}


.otp-filter-label{
 font-size:10px;
 font-weight:800;
 color:#6c757d;
 text-transform:uppercase;
 letter-spacing:.05em;
 margin-bottom:5px;
}

.otp-date-presets{
 display:flex;
 flex-wrap:wrap;
 gap:6px;
}

.otp-date-preset{
 border:1px solid #dfe4ee;
 background:#fff;
 border-radius:8px;
 padding:6px 10px;
 font-size:11px;
 font-weight:700;
 color:#4b5563;
 cursor:pointer;
 transition:all .15s ease;
}

.otp-date-preset:hover{
 border-color:rgba(35,47,132,.35);
 color:var(--primary-bg-color, #232f84);
}

.otp-date-preset.active{
 background:var(--primary-bg-color, #232f84);
 border-color:var(--primary-bg-color, #232f84);
 color:#fff;
 box-shadow:0 5px 12px rgba(35,47,132,.18);
}

.otp-filter-status{
 min-height:18px;
 padding-top:3px;
 font-size:10px;
 color:#6c757d;
 text-align:center;
}

body.dark-mode .otp-date-preset,
.dark-mode .otp-date-preset{
 background:#2e303a;
 border-color:#444756;
 color:#d6d9e0;
}

body.dark-mode .otp-date-preset.active,
.dark-mode .otp-date-preset.active{
 background:var(--primary-bg-color, #232f84);
 border-color:var(--primary-bg-color, #232f84);
 color:#fff;
}

body.dark-mode .otp-filter-label,
body.dark-mode .otp-filter-status,
.dark-mode .otp-filter-label,
.dark-mode .otp-filter-status{
 color:#b0b5c0;
}

.otp-table-card .table-responsive{
 width:100%;
 overflow-x:auto;
}

.otp-report-table{
 width:100% !important;
 font-size:13px;
}

.otp-report-table thead th{
 white-space:nowrap !important;
 font-size:12px !important;
 vertical-align:middle !important;
 background-color:inherit !important;
 color:inherit !important;
}

.otp-report-table tbody td{
 vertical-align:middle !important;
 font-size:13px !important;
 white-space:nowrap !important;
}

.otp-report-table td.otp-text-cell{
 white-space:normal !important;
 min-width:220px;
 max-width:360px;
 overflow:hidden;
 text-overflow:ellipsis;
}

.otp-report-table td.otp-actions-cell{
 white-space:nowrap !important;
 text-align:center;
 min-width:90px;
}

.otp-report-table tbody td a,
.otp-report-table tbody td a strong{
 color:inherit !important;
}

.otp-report-table tbody td a:hover,
.otp-report-table tbody td a:hover strong{
 color:inherit !important;
 text-decoration:underline !important;
}

.badge-otp{
 font-size:11px;
 padding:5px 8px;
 border-radius:50px;
}

.otp-actions{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 gap:4px;
}

.otp-actions a{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 width:30px;
 height:30px;
 border-radius:8px;
 text-decoration:none !important;
 background:rgba(35,47,132,.08);
}

.otp-actions a:hover{
 background:rgba(35,47,132,.15);
}

.otp-actions a.text-danger,
.otp-actions .deleteVisitFromList{
 color:#dc3545 !important;
 background:rgba(220,53,69,.08);
}

.otp-table-message .alert{
 margin-bottom:12px;
}

.dark-mode .otp-filter-card,
.dark-mode .otp-table-card,
body.dark-mode .otp-filter-card,
body.dark-mode .otp-table-card{
 background:#2E303A;
 border-color:rgba(255,255,255,0.08);
}

.dark-mode .otp-stat-card,
body.dark-mode .otp-stat-card{
 background:var(--otp-stat-bg-dark);
 border-color:rgba(255,255,255,.07);
}

.dark-mode .otp-stat-label,
body.dark-mode .otp-stat-label{
 color:var(--otp-stat-label-color-dark) !important;
}

.dark-mode .otp-stat-value,
body.dark-mode .otp-stat-value{
 color:var(--otp-stat-value-color-dark) !important;
}

.dark-mode .otp-stat-sub,
body.dark-mode .otp-stat-sub{
 color:var(--otp-stat-sub-color-dark) !important;
}

.dark-mode .otp-stat-icon,
body.dark-mode .otp-stat-icon{
 background:var(--otp-stat-icon-bg-dark);
 color:var(--otp-stat-icon-color-dark);
}


/* Mobile-only spacing reduction for report pages.
   Keeps the desktop card layout unchanged, but gives the DataTable
   almost the full phone viewport on smaller screens. */
@media (max-width: 767.98px){
 .otp-report-mobile-page,
 .otp-report-mobile-page .side-app,
 .otp-report-mobile-page .main-container,
 .otp-report-mobile-page .container-fluid{
  padding-left:2px !important;
  padding-right:2px !important;
 }

 .otp-report-mobile-page .jumps-prevent{
  padding-top:0 !important;
 }

 .otp-report-mobile-page .row,
 .otp-report-mobile-page .row-sm{
  margin-left:-2px !important;
  margin-right:-2px !important;
 }

 .otp-report-mobile-page .row > [class*="col-"],
 .otp-report-mobile-page .row-sm > [class*="col-"]{
  padding-left:2px !important;
  padding-right:2px !important;
 }

 .otp-report-mobile-page .page-header,
 .otp-report-mobile-page .page-title,
 .otp-report-mobile-page .breadcrumb{
  margin-bottom:6px !important;
  padding-left:0 !important;
  padding-right:0 !important;
 }

 .otp-report-mobile-page .card{
  border-radius:10px !important;
  margin-bottom:8px !important;
  padding:5px !important;
 }

 .otp-report-mobile-page .card-header,
 .otp-report-mobile-page .card-body{
  padding:6px !important;
 }

 .otp-report-mobile-page .otp-report-header{
  gap:6px !important;
  flex-wrap:nowrap !important;
  width:100% !important;
 }

 .otp-report-mobile-page .otp-add-task-button{
  margin-left:auto !important;
  flex:0 0 auto !important;
 }

 .otp-report-mobile-page .otp-report-title p{
  display:none !important;
 }

 .otp-report-mobile-page .otp-status-buttons{
  gap:5px !important;
 }

 .otp-report-mobile-page .otp-status-buttons .btn,
 .otp-report-mobile-page .btn-sm{
  padding:0.25rem 0.45rem !important;
  font-size:12px !important;
 }

 .otp-report-mobile-page .otp-stat-card,
 .otp-report-mobile-page .otp-filter-card,
 .otp-report-mobile-page .otp-table-card{
  border-radius:10px !important;
  box-shadow:none !important;
 }

 .otp-report-mobile-page .otp-stat-card{
  padding:8px !important;
 }

 .otp-report-mobile-page .otp-stat-icon{
  width:34px !important;
  height:34px !important;
  border-radius:10px !important;
 }

 .otp-report-mobile-page .otp-stat-value{
  font-size:18px !important;
 }

 .otp-report-mobile-page .otp-table-card{
  padding:2px !important;
 }

 .otp-report-mobile-page .otp-table-card .card-body{
  padding:2px !important;
 }

 .otp-report-mobile-page .otp-table-card .table-responsive{
  width:calc(100vw - 8px) !important;
  max-width:calc(100vw - 8px) !important;
  margin-left:calc(50% - 50vw + 4px) !important;
  margin-right:calc(50% - 50vw + 4px) !important;
  padding:0 !important;
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch;
 }

 .otp-report-mobile-page .otp-report-table{
  margin-bottom:0 !important;
  font-size:12px !important;
 }

 .otp-report-mobile-page .otp-report-table thead th,
 .otp-report-mobile-page .otp-report-table tbody td{
  padding:0.35rem 0.45rem !important;
  font-size:12px !important;
 }

 .otp-report-mobile-page .otp-report-table td.otp-text-cell{
  min-width:160px !important;
  max-width:220px !important;
 }

 .otp-report-mobile-page .otp-actions a{
  width:26px !important;
  height:26px !important;
 }

 .otp-report-mobile-page .dataTables_wrapper .row,
 .otp-report-mobile-page .dt-container .row{
  margin-left:0 !important;
  margin-right:0 !important;
 }

 .otp-report-mobile-page .dataTables_wrapper .row > [class*="col-"],
 .otp-report-mobile-page .dt-container .row > [class*="col-"]{
  padding-left:0 !important;
  padding-right:0 !important;
 }

 .otp-report-mobile-page .dataTables_length,
 .otp-report-mobile-page .dataTables_filter,
 .otp-report-mobile-page .dataTables_info,
 .otp-report-mobile-page .dataTables_paginate,
 .otp-report-mobile-page .dt-buttons{
  margin-bottom:6px !important;
 }

 .otp-report-mobile-page .dataTables_filter,
 .otp-report-mobile-page .dataTables_filter label,
 .otp-report-mobile-page .dataTables_filter input{
  width:100% !important;
 }

 .otp-report-mobile-page .pagination{
  flex-wrap:wrap !important;
  justify-content:flex-start !important;
 }
}


/* ==========================================================
   EXTRACTED CRM STYLES
   Sources: pages/visit-list.css
   ========================================================== */
.dt-buttons.btn-group{
 position:relative !important;
 inset-block-end:0 !important;
 inset-inline-start:0 !important;
}

a{
 text-decoration:none !important;
}

.otp-report-header{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:12px;
 flex-wrap:wrap;
}

.otp-report-title p{
 margin:4px 0 0 0;
 color:#6c757d;
 font-size:13px;
}

.otp-status-buttons{
 display:flex;
 flex-wrap:wrap;
 gap:8px;
}

/* Task workflow status groups.
   Open and Completed are the two primary anchors. Related workflow
   statuses use softer shaded buttons so the groups are easy to scan. */
.otp-status-button{
 border-width:1px !important;
 font-weight:600;
 transition:background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.otp-status-button:hover{
 transform:translateY(-1px);
}

.otp-status-button-open{
 background:var(--primary-bg-color, #232f84) !important;
 border-color:var(--primary-bg-color, #232f84) !important;
 color:#fff !important;
}

.otp-status-button-open-related{
 background:rgba(35,47,132,.10) !important;
 border-color:rgba(35,47,132,.24) !important;
 color:var(--primary-bg-color, #232f84) !important;
}

.otp-status-button-completed{
 background:#198754 !important;
 border-color:#198754 !important;
 color:#fff !important;
 margin-left:8px;
}

.otp-status-button-closed-related{
 background:rgba(108,117,125,.14) !important;
 border-color:rgba(108,117,125,.28) !important;
 color:#5c636a !important;
}

.otp-status-button-all,
.otp-status-button-neutral{
 background:transparent !important;
 border-color:rgba(108,117,125,.45) !important;
 color:inherit !important;
}

.otp-status-button-all{
 margin-left:0;
}

.otp-status-button.is-active{
 box-shadow:0 0 0 3px rgba(35,47,132,.20) !important;
 border-color:currentColor !important;
}

.otp-status-button-completed.is-active{
 box-shadow:0 0 0 3px rgba(25,135,84,.22) !important;
}

.otp-status-button-closed-related.is-active{
 background:rgba(108,117,125,.28) !important;
 box-shadow:0 0 0 3px rgba(108,117,125,.18) !important;
}

.dark-mode .otp-status-button-open-related,
body.dark-mode .otp-status-button-open-related{
 background:rgba(120,135,255,.17) !important;
 border-color:rgba(150,160,255,.34) !important;
 color:#cbd1ff !important;
}

.dark-mode .otp-status-button-closed-related,
body.dark-mode .otp-status-button-closed-related{
 background:rgba(255,255,255,.10) !important;
 border-color:rgba(255,255,255,.20) !important;
 color:#d9dde7 !important;
}

.dark-mode .otp-status-button-all,
.dark-mode .otp-status-button-neutral,
body.dark-mode .otp-status-button-all,
body.dark-mode .otp-status-button-neutral{
 border-color:rgba(255,255,255,.30) !important;
 color:#e4e7ee !important;
}

.otp-stat-card,
.otp-filter-card,
.otp-table-card{
 border:0;
 border-radius:18px;
 box-shadow:0 8px 24px rgba(15, 23, 42, 0.08);
 background:#fff;
 height:100%;
}

.otp-stat-card{
 --otp-stat-bg:#eef4ff;
 --otp-stat-icon-bg:#cbdafe;
 --otp-stat-icon-color:#24478f;
 --otp-stat-value-color:#1d376d;
 --otp-stat-label-color:#52678f;
 --otp-stat-sub-color:#6d7f9e;
 --otp-stat-bg-dark:#25304a;
 --otp-stat-icon-bg-dark:#394d78;
 --otp-stat-icon-color-dark:#b9cbff;
 --otp-stat-value-color-dark:#e7edff;
 --otp-stat-label-color-dark:#c4d0ef;
 --otp-stat-sub-color-dark:#aebbd8;
 padding:14px;
 background:var(--otp-stat-bg);
 border:1px solid rgba(15,23,42,.04);
}

.otp-stat-blue{
 --otp-stat-bg:#edf4ff;
 --otp-stat-icon-bg:#c9dcff;
 --otp-stat-icon-color:#2452a4;
 --otp-stat-value-color:#1d4080;
 --otp-stat-label-color:#4e6692;
 --otp-stat-sub-color:#6d7f9f;
 --otp-stat-bg-dark:#26334f;
 --otp-stat-icon-bg-dark:#3d5688;
 --otp-stat-icon-color-dark:#b8ccff;
}

.otp-stat-teal{
 --otp-stat-bg:#e9f8f6;
 --otp-stat-icon-bg:#bfe9e2;
 --otp-stat-icon-color:#176c63;
 --otp-stat-value-color:#14584f;
 --otp-stat-label-color:#4b746f;
 --otp-stat-sub-color:#668a85;
 --otp-stat-bg-dark:#203d3b;
 --otp-stat-icon-bg-dark:#2f625d;
 --otp-stat-icon-color-dark:#a9e2da;
}

.otp-stat-red{
 --otp-stat-bg:#fff0f1;
 --otp-stat-icon-bg:#f8cdd2;
 --otp-stat-icon-color:#a83242;
 --otp-stat-value-color:#842737;
 --otp-stat-label-color:#8e5861;
 --otp-stat-sub-color:#a07179;
 --otp-stat-bg-dark:#4a292f;
 --otp-stat-icon-bg-dark:#743b47;
 --otp-stat-icon-color-dark:#ffc1ca;
}

.otp-stat-amber{
 --otp-stat-bg:#fff7e8;
 --otp-stat-icon-bg:#f8dfad;
 --otp-stat-icon-color:#95610b;
 --otp-stat-value-color:#754b08;
 --otp-stat-label-color:#826b43;
 --otp-stat-sub-color:#9a835c;
 --otp-stat-bg-dark:#463a24;
 --otp-stat-icon-bg-dark:#705729;
 --otp-stat-icon-color-dark:#ffe0a2;
}

.otp-stat-green{
 --otp-stat-bg:#edf8f0;
 --otp-stat-icon-bg:#c6e8ce;
 --otp-stat-icon-color:#26713b;
 --otp-stat-value-color:#1e5a30;
 --otp-stat-label-color:#56745e;
 --otp-stat-sub-color:#708c76;
 --otp-stat-bg-dark:#243c2b;
 --otp-stat-icon-bg-dark:#3a6547;
 --otp-stat-icon-color-dark:#b8e9c3;
}

.otp-stat-purple{
 --otp-stat-bg:#f4efff;
 --otp-stat-icon-bg:#ddd0fb;
 --otp-stat-icon-color:#6541a3;
 --otp-stat-value-color:#50327f;
 --otp-stat-label-color:#716084;
 --otp-stat-sub-color:#887a99;
 --otp-stat-bg-dark:#352c49;
 --otp-stat-icon-bg-dark:#574578;
 --otp-stat-icon-color-dark:#d5c3ff;
}

.otp-stat-slate{
 --otp-stat-bg:#f1f3f5;
 --otp-stat-icon-bg:#d7dce1;
 --otp-stat-icon-color:#53606c;
 --otp-stat-value-color:#414b55;
 --otp-stat-label-color:#69737c;
 --otp-stat-sub-color:#808990;
 --otp-stat-bg-dark:#32363d;
 --otp-stat-icon-bg-dark:#4c535d;
 --otp-stat-icon-color-dark:#d4d9df;
}

.otp-stat-label{
 font-size:12px;
 color:var(--otp-stat-label-color);
 text-transform:uppercase;
 letter-spacing:.03em;
 margin-bottom:6px;
}

.otp-stat-value{
 font-size:22px;
 font-weight:700;
 line-height:1.2;
 color:var(--otp-stat-value-color) !important;
}

.otp-stat-sub{
 font-size:12px;
 color:var(--otp-stat-sub-color);
 margin-top:5px;
}

.otp-stat-icon{
 width:42px;
 height:42px;
 border-radius:14px;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 background:var(--otp-stat-icon-bg);
 color:var(--otp-stat-icon-color);
 flex:0 0 auto;
}

.otp-filter-card{
 margin-bottom:18px;
}


.otp-filter-label{
 font-size:10px;
 font-weight:800;
 color:#6c757d;
 text-transform:uppercase;
 letter-spacing:.05em;
 margin-bottom:5px;
}

.otp-date-presets{
 display:flex;
 flex-wrap:wrap;
 gap:6px;
}

.otp-date-preset{
 border:1px solid #dfe4ee;
 background:#fff;
 border-radius:8px;
 padding:6px 10px;
 font-size:11px;
 font-weight:700;
 color:#4b5563;
 cursor:pointer;
 transition:all .15s ease;
}

.otp-date-preset:hover{
 border-color:rgba(35,47,132,.35);
 color:var(--primary-bg-color, #232f84);
}

.otp-date-preset.active{
 background:var(--primary-bg-color, #232f84);
 border-color:var(--primary-bg-color, #232f84);
 color:#fff;
 box-shadow:0 5px 12px rgba(35,47,132,.18);
}

.otp-filter-status{
 min-height:18px;
 padding-top:3px;
 font-size:10px;
 color:#6c757d;
 text-align:center;
}

body.dark-mode .otp-date-preset,
.dark-mode .otp-date-preset{
 background:#2e303a;
 border-color:#444756;
 color:#d6d9e0;
}

body.dark-mode .otp-date-preset.active,
.dark-mode .otp-date-preset.active{
 background:var(--primary-bg-color, #232f84);
 border-color:var(--primary-bg-color, #232f84);
 color:#fff;
}

body.dark-mode .otp-filter-label,
body.dark-mode .otp-filter-status,
.dark-mode .otp-filter-label,
.dark-mode .otp-filter-status{
 color:#b0b5c0;
}

.otp-table-card .table-responsive{
 width:100%;
 overflow-x:auto;
}

.otp-report-table{
 width:100% !important;
 font-size:13px;
}

.otp-report-table thead th{
 white-space:nowrap !important;
 font-size:12px !important;
 vertical-align:middle !important;
 background-color:inherit !important;
 color:inherit !important;
}

.otp-report-table tbody td{
 vertical-align:middle !important;
 font-size:13px !important;
 white-space:nowrap !important;
}

.otp-report-table td.otp-text-cell{
 white-space:normal !important;
 min-width:220px;
 max-width:360px;
 overflow:hidden;
 text-overflow:ellipsis;
}

.otp-report-table td.otp-actions-cell{
 white-space:nowrap !important;
 text-align:center;
 min-width:90px;
}

.otp-report-table tbody td a,
.otp-report-table tbody td a strong{
 color:inherit !important;
}

.otp-report-table tbody td a:hover,
.otp-report-table tbody td a:hover strong{
 color:inherit !important;
 text-decoration:underline !important;
}

.badge-otp{
 font-size:11px;
 padding:5px 8px;
 border-radius:50px;
}

.otp-actions{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 gap:4px;
}

.otp-actions a{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 width:30px;
 height:30px;
 border-radius:8px;
 text-decoration:none !important;
 background:rgba(35,47,132,.08);
}

.otp-actions a:hover{
 background:rgba(35,47,132,.15);
}

.otp-actions a.text-danger,
.otp-actions .deleteVisitFromList{
 color:#dc3545 !important;
 background:rgba(220,53,69,.08);
}

.otp-table-message .alert{
 margin-bottom:12px;
}

.dark-mode .otp-filter-card,
.dark-mode .otp-table-card,
body.dark-mode .otp-filter-card,
body.dark-mode .otp-table-card{
 background:#2E303A;
 border-color:rgba(255,255,255,0.08);
}

.dark-mode .otp-stat-card,
body.dark-mode .otp-stat-card{
 background:var(--otp-stat-bg-dark);
 border-color:rgba(255,255,255,.07);
}

.dark-mode .otp-stat-label,
body.dark-mode .otp-stat-label{
 color:var(--otp-stat-label-color-dark) !important;
}

.dark-mode .otp-stat-value,
body.dark-mode .otp-stat-value{
 color:var(--otp-stat-value-color-dark) !important;
}

.dark-mode .otp-stat-sub,
body.dark-mode .otp-stat-sub{
 color:var(--otp-stat-sub-color-dark) !important;
}

.dark-mode .otp-stat-icon,
body.dark-mode .otp-stat-icon{
 background:var(--otp-stat-icon-bg-dark);
 color:var(--otp-stat-icon-color-dark);
}


/* Mobile-only spacing reduction for report pages.
   Keeps the desktop card layout unchanged, but gives the DataTable
   almost the full phone viewport on smaller screens. */
@media (max-width: 767.98px){
 .otp-report-mobile-page,
 .otp-report-mobile-page .side-app,
 .otp-report-mobile-page .main-container,
 .otp-report-mobile-page .container-fluid{
  padding-left:2px !important;
  padding-right:2px !important;
 }

 .otp-report-mobile-page .jumps-prevent{
  padding-top:0 !important;
 }

 .otp-report-mobile-page .row,
 .otp-report-mobile-page .row-sm{
  margin-left:-2px !important;
  margin-right:-2px !important;
 }

 .otp-report-mobile-page .row > [class*="col-"],
 .otp-report-mobile-page .row-sm > [class*="col-"]{
  padding-left:2px !important;
  padding-right:2px !important;
 }

 .otp-report-mobile-page .page-header,
 .otp-report-mobile-page .page-title,
 .otp-report-mobile-page .breadcrumb{
  margin-bottom:6px !important;
  padding-left:0 !important;
  padding-right:0 !important;
 }

 .otp-report-mobile-page .card{
  border-radius:10px !important;
  margin-bottom:8px !important;
  padding:5px !important;
 }

 .otp-report-mobile-page .card-header,
 .otp-report-mobile-page .card-body{
  padding:6px !important;
 }

 .otp-report-mobile-page .otp-report-header{
  gap:6px !important;
 }

 .otp-report-mobile-page .otp-report-title p{
  display:none !important;
 }

 .otp-report-mobile-page .otp-status-buttons{
  gap:5px !important;
 }

 .otp-report-mobile-page .otp-status-buttons .btn,
 .otp-report-mobile-page .btn-sm{
  padding:0.25rem 0.45rem !important;
  font-size:12px !important;
 }

 .otp-report-mobile-page .otp-stat-card,
 .otp-report-mobile-page .otp-filter-card,
 .otp-report-mobile-page .otp-table-card{
  border-radius:10px !important;
  box-shadow:none !important;
 }

 .otp-report-mobile-page .otp-stat-card{
  padding:8px !important;
 }

 .otp-report-mobile-page .otp-stat-icon{
  width:34px !important;
  height:34px !important;
  border-radius:10px !important;
 }

 .otp-report-mobile-page .otp-stat-value{
  font-size:18px !important;
 }

 .otp-report-mobile-page .otp-table-card{
  padding:2px !important;
 }

 .otp-report-mobile-page .otp-table-card .card-body{
  padding:2px !important;
 }

 .otp-report-mobile-page .otp-table-card .table-responsive{
  width:calc(100vw - 8px) !important;
  max-width:calc(100vw - 8px) !important;
  margin-left:calc(50% - 50vw + 4px) !important;
  margin-right:calc(50% - 50vw + 4px) !important;
  padding:0 !important;
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch;
 }

 .otp-report-mobile-page .otp-report-table{
  margin-bottom:0 !important;
  font-size:12px !important;
 }

 .otp-report-mobile-page .otp-report-table thead th,
 .otp-report-mobile-page .otp-report-table tbody td{
  padding:0.35rem 0.45rem !important;
  font-size:12px !important;
 }

 .otp-report-mobile-page .otp-report-table td.otp-text-cell{
  min-width:160px !important;
  max-width:220px !important;
 }

 .otp-report-mobile-page .otp-actions a{
  width:26px !important;
  height:26px !important;
 }

 .otp-report-mobile-page .dataTables_wrapper .row,
 .otp-report-mobile-page .dt-container .row{
  margin-left:0 !important;
  margin-right:0 !important;
 }

 .otp-report-mobile-page .dataTables_wrapper .row > [class*="col-"],
 .otp-report-mobile-page .dt-container .row > [class*="col-"]{
  padding-left:0 !important;
  padding-right:0 !important;
 }

 .otp-report-mobile-page .dataTables_length,
 .otp-report-mobile-page .dataTables_filter,
 .otp-report-mobile-page .dataTables_info,
 .otp-report-mobile-page .dataTables_paginate,
 .otp-report-mobile-page .dt-buttons{
  margin-bottom:6px !important;
 }

 .otp-report-mobile-page .dataTables_filter,
 .otp-report-mobile-page .dataTables_filter label,
 .otp-report-mobile-page .dataTables_filter input{
  width:100% !important;
 }

 .otp-report-mobile-page .pagination{
  flex-wrap:wrap !important;
  justify-content:flex-start !important;
 }
}


/* ==========================================================
   GLOBAL DATATABLES DARK MODE - AUTHORITATIVE
   ========================================================== */
table.dataTable thead th,
table.dataTable thead td,
.dataTable thead th,
.dataTable thead td {
  vertical-align: middle;
}

table.dataTable thead > tr > th span.dt-column-order,
table.dataTable thead > tr > td span.dt-column-order {
  color: inherit;
}

body.dark-mode table.dataTable thead th,
body.dark-mode table.dataTable thead td,
body.dark-mode .dataTable thead th,
body.dark-mode .dataTable thead td,
body.dark-mode .dt-scroll-head table.dataTable thead th,
body.dark-mode .dt-scroll-head table.dataTable thead td,
body.dark-mode .dataTables_scrollHead table.dataTable thead th,
body.dark-mode .dataTables_scrollHead table.dataTable thead td,
body.dark-mode table.dataTable thead .table-light th,
body.dark-mode table.dataTable thead.table-light th,
body.dark-mode .table.dataTable > thead.table-light > tr > th,
body.dark-mode .table.dataTable > thead > tr.table-light > th,
body.dark-mode .fixedHeader-floating thead th,
body.dark-mode .fixedHeader-locked thead th {
  background: #2e303a !important;
  background-color: #2e303a !important;
  color: #f4f6fb !important;
  border-color: #454957 !important;
  box-shadow: none !important;
}

body.dark-mode table.dataTable thead th:hover,
body.dark-mode table.dataTable thead td:hover,
body.dark-mode .dt-scroll-head table.dataTable thead th:hover,
body.dark-mode .dataTables_scrollHead table.dataTable thead th:hover {
  background-color: #353844 !important;
  color: #ffffff !important;
}

body.dark-mode table.dataTable thead > tr > th span.dt-column-order::before,
body.dark-mode table.dataTable thead > tr > th span.dt-column-order::after,
body.dark-mode table.dataTable thead > tr > td span.dt-column-order::before,
body.dark-mode table.dataTable thead > tr > td span.dt-column-order::after,
body.dark-mode table.dataTable thead .sorting::before,
body.dark-mode table.dataTable thead .sorting::after,
body.dark-mode table.dataTable thead .sorting_asc::before,
body.dark-mode table.dataTable thead .sorting_asc::after,
body.dark-mode table.dataTable thead .sorting_desc::before,
body.dark-mode table.dataTable thead .sorting_desc::after {
  color: #d9deea !important;
  opacity: .8 !important;
}

body.dark-mode .dataTable .table-light,
body.dark-mode .dataTable .table-light > th,
body.dark-mode .dataTable .table-light > td {
  --bs-table-bg: #2e303a !important;
  --bs-table-color: #f4f6fb !important;
  --bs-table-border-color: #454957 !important;
  color: #f4f6fb !important;
  border-color: #454957 !important;
}

/* ==========================================================
   ACCOUNT ACCORDIONS - DARK MODE VISIBILITY FIXES
   ========================================================== */
/* Contact email links must remain readable against dark table rows. */
body.dark-mode #accordion-contacts a[href^="mailto:"],
.dark-mode #accordion-contacts a[href^="mailto:"] {
 color: #ffffff !important;
 -webkit-text-fill-color: #ffffff !important;
}

/* Edit icons across all account accordions must remain visible in dark mode. */
body.dark-mode #accordion1 .edit-icon,
body.dark-mode #accordion1 i.fa-edit,
body.dark-mode #accordion1 i.fa-pen,
body.dark-mode #accordion1 i.fa-pencil,
body.dark-mode #accordion1 i.fa-pencil-alt,
body.dark-mode #accordion1 i.fa-pen-to-square,
.dark-mode #accordion1 .edit-icon,
.dark-mode #accordion1 i.fa-edit,
.dark-mode #accordion1 i.fa-pen,
.dark-mode #accordion1 i.fa-pencil,
.dark-mode #accordion1 i.fa-pencil-alt,
.dark-mode #accordion1 i.fa-pen-to-square {
 color: #ffffff !important;
 -webkit-text-fill-color: #ffffff !important;
}

/* ============================================================
   Reports Home - category heading isolation
   Prevent generic report-category-heading rules used by other
   report layouts from pushing the heading text to the far right.
   ============================================================ */
.reports-v4-page .report-category-heading {
 display: flex;
 align-items: center;
 justify-content: flex-start;
 gap: 11px;
 margin-bottom: 12px;
}