/* ============================================================================
   SECTION 1 — ROOT COLOURS, VARIABLES & GLOBAL DEFAULTS
   These variables give you unified colours across theCRM.
   Modify here once → reflected everywhere.
   ============================================================================ */

:root {
    --header-h: 56px; /* Height of top toolbar */
    --bs-primary: #C71A61;
    --bs-primary-rgb: 199, 26, 97;
    /* CRM brand colours */
    --tc-color-ps: #BAB812; /* Pastel yellow (Process) */
    --tc-color-st: #65613C; /* Slate olive (Status) */
    --tc-color-pk: #C71A61; /* Pink (Primary CRM colour) */
    --tc-color-ba: #BADA55; /* Lime (accent / highlight) */
    --tc-color-border: rgba(133,133,133,1);
    --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
    --dxbl-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
    --dxbl-grid-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}


/* ============================================================================
   SECTION 1.1 — Global Body Defaults
   Full-height app, no scroll bleed, consistent font stack.
   ============================================================================ */

html, body {
    height: 100%;
    margin: 0;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-size: 16px;
    background-color: #EEEEEE !important;
    overflow: hidden; /* prevents page scroll behind modals/windows */
}

/* ============================================================================
   SECTION 2 — CORE LAYOUT (PAGE, SIDEBAR, HEADER, MAIN CONTENT AREA)
   Everything here defines the master UI frame of theCRM.
   ============================================================================ */

/* === Root application wrapper === */
.page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.body-row {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
}

.home-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}


/* === LEFT NAV SIDEBAR ============================================== */
.sidebar {
    flex: 0 0 260px; /* fixed width */
    overflow-y: auto; /* scroll only inside the sidebar */
}

/* Icon + text inside nav links */
nav .nav-link i {
    color: var(--tc-color-ba) !important;
    margin-right: 10px;
}

nav .nav-link .sv-normal {
    display: inline-block;
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* === MAIN COLUMN ==================================================== */
main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0; /* prevents layout overflow */
    min-height: 0;
}

/* === TOP HEADER ROW ================================================= */
.top-row {
    flex: 0 0 var(--header-h);
    height: var(--header-h);
    display: flex;
    align-items: center;
    background-color: #404040 !important;
}

.top-left {
    color: white;
    font-size: 18px;
}

/* ============================================================================
   SECTION 2.1 — FULL-HEIGHT CONTENT MODE FOR LIST PAGES
   This fixes grids so they scroll inside the window, not the whole page.
   ============================================================================ */

.content--fullheight {
    height: calc(100vh - var(--header-h));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    padding: 0 !important;
}

.content--fullheight .grid-container {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto; /* grid scrolls */
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0px 0px 10px rgba(133,133,133,1);
}
.grid-container {
    padding:10px;
    margin:10px;
}

/* ============================================================================
   SECTION 3 — DESKTOP TILE DASHBOARD
   Used on theCRM Home screen. Flexible grid of tile panels.
   ============================================================================ */

.tiles-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-content: flex-start !important;
    gap: 30px !important;
    width: 100%;
    margin: 0;
    padding: 26px;
    color: #65613C;
}

    /* Tile container */
    .tiles-grid .desktop-dock-panel {
        flex: 0 0 160px !important;
        height: 180px !important;
        padding: 10px;
        margin: 0 !important;
        border-top: 10px solid var(--tile-top, #000);
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 0 10px rgba(133,133,133,1);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

/* Tile header row */
.desktop-dock-panel-header {
    font-size: 1em;
    height: 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    min-width: 0;
}

.desktop-dock-panel-header-icon {
    font-family: "Font Awesome 7 Pro";
    font-weight: 900;
    font-size: 1.1em;
    margin-right: 6px;
    color: var(--tc-color-pk);
}

.desktop-dock-panel-header-heading {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The big tile number */
.desktop-count,
.desktop-count8,
.desktop-count9,
.desktop-count10,
.desktop-count11,
.desktop-count12,
.desktop-count13 {
    font-size: 1.6em;
    font-weight: 400;
    line-height: 1.2;
    margin: 6px 0;
    word-break: break-word;
}

/* Adjust when counts get long */
.desktop-count11 {
    font-size: 1.8em !important;
}

.desktop-count12 {
    font-size: 1.7em !important;
}

.desktop-count13 {
    font-size: 1.6em !important;
}

/* Search area inside a tile */
.desktop-dock-panel-searcharea {
    text-align: right;
    height: 32px;
    margin-bottom: 8px;
    font-size: 0.9em;
}

    .desktop-dock-panel-searcharea .control-button-desktop {
        background: transparent;
        border: none;
        color: #65613c !important;
        font-size: 0.9em;
    }

    .desktop-dock-panel-searcharea .control-input {
        background: transparent;
        color: transparent !important;
        border: none;
        font-size: 0.9em;
        transition: 0.3s;
    }

        .desktop-dock-panel-searcharea:hover .control-input,
        .desktop-dock-panel-searcharea .control-input:focus {
            background: white;
            border-color: #ced4da;
            color: #495057 !important;
        }

/* Buttons row inside tile */
.desktop-dock-panel-buttons {
    margin-top: auto;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ===================================================================
   SECTION 4 — Home Icons (Schedule, Calendar, Kanban)
   =================================================================== */

.desktop-schedule-icon::before,
.desktop-calendar-icon::before,
.desktop-kanban-icon::before {
    font-family: "Font Awesome 7 Pro";
    font-weight: 400;
    font-size: 16px;
    color: #a5295f;
}

.desktop-schedule-icon::before {
    content: "\f550";
}

.desktop-calendar-icon::before {
    content: "\f073";
}

.desktop-kanban-icon::before {
    content: "\f0db";
}

/* Simple padding helper */
.pad20 {
    padding: 20px !important;
}

/* ============================================================================
   SECTION 5 — DxPopup / DxWindow (Record Windows + Modal Dialogs)
   Ensures that DevExpress windows match theCRM design, with fixed header,
   scrollable body, centred horizontally, and strong pink accents.
   ============================================================================ */

/* Main popup container */
.dxbl-popup {
    background-color: white !important;
    max-height: 80vh;
    z-index: 20000 !important;
}
/*.dxbl-popup-cell {
    pointer-events: none !important;
}*/
/*.dxbl-window,
.dxbl-window * {
    pointer-events: auto;
}*/
.dxbl-window-body {
    /*padding: 10px!important;*/
}
/* Popup content padding */
.dxbl-popup .dxbl-modal-content {
    padding: 20px !important;
}

.dxbl-popup-overlay {
    /*background: transparent !important;*/
    display: none !important;
}

.dxbl-window-overlay {
    pointer-events: none !important;
}
/* Popup header strip */
.dxbl-popup .dxbl-popup-header
/*, .dxbl-popup .dxbl-popup-header .dxbl-modal-title*/ {
    background-color: white !important;
    padding: 0 !important;
    margin: 0 10px 10px 0;
    border-bottom: 2px solid var(--tc-color-pk) !important;
    font-weight: 500;
    font-size: 20px !important;
}

    /* Close button spacing */
    .dxbl-popup .dxbl-popup-header .dxbl-popup-header-button {
        margin-right: 4px;
    }

/* Ensure window body is flex so inner content scrolls properly */
.crm-window .dxbl-window-dialog,
.crm-window .dxbl-popup-resizable-content,
.crm-window .dxbl-window-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}
/* For some reason the newlinked window has padding */
.crm-window dxbl-popup-header,
.crm-window .dxbl-popup-header {
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 8px 8px 0 0 !important;
    background-color: red!important;
}
    .crm-window .dxbl-popup-header .crm-win-header,
    .crm-window dxbl-popup-header .crm-win-header {
        width: 100% !important;
    }
.crm-window.dxbl-window-dialog {
    border-radius: 8px !important;
    overflow: hidden !important;
}
/* The outer window structure */
.crm-window {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    /*border: 1px solid var(--crm-teal);*/
    background-color: #EEE;
}

.crm-win-scroll {
    flex: 1 1 auto;
    min-height: 0; /* CRITICAL – allows shrinking inside DxWindow */
    overflow-y: auto;
    overflow-x: hidden;
}

/* ============================================================================
   SECTION 6 — Phone Dialler / Twilio Call Bar
   Appears at the top of the app and inside record edit dialogs.
   ============================================================================ */

.phone-toggle {
    font-size: 1.5rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

/* Flip phone icon if needed */
.flip-x {
    transform: scaleX(-1);
    display: inline-block;
}

/* Phonebook icon */
.phonebook-icon::before {
    font-family: "Font Awesome 7 Pro";
    font-weight: 400;
    content: "\f2b9";
    font-size: 1.4rem;
    color: #d7d7d7;
}

/* Dial input (compact) */
.phone-input {
    background: transparent !important;
    color: #fff !important;
    padding: 0.1rem 0.4rem;
    height: 1.8rem;
    font-size: 0.85rem;
}

    .phone-input::placeholder {
        color: #ccc;
    }

/* Vertical spacing for entire phone row */
.phone-row {
    margin: .6rem 0;
}

/* Incoming call banner */
.call-banner {
    border-radius: .75rem;
    padding: .6rem .8rem;
}

/* Buttons that sit next to phone input */
.dial-btn {
    border-radius: 4px;
    height: 1.8rem;
    min-width: 2.2rem;
    padding: 0 .5rem;
    line-height: 1;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

/* ============================================================================
   SECTION 7 — Record Window Layout
   Controls the internal structure of theCRM’s new Blazor record windows:
   header, primary panel, tabs panel, scroll behaviour, spacing, etc.
   ============================================================================ */

/* Window shell (nav + content area) */
.crm-shell {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}

/* Main content area beside left nav */
.crm-main {
    flex: 1 1 auto;
    min-height: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    padding: 10px; /* outer margin from nav */
}

/* Window header strip */
.crm-win-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    background-color: var(--crm-teal);
    color: #fff;
    padding: .4rem .6rem;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom: 1px solid var(--tc-color-ba);
    border-top: 2px solid var(--tc-color-ba);
}

.crm-win-title {
    font-weight: 400;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-win-actions {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    gap: 0;
    color: var(--tc-color-ps);
}

/* Icon-only header buttons */
.crm-btn-icon.dxbl-btn {
    background: transparent;
    border: 0;
    min-width: 2rem;
    min-height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .35rem;
    border-radius: .375rem;
}

    .crm-btn-icon.dxbl-btn:hover {
        background: rgba(255,255,255,.08);
        color: #ffd761;
    }

/* Body of window (scrollable) */
.crm-win-body {
    flex: 1 1 auto;
    background: #FAFAFA;
    overflow: auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Record window inner layout */
.crm-record-window {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0px;
}



/* Lower tabs panel */

    /* Tabs stretch and content scrolls */
    .crm-details > .dxbl-tabs {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .crm-details .dxbl-tabs-content-panel {
        flex: 1 1 auto;
        overflow: auto;
        min-height: 0;
    }

/* ============================================================================
   SECTION 8 — Global Scrollbar Theme
   Applies consistent thin scrollbars everywhere (Chrome, Edge, Safari, Firefox).
   ============================================================================ */

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(186,218,85,0.45) transparent;
}

    /* Chrome / Edge / Safari */
    *::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    *::-webkit-scrollbar-thumb {
        background-color: rgba(186,218,85,0.45);
        border-radius: 4px;
        transition: background-color 0.3s, box-shadow 0.3s;
    }

        *::-webkit-scrollbar-thumb:hover {
            background-color: rgba(186,218,85,0.75);
            box-shadow: 0 0 4px rgba(186,218,85,0.4);
        }

    *::-webkit-scrollbar-track {
        background: rgba(240,240,240,0.05);
    }

/* Dark mode variants */
@media (prefers-color-scheme: dark) {
    * {
        scrollbar-color: rgba(186,218,85,0.65) rgba(255,255,255,0.05);
    }

        *::-webkit-scrollbar-thumb {
            background-color: rgba(186,218,85,0.65);
        }

            *::-webkit-scrollbar-thumb:hover {
                background-color: rgba(186,218,85,0.85);
                box-shadow: 0 0 4px rgba(186,218,85,0.6);
            }

        *::-webkit-scrollbar-track {
            background: rgba(30,30,30,0.25);
        }
}

/* ============================================================================
   SECTION 9 — DxGrid Global Theme (Header, Body, Toolbar)
   Clean, borderless CRM grid style used across all object lists.
   ============================================================================ */

.dxbl-grid {
    border: none !important;
    box-shadow: none !important;
}

/* Remove header + toolbar chrome line */
.dxbl-grid-toolbar-container,
.dxbl-grid-top-panel,
.dxbl-grid-header-row {
    border-bottom: none !important;
    color: var(--tc-color-st);
}

/* Header row height + white BG */
.dxbl-grid .dxbl-grid-header-row {
    background-color: white;
    height: 32px;
}

/* Remove header action borders */
.dxbl-grid .dxbl-grid-header .dxbl-grid-action {
    border: none !important;
}

/* Grid body font size */
.dxbl-grid * {
    --dxbl-grid-font-size: 0.92rem !important;
}

/* Remove internal borders */
.dxbl-grid .dxbl-grid-table td,
.dxbl-grid .dxbl-grid-table th {
    border: none !important;
}

/* Add subtle row separators */
.dxbl-grid .dxbl-grid-table tr td {
    border-bottom: 1px solid #e5e5e5 !important;
}

/* ============================================================================
   SECTION 10 — DxGrid Search Bar, Group Panel & Misc
   Makes search bar full-width, improves placeholder, aligns spacing.
   ============================================================================ */

/* Stretch search box across grid width */
.dxbl-grid-search-box-container,
.dxbl-grid-group-panel-container {
    display: flex;
    flex: 1 1 100%;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 0 6px 0 !important;
    box-sizing: border-box;
}

    /* Inner search input */
    .dxbl-grid-search-box-container .dxbl-text-edit-input,
    .dxbl-text {
        width: 100% !important;
        font-size: 1.1em;
        padding: 6px;
        color: rgb(33,37,41);
    }

/* Group panel styling */
.dxbl-grid-group-panel-container {
    align-items: center;
    padding: 6px 10px;
    margin-top: 4px;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    background-color: #f8f9fa;
}

    /* Group panel placeholder look */
    .dxbl-grid-group-panel-container .dxbl-text {
        font-style: italic;
        color: #6c757d;
        font-size: 1rem;
        margin: 0 !important;
    }

/* Clamp text inside cells to max 2 lines */
.crm-cell-2line {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    line-height: 1.35;
    max-height: 3.3em;
    min-height: 1.6em;
}

.crm-cell-2line a {
    color: inherit;
    text-decoration: none;
}
.grid-title{
    font-size:1.3em;
    font-weight: 500;
    color:var(--crm-teal);
}
.grid-title-summary {
    color: var(--tc-color-pk);
    font-size: .9rem;
}
.grid-title-icon {
    color: var(--tc-color-pk);
    margin-right:4px;
}
/* ============================================================================
   SECTION 11 — DxGrid Editing Styles
   Makes edit row stand out slightly, aligns inputs.
   ============================================================================ */
/* Edit row highlight */
.dxbl-grid-edit-row {
    background-color: white;
    box-shadow: 0px 0px 10px rgba(133,133,133,1);
    height: 40px;
}

.data-edit-cell {
    border-color: white !important;
}

/* Edit row textboxes */
.crm-grid-editing .dxbl-text-edit-input {
    border: 1px solid rgb(229,229,229);
    padding: 5px;
    width: 100% !important;
}

/* ============================================================================
   SECTION 12 — Funnel Icon Override (Replace built-in SVG)
   Makes filter icon match theCRM styling + Pink active state.
   ============================================================================ */

.dxbl-grid-filter-menu-funnel-btn svg {
    display: none !important;
}

.dxbl-grid-filter-menu-funnel-btn::before {
    font-family: "Font Awesome 7 Pro";
    font-weight: 400;
    content: "\f1de"; /* sliders-h */
    font-size: 14px;
    line-height: 1;
    color: var(--tc-color-ba);
}

.dxbl-grid-filter-menu-funnel-btn.dxbl-grid-filter-menu-funnel-btn-active::before {
    color: var(--tc-color-pk);
}

.dxbl-grid-header-cell-filtered
.dxbl-grid-filter-menu-funnel-btn
.dxbl-grid-filter-menu-funnel-btn-filled::before {
    color: var(--tc-color-pk);
}

/* strongest selector */
.dxbl-grid-filter-menu-funnel-btn-filled::before {
    color: var(--tc-color-pk) !important;
}


/* ============================================================================
   SECTION 13 — Header Icons, Buttons, Links
   Styling used in record windows, toolbar icons, pink accents, etc.
   ============================================================================ */

/* Generic icon button inside record window header */
.crm-btn-icon.dxbl-btn {
    background: none;
    border: none;
    padding: .25rem;
    font-size: 1.2rem; /* controls icon size */
    color: #fff;
}

    .crm-btn-icon.dxbl-btn:hover {
        color: #ffc107; /* subtle yellow hover */
    }

/* Lime text utility (used for top-right header items) */
.lime-text {
    color: var(--tc-color-ba) !important;
    text-decoration: none !important;
}

.top-right {
    display: flex;
    justify-content: end;
    align-items: center;
    padding-right: 3px;
    font-size: 1.2em;
}

/* Hide Blazor error UI */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #f2dede;
    color: #a94442;
    padding: 0.6rem 1.25rem;
    box-shadow: 0 -1px 2px rgba(0,0,0,0.2);
    z-index: 1000;
}

    #blazor-error-ui .reload,
    #blazor-error-ui .dismiss {
        cursor: pointer;
        text-decoration: underline;
    }

/* Pink toolbar icons */
.crm-pink,
.crm-pink .dxbl-icon,
.crm-pink i,
.crm-pink .dxbl-text {
    color: var(--tc-color-ba) !important;
    font-size: 1.1em;
}

.crm-pink-active {
    color: var(--tc-color-pk);
    transition: color 0.25s ease;
    font-size: 1.1em;
}

.crm-pink-cell {
    color: var(--tc-color-pk) !important;
}

.toolbar-button {
    color:var(--crm-teal);
    font-size: 1.0em;
}

/* ============================================================================
   SECTION 14 — CRM Window Manager
   Minimised window bar, floating manager toolbar, window centering.
   ============================================================================ */

/* Container element that hosts windows (right side of CRM) */
.rightcontent {
    position: relative;
    flex: 1 1 auto;
    overflow: auto;
    min-height: 0;
}


/* Floating toolbar showing window count */
.crm-windowmanager-toolbar {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 20000;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(16, 60, 82, 0.85);
    border: 1px solid var(--tc-color-ba);
    border-radius: 10px;
    padding: 6px 10px;
    backdrop-filter: blur(4px);
    box-shadow: 0 3px 12px rgba(0,0,0,.25);
}

.crm-windowmanager-count {
    margin-left: 6px;
    font-size: 0.85rem;
    color: var(--tc-color-ba);
}

/* Minimized windows bar (bottom-left stack) */
.crm-minimized-bar {
    position: fixed;
    bottom: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    z-index: 99999;
}

.crm-minimized-window {
    background-color: var(--crm-teal);
    color: white;
    border: 1px solid var(--tc-color-ba);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

    .crm-minimized-window:hover {
        background-color: var(--tc-color-pk);
        color: #fff;
    }

/* ============================================================================
   SECTION 15 — PDF Viewer & Quote Actions
   Ensures viewer fills window and quote actions remain visible.
   ============================================================================ */

.pdf-viewerwrapper {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-top: 10px !important;
}

.pdf-viewer {
    flex: 1 1 auto;
    width: 100%;
    height: 100% !important;
    min-height: 0;
    display: flex;
    margin-top: 10px;
}

/* Quote accept/reject buttons area */
.quote-actions {
    flex-shrink: 0;
    text-align: center;
}

/* ============================================================================
   SECTION 16 — Utility Classes & Field Separators
   Helpful small classes used across theCRM.
   ============================================================================ */

/* General padding helper */
.pad20 {
    padding: 20px !important;
}

/* Fieldset separator label (e.g., “Section Name”) */
.control-caption-separator {
    display: block;
    width: 100%;
    padding-bottom: 4px;
    margin-bottom: 6px;
    font-weight: 600;
    color: inherit;
}
.control-caption {
    color: var(--crm-teal)!important;
    font-size: 0.9em!important;
}
/* First field on a form gets heavier label */
.first-field label {
    font-weight: 600;
}

/* Make inputs stretch full width */
.control-control .dxbl-textedit,
.control-control .dxbl-memo {
    width: 100%;
}

/* Placeholder for sortable form layout */
.sortable-field {
}

/* Phonebook, call icons etc. */
.phone-toggle {
    font-size: 1.5rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.flip-x {
    transform: scaleX(-1);
}

.phonebook-icon::before {
    font-family: "Font Awesome 7 Pro";
    font-weight: 400;
    font-size: 1.4rem;
    color: #d7d7d7;
    content: "\f2b9"; /* address-book */
}

/* Dial input compact style */
.phone-input {
    background-color: transparent !important;
    color: #fff !important;
    padding: 0.1rem 0.4rem;
    height: 1.8rem;
    font-size: 0.85rem;
}

    .phone-input::placeholder {
        color: #ccc;
        opacity: 1;
    }

.phone-row {
    margin-top: 0.6rem;
    margin-bottom: 0.6rem;
}

.call-banner {
    border-radius: .75rem;
    padding: .6rem .8rem;
}

.dial-btn {
    border-radius: 4px;
    height: 1.8rem;
    min-width: 2.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 .5rem;
    line-height: 1;
}

/* ============================================================================
   SECTION 17 — Button-Edit (URL Button) Styling
   Ensures the right-side launch button aligns exactly with DevExpress input.
   ============================================================================ */
.control-control {
    margin:0;
   /* background-color:lightgoldenrodyellow;*/
}
/* Outer button inside .input-group */
.control-control .input-group > .btn.btn-outline-secondary {
    height: 28px !important;
    min-height: 28px !important;
    width: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0 3px 3px 0 !important;
    /* DevExpress' weird fractional border */
    border-width: 0.571429px !important;
    border-left-width: 0 !important;
    border-color: #ced4da !important;
}

    /* Icon inside the button */
    .control-control .input-group > .btn.btn-outline-secondary i {
        font-size: 14px !important;
        padding: 0 !important;
        line-height: 1 !important;
    }

/* ============================================================================
   SECTION 18 — Base Public Form Styling (NO .crm-public-form prefix)
   These are the default styles for public forms AND CRM forms unless overridden.
   Public override sheet will re-add .crm-public-form to scope it.
   ============================================================================ */

/* Reduce turnstile widget */
.turnstile-inline {
    display: inline-block;
    transform: scale(0.7);
    transform-origin: left center;
}

/* Root background + text defaults */
body, html {
    background-color: #fff !important;
}

/* Remove reconnect UI (Blazor auto reconnect) */
.blazor-error-ui,
.components-reconnect-modal,
.components-reconnect-show,
#components-reconnect-modal,
#components-reconnect-modal.show,
#components-reconnect-modal-overlay {
    display: none !important;
    visibility: hidden !important;
    background: transparent !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Form wrapper base appearance */
.crm-form-complete,
.crm-form-loading {
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    color: #444;
    background-color: #fff !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 15px !important;
    box-sizing: border-box;
}

/* Containers */
.page .container,
.page .container-fluid {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Remove DevExpress wrapper chrome */
.dxbl-text-edit,
.dxbl-date-edit,
.dxbl-spin-edit,
.dxbl-combobox,
.dxbl-memo {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Core DevExpress input styling */
.dxbl-input,
.dxbl-list-editor-input,
.dxbl-date-edit-input,
.dxbl-textarea {
    width: 100% !important;
    border: 1px solid #ccc !important;
    border-radius: 0 !important;
    padding: 6px 10px !important;
    font-size: 16px !important;
    height: 42px !important;
    background-color: #fff !important;
    color: #444 !important;
    box-shadow: none !important;
}

/* Dropdown specific */
.dxbl-combobox .dxbl-list-editor-input {
    border: 1px solid #ccc !important;
    border-radius: 0 !important;
    background-color: #fff !important;
    height: 42px !important;
}

/* Memo fields */
textarea.dxbl-input,
.dxbl-memo textarea {
    resize: vertical;
    line-height: 1.4;
    min-height: 80px !important;
}

/* Labels */
label {
    text-transform: none !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #555 !important;
    margin-bottom: 4px !important;
}

    /* Required marker */
    label.required::after {
        content: " *";
        color: #d9534f;
        font-weight: 600;
    }

/* Required field highlighting */
.dxbl-input.required:invalid,
input.required:invalid,
textarea.required:invalid {
    border-color: #d9534f !important;
}

/* Field spacing */
.row.g-3 > div {
    margin-bottom: 14px;
}

/* Submit button */
.crm-submit {
    background-color: #b93b63;
    color: #fff;
    border: none;
    padding: 10px 28px;
    border-radius: 3px;
    font-size: 16px;
    font-weight: 500;
    transition: background-color 0.2s ease-in-out;
}

    .crm-submit:hover {
        background-color: #a22e54;
    }

/* Focus behaviour */
.dxbl-input:focus,
.dxbl-list-editor-input:focus,
textarea.dxbl-input:focus {
    border-color: #b93b63 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(185, 59, 99, 0.15) !important;
}

/* Fix DevExpress editor containers */
.dxbl-editor-container,
.dxbl-list-editor-input-container {
    min-height: unset !important;
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Completion message */
.crm-form-complete {
    text-align: center;
    padding: 60px 20px;
    font-size: 18px;
    font-weight: 500;
    color: #333;
}

/* Responsive column width enforcement */
.col-md-6 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
}

.col-md-4 {
    flex: 0 0 33.3333% !important;
    max-width: 33.3333% !important;
}

.col-md-3 {
    flex: 0 0 25% !important;
    max-width: 25% !important;
}

.col-md-12 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

.row {
    flex-wrap: wrap !important;
}



/* ============================================================================
   Sub tabs
   ============================================================================ */
/* inactive tab */
.crm-tabs {
    background-color:white;
}
.crm-tab-list {
    margin: 10px;
}
.crm-tabs .dxbl-tabs-item:not(.dxbl-active) {
    color: #666;
    font-weight: 500;
    padding: 10px 16px;
    border-bottom: 2px solid transparent;
}

/* active tab */
.crm-tabs .dxbl-tabs-item.dxbl-active {
    color: #0d6efd !important;
    font-weight: 600;
    border-bottom: 2px solid #0d6efd;
}

    /* ensure active tab text inherits color */
    .crm-tabs .dxbl-tabs-item.dxbl-active .dxbl-tabs-text {
        color: inherit !important;
    }

/* optional bottom border for tab row */
.crm-tabs .dxbl-tabs-nav {
    border-bottom: none;
}

.crm-upload-wrapper input[type=file] {
    margin-bottom: 10px;
}

.crm-upload-list {
    list-style: none;
    padding-left: 0;
}

    .crm-upload-list li {
        margin-bottom: 4px;
    }

    .crm-upload-list a {
        text-decoration: none;
    }

/* 09/03/2026 - Loading bar */
.crm-progress-bar {
    position: fixed;
    top: 53px; /* height of your header */
    left: 0;
    height: 3px;
    width: 30%;
    background: var(--tc-color-ba);
    z-index: 9999;
    animation: crm-progress 1.2s ease-in-out infinite;
}

@keyframes crm-progress {
    0% {
        left: -30%;
        width: 30%;
    }

    50% {
        width: 60%;
    }

    100% {
        left: 100%;
        width: 30%;
    }
}


/*.dxbl-popup-cell {background-color: red;}*/
.dxbl-popup-cell {
    pointer-events: none !important;
}
/* re-enable interaction for DevExpress popups (AI window) */
.dxbl-popup {
    pointer-events: auto !important;
}

    .dxbl-popup * {
        pointer-events: auto !important;
    }

/* Tabl List Stuff */
.tabCountBadge {
    color: #C71A61;
    font-weight: 600;
    /*margin-left: 4px;*/
    font-size: 0.7em;
    vertical-align: super;
}

.crm-primary {
    border-radius: 8px;
    box-shadow: 0 0 6px rgba(0,0,0,0.3);
    margin: 10px 10px 0 10px;
    padding: 25px 10px 0 10px;
    background-color: white;
    flex: 0 0 auto;
    overflow: visible;
}
.crm-details {
    border-radius: 8px;
    box-shadow: 0 0 6px rgba(0,0,0,0.3);
    margin: 5px 10px 10px 10px;
    padding: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
    .crm-details .dxbl-tabs {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
        scrollbar-gutter: stable;
        padding-bottom: 2px;
    }

.crm-details .dxbl-tabs-content {
    flex: 1 1 auto;
    overflow: auto;
    min-height: 0;
}
.crm-tab {
    border-bottom: 3px solid var(--tc-color-ba);
    padding-bottom: 4px;
}
.crm-tab-fields {padding:25px 10px 0 10px!important}

.dxbl-tabs .dxbl-tab {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* remove DevExpress visual styling */
dxbl-tab-item.dxbl-tabs-item {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
dxbl-tab-item.crm-tab {
    padding: 6px 10px !important;
    margin-right: 6px;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: 1.05em;
}

/* base tab */
.crm-tabs dxbl-tab-item.crm-tab {
    position: relative;
}
/* hover underline */
.crm-tabs dxbl-tab-item.crm-tab:hover::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 4px;
    background: var(--tc-color-pk);
}
.crm-tabs dxbl-tab-item.crm-tab {
    color: var(--tc-color-border) !important;
}
    .crm-tabs dxbl-tab-item.crm-tab.dxbl-active {
        color: var(--crm-teal) !important;
    }

/* active underline */
.crm-tabs dxbl-tab-item.crm-tab.dxbl-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 4px;
    background: var(--crm-teal);
}
    .crm-tabs dxbl-tab-item.crm-tab .crm-tab-header {
        font-weight: 500;
        font-size:1.05em;
    }

    /* fake bold without changing layout */
    .crm-tabs dxbl-tab-item.crm-tab.dxbl-active .crm-tab-header {
        text-shadow: 0 0 0 currentColor, 0.02px 0 currentColor;
    }

    /* MasterNav */
.body-row {
    overflow: hidden; /* add this */
}

.rightcontentwrapper {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: calc(100vh - var(--header-h)); /* constrain total height */
}

.masternavwrapper {
    flex: 0 0 auto;
    box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.15);
    z-index: 1;
    background-color: white;
}

.rightcontent {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    background-color: #EEE;
}

.master-object-menu-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 10px;

    border-bottom: 1px solid #e0e0e0;
    justify-content: flex-end;
}

/* Tiles on home page */
.tiles-grid {
    display: grid;
    grid-template-columns: repeat(8, 180px);
    grid-auto-rows: 200px;
    gap: 12px;
    align-content: start;
}

/* Backdrop */
.quicksearch-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.45);
    z-index: 1050;
}

/* Modal container */
.quicksearch-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(500px, 90vw);
    max-height: 80vh;
    border-radius: 12px;
    z-index: 1060;
    overflow: hidden;
    cursor: default;
    user-select: none;
}

.quicksearch-header {
    cursor: move;
    user-select: none;
}

/* ✅ Only this part scrolls */
.quicksearch-results-area {
    max-height: 65vh;
    overflow-y: auto;
    padding: 0 8px 8px 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}

.quicksearch-item {
    cursor: pointer;
    transition: background-color 0.15s;
}

    .quicksearch-item:hover {
        background-color: #f8f9fa;
    }

.quicksearch-color {
    width: 5px;
    height: 40px;
    border-radius: 3px;
}

/* ============================================================================
   Object Left Nav
   ============================================================================ */

/* Wrapper */
.crm-record-window {
    position: relative;
    height: 100%;
    overflow: hidden;
}

/* LEFT NAV (hidden by default) */
.crm-left-nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 260px;
    height: 100%;
    background-image: linear-gradient(to bottom, #145775 0%, #103c52 50%, #0a2634 100% );
    background-repeat: no-repeat;
    background-size: cover;
    color: #ddd;
    z-index: 1000;
    transform: translateX(-260px); /* off screen */
    transition: transform 0.25s ease;
    display: flex;
    flex-direction: column;
    min-height: 0; /* CRITICAL for flex scrolling */
    overflow-x: hidden;
}

/* OPEN */
.crm-left-nav.open {
    transform: translateX(0);
}

/* PINNED */
.crm-left-nav.pinned {
    transform: translateX(0);
}

/* PUSH CONTENT WHEN PINNED */
.crm-left-nav.pinned ~ .crm-right {
    margin-left: 260px;
}

/* HEADER (pin icon area) */
.crm-left-nav-header {
    display: flex;
    justify-content: flex-end;
    padding: 8px;
    flex: 0 0 auto;
}

/* PIN BUTTON */
.pin-btn {
    background: none;
    border: none;
    color: #ccc;
    cursor: pointer;
}

/* ============================================================================
   SCROLL + INNER LAYOUT (THIS WAS THE MISSING BIT)
   ============================================================================ */

/* container inside nav */
.crm-left-nav .nav-scrollable {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* sidebar wrapper */
.crm-left-nav .sidebar {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    background: transparent; /* inherit dark bg */
}

/* actual nav */
.crm-left-nav .nav {
    flex: 1 1 auto;
}

/* ============================================================================
   NAV LINK STYLING (MATCH MAIN NAV)
   ============================================================================ */

.crm-left-nav .nav-link {
    color: #ccc;
    font-size: 0.9rem;
}

    .crm-left-nav .nav-link:hover {
        background-color: rgba(255,255,255,0.1);
        color: white;
    }

/* icons */
.crm-left-nav .nav-link i {
    color: var(--tc-color-ba);
    margin-right: 6px;
}

/* optional: collapsible headers slightly stronger */
.crm-left-nav .collapsible-header {
    font-weight: 400;
    font-size: .9rem;
}
.rotate-180 {
    transform: rotate(180deg);
    transition: transform 0.2s ease;
}

.object-nav-left-button {
    color: var(--tc-color-ba);
}
    .object-nav-left-button:hover {
        color: var(--tc-color-pk);
    }
.object-nav-left-button {
    border: none;
    background-color: white !important;
    padding:1px;
}
.object-nav-left-buttons {
    margin-left: 10px;
}

.crm-avatar {
    width:40px;
    border-radius:20px;
}
.crm-display-name {
    font-size:1.6em;
}

.manage-layout {
    margin:auto;
    width:70%;
}