/* CodakCRM — Custom Brand Theme & Stable Design System */
@import url('./custom-ui-animations.css');

:root {
    --codak-primary: #005a70;
    --codak-primary-hover: #004557;
    --codak-accent: #00a4c8;
    --codak-accent-glow: rgba(0, 164, 200, 0.35);
    --codak-bg-light: #f4f7f9;
    --codak-card-bg: #ffffff;
    --codak-border-radius: 14px;
    --codak-card-shadow: 0 8px 24px -4px rgba(0, 45, 60, 0.06);
}

/* ==========================================================================
   1. GLOBAL FORM INPUTS, SELECTS, & TEXTAREAS STYLING
   ========================================================================== */

.form-control,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
select,
textarea,
.select2-container .select2-choice {
    background-color: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 13px;
    color: #0f172a;
    font-family: var(--codak-font-sans, sans-serif);
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
    background-color: #ffffff;
    border-color: #00a4c8;
    box-shadow: 0 0 0 3px rgba(0, 164, 200, 0.18);
    outline: none;
}

.control-label,
.field-label,
label,
.form-group>label {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

span.required,
.required-sign,
label.required::after {
    color: #e11d48;
    font-weight: 800;
    margin-left: 4px;
}

/* ==========================================================================
   2. INPUT GROUP CONTROLS FIX
   ========================================================================== */

.input-group {
    position: relative;
}

.input-group>.form-control:first-child,
.input-group>input:first-child,
.input-group>select:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group-btn>.btn:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* ==========================================================================
   3. STACKING CONTEXT ARCHITECTURE & DROPDOWN ENGINE
   ========================================================================== */

/*
   CSS STACKING CONTEXT — COMPLETE TRIGGER LIST
   Any of the following on an ANCESTOR of a .dropdown-menu will trap the
   menu inside that context regardless of z-index value:

   transform: (anything other than none)        ← most common culprit
   filter: (anything other than none)
   backdrop-filter: (anything other than none)
   perspective: (any value)
   clip-path: (any value)
   mask / mask-image: (any value)
   mix-blend-mode: (anything other than normal)
   opacity: (< 1)                               ← easy to forget
   isolation: isolate
   contain: paint | layout | content | strict | size
   will-change: (any of the above properties)
   position: fixed                              ← always creates one
   position: sticky                             ← creates one
   z-index ≠ auto on ANY positioned element    ← most subtle & common!

   The last one is why blanket z-index:1 on .record .panel is dangerous:
   every panel becomes its own stacking context, so a dropdown in panel N
   gets painted below panel N+1 in the DOM.

   SAFE z-index LADDER — inverted design (content small, shell large):
   Content lives at 10–30 so the navbar (1035) always sits above it.
   Modals stay above the navbar at 1065+.

   --z-content:         10   (regular page content baseline)
   --z-page-header:     20   (page-header action shell — above content, below navbar)
   --z-panel-open:      25   (panel with an active menu inside)
   --z-dropdown-open:   30   (the open .btn-group — above page-header)
   --z-dropdown-menu: 1000   (floating menu — above navbar collapse but below modals)
   --z-navbar:        1035   (navbar shell — must beat all page content)
   --z-modal-backdrop:1065   (above navbar, below modal)
   --z-modal:         1070
   --z-popover:       1080
   --z-tooltip:       1090

   Why this works:
   • .page-header was 1050 → above EspoCRM's navbar (~1030) → admin menu was trapped
     under the page-header stacking context.
   • Now page-header is 20, navbar is 1035 → navbar always on top of content.
   • .dropdown-menu is 1000 → renders inside the navbar stacking context correctly,
     and above any page-content stacking context (max 30).
   • Modals at 1065 still cover the navbar (1035). ✓
*/

:root {
    --z-content: 10;
    --z-page-header: 20;
    --z-panel-open: 25;
    --z-dropdown-open: 1015;
    --z-dropdown-menu: 1020;
    --z-navbar: 1035;
    --z-modal-backdrop: 1065;
    --z-modal: 1070;
    --z-popover: 1080;
    --z-tooltip: 1090;
}

/* Navbar shell — explicitly above all page content */
#navbar,
.navbar,
.navbar-fixed-top,
.navbar-static-top {
    position: relative;
    z-index: var(--z-navbar) !important;
}

/* FIX: navbar containers overflow & hide navbar scrollbars */
#navbar ::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

#navbar,
#navbar .navbar-body,
#navbar .navbar-left-container,
#navbar .tabs,
#navbar .tabs>li.more {
    overflow: visible !important;
}

/* Ensure navbar dropdown menu is displayed properly when opened */
#navbar .tabs>li.more.open>.more-dropdown-menu,
#navbar .tabs>li.open>.dropdown-menu,
#navbar .tabs>li.open>.more-dropdown-menu,
#navbar .more-dropdown-menu.more-expanded {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1050 !important;
}

#navbar .more-dropdown-menu {
    min-width: 190px !important;
    max-height: calc(100vh - 40px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 14px !important;
    box-shadow: 0 14px 40px -4px rgba(0, 45, 60, 0.22), 0 4px 14px rgba(0, 0, 0, 0.08) !important;
    padding: 6px !important;
    z-index: 1060 !important;
}

/* Custom scrollbar for sidebar dropdown */
#navbar .more-dropdown-menu::-webkit-scrollbar {
    width: 5px !important;
}

#navbar .more-dropdown-menu::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 4px !important;
}

/* Align sidebar bottom dropdown menu upward so it never clips past the bottom of the screen */
body.minimized #navbar .tabs>li.more>.more-dropdown-menu,
body[data-navbar="side"] #navbar .tabs>li.more>.more-dropdown-menu,
#navbar .tabs>li.more>.more-dropdown-menu {
    left: 100% !important;
    top: auto !important;
    bottom: 10px !important;
    margin-left: 6px !important;
}

#navbar .more-dropdown-menu .full-label,
#navbar .more-dropdown-menu .short-label,
#navbar .more-dropdown-menu .short-label-text {
    display: inline-block !important;
    color: #1e293b !important;
    visibility: visible !important;
}

#navbar .more-dropdown-menu>li>a {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 14px !important;
    color: #1e293b !important;
    white-space: nowrap !important;
}

/* Page-header shells — relative flow on Record Detail & Edit views */
body:has(.detail-button-container) .page-header,
#main:has(.detail-button-container) .page-header,
.detail>.page-header,
.edit>.page-header {
    position: relative !important;
    z-index: 10 !important;
    background: transparent !important;
    background-color: transparent !important;
    padding: 12px 0 6px 0 !important;
    margin-bottom: 10px !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}

body:has(.detail-button-container) .page-header h2,
body:has(.detail-button-container) .page-header h3,
body:has(.detail-button-container) .page-header .header-title {
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}

.page-header-column-2,
.header-buttons,
.action-buttons-container {
    position: relative !important;
    z-index: 40 !important;
}

body:has(.detail-button-container) .page-header:has(.open),
#main:has(.detail-button-container) .page-header:has(.open),
.page-header:has(.open),
.page-header-column-2:has(.open),
.header-buttons:has(.open),
.action-buttons-container:has(.open) {
    z-index: 1010 !important;
}

/* Record panels — position:relative for stacking, NO explicit z-index.
   A blanket z-index here would make every panel its own stacking context,
   causing dropdowns in panel N to be buried under panel N+1 in the DOM. */
.record,
.detail .record,
.edit .record,
.record .panel {
    position: relative !important;
    /* z-index intentionally omitted — see ladder note above */
}

/* Elevate a panel only when its content is actually active */
.record .panel:focus-within {
    z-index: var(--z-panel-open) !important;
}

/* :has() progressive enhancement — Chromium 105+ / Firefox 121+ */
.record .panel:has(.open) {
    z-index: var(--z-panel-open) !important;
}

/* Open .btn-group — 30, above page-header (20), safely below navbar (1035)
   so clicking a menu item that opens a modal doesn't leave the menu on top */
.btn-group.open,
.dropdown.open {
    position: relative !important;
    z-index: var(--z-dropdown-open) !important;
}

/* Form cells with active pickers */
.field.open,
.cell.open,
.input-group.open,
.form-group.open,
.field-control.open,
.cell:focus-within,
.field:focus-within,
.form-group:focus-within {
    position: relative !important;
    z-index: var(--z-dropdown-open) !important;
}

/* Modal z-index ladder — must beat navbar (1035) */
.modal-backdrop,
.modal-backdrop.in {
    z-index: var(--z-modal-backdrop) !important;
}

.modal {
    z-index: var(--z-modal) !important;
}

.popover {
    z-index: var(--z-popover) !important;
}

.tooltip {
    z-index: var(--z-tooltip) !important;
}

/* Search container baseline */
.search-container {
    margin-bottom: 18px;
    position: relative;
}

.search-container .input-group {
    position: relative;
}

/* ==========================================================================
   UNIVERSAL DROPDOWN CANVAS
   z-index: 1000 — above all page content (max 30) and navbar collapse layers,
   but still within the navbar stacking context so it renders correctly there.
   Do NOT override transform/filter/will-change — would break Popper.js and
   EspoCRM's JS-based repositioning near screen edges.
   ========================================================================== */
.dropdown-menu,
.search-container .dropdown-menu,
.cell-buttons .dropdown-menu,
.selectize-dropdown,
.bootstrap-select .dropdown-menu,
.typeahead.dropdown-menu,
.autocomplete-dropdown,
.header-buttons .dropdown-menu,
.page-header-column-2 .dropdown-menu,
.detail-button-container .dropdown-menu,
.navbar-right .dropdown-menu {
    border-radius: 12px !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    box-shadow: 0 14px 36px -4px rgba(0, 45, 60, 0.22), 0 4px 14px rgba(0, 0, 0, 0.08) !important;
    padding: 6px !important;
    z-index: var(--z-dropdown-menu) !important;
    position: absolute !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* transform / filter / will-change intentionally NOT overridden here */
}

/* Dropdown Menu Items Styling */
.dropdown-menu>li>a,
.search-container .dropdown-menu>li>a,
.cell-buttons .dropdown-menu>li>a,
.selectize-dropdown .option,
.dropdown-item {
    border-radius: 8px !important;
    padding: 8px 14px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    font-size: 13px !important;
    display: block !important;
    background-color: transparent !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus,
.search-container .dropdown-menu>li>a:hover,
.cell-buttons .dropdown-menu>li>a:hover,
.selectize-dropdown .option.active,
.dropdown-item:hover {
    background-color: #f0f7f9 !important;
    color: #005a70 !important;
    text-decoration: none !important;
}

/* View Mode Switcher */
.display-mode-switcher,
.view-mode-switcher {
    border-radius: 10px;
    padding: 2px;
}

.display-mode-switcher .btn.active,
.view-mode-switcher .btn.active {
    background: #005a70 !important;
    color: #ffffff !important;
    border-radius: 6px;
}

/* ==========================================================================
   4. LIST HEADERS, PAGINATION, & DATA GRID (TABLES)
   ========================================================================== */

/* Top Action Toolbar — NO z-index here: would create a stacking context that
   traps .btn-group.open (z-index:30) below .btn-group.pagination (z-index:101),
   causing the dropdown to render behind the pagination pill. */
.list-buttons-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 8px 0 !important;
    margin-bottom: 12px !important;
    width: 100% !important;
    clear: both;
    position: relative !important;
}

/* Pagination Badge Container — Aligned to end, premium rounded capsule pill */
.list-buttons-container .pagination,
.btn-group.pagination {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 28px !important;
    padding: 4px 10px !important;
    box-shadow: 0 4px 14px -2px rgba(0, 45, 60, 0.08) !important;
    float: none !important;
    margin-left: auto !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
    position: relative !important;
}

/* ==========================================================================
   TOOLTIP & POPOVER STACKING
   z-index values are defined by the ladder vars in section 3:
   --z-tooltip: 1090 and --z-popover: 1080.
   The rules below are applied there. Only visual styling here.
   ========================================================================== */

.tooltip.in,
.tooltip.show,
.popover.in,
.popover.show {
    opacity: 1 !important;
}

/* Solid Opaque Dark Tooltip Box — Eliminates 0.9 opacity background text bleeding */
.tooltip-inner {
    background-color: #0f172a !important;
    background: #0f172a !important;
    color: #f8fafc !important;
    font-family: var(--codak-font-sans, 'Inter', sans-serif) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.2) !important;
    border: 1px solid #334155 !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
}

/* Tooltip Arrow Alignments */
.tooltip.top .tooltip-arrow,
.tooltip.top-left .tooltip-arrow,
.tooltip.top-right .tooltip-arrow {
    border-top-color: #0f172a !important;
}

.tooltip.bottom .tooltip-arrow,
.tooltip.bottom-left .tooltip-arrow,
.tooltip.bottom-right .tooltip-arrow {
    border-bottom-color: #0f172a !important;
}

.tooltip.left .tooltip-arrow {
    border-left-color: #0f172a !important;
}

.tooltip.right .tooltip-arrow {
    border-right-color: #0f172a !important;
}

/* Popover Opaque Box */
.popover {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 12px !important;
    box-shadow: 0 14px 36px -4px rgba(0, 45, 60, 0.22) !important;
    padding: 4px !important;
}

.popover-title {
    background-color: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    border-radius: 10px 10px 0 0 !important;
}

.popover-content {
    color: #334155 !important;
    font-size: 13px !important;
}

.btn-group.pagination .btn-group {
    float: none !important;
    display: inline-block !important;
}

.btn-group.pagination .pagination-btn-middle {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #005a70 !important;
    padding: 4px 12px !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    box-shadow: none !important;
    text-decoration: none !important;
    border-radius: 16px !important;
    transition: all 0.2s ease !important;
}

.btn-group.pagination .pagination-btn-middle:hover {
    color: #007c9b !important;
    background-color: #e0f2fe !important;
    border-color: #bae6fd !important;
}

.btn-group.pagination .pagination-btn {
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #005a70 !important;
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    font-size: 12px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 4px rgba(0, 45, 60, 0.04) !important;
}

.btn-group.pagination .pagination-btn:hover:not(.disabled) {
    background-color: #005a70 !important;
    color: #ffffff !important;
    border-color: #005a70 !important;
    box-shadow: 0 4px 12px rgba(0, 90, 112, 0.28) !important;
}

.btn-group.pagination .pagination-btn.disabled,
.btn-group.pagination .pagination-btn[disabled] {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    transform: none !important;
    background: #f1f5f9 !important;
    color: #94a3b8 !important;
    border-color: #e2e8f0 !important;
    box-shadow: none !important;
}

/* ==========================================================================
   4. UNPRECEDENTED FLOATING TABLE CARDS, HEADERS & DATA GRID
   ========================================================================== */

/* Table Outer Container */
div.list {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 24px !important;
}

/* Subpanel Tables Integration */
.subpanel div.list,
.panel div.list {
    border-color: transparent !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
}

/* Floating Table Card Structure */
div.list>table,
div.list>table.table {
    width: 100% !important;
    margin-bottom: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
    background: transparent !important;
}

/* Frosted Glass Table Header */
div.list>table thead th,
div.list>table thead td,
th.field-header-cell,
th.checkbox-cell {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
    color: #475569 !important;
    font-weight: 800 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    border: none !important;
    padding: 12px 18px !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

div.list>table thead tr th:first-child {
    border-top-left-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
}

div.list>table thead tr th:last-child {
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

/* Sort Header Alignment & Icon Spacing */
th.field-header-cell {
    position: relative;
}

th.field-header-cell a,
th.field-header-cell a.sort {
    color: #475569 !important;
    font-weight: 800 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: color 0.15s ease !important;
}

th.field-header-cell a:hover {
    color: #005a70 !important;
}

th.field-header-cell .fas,
th.field-header-cell .far,
th.field-header-cell .fa-chevron-down,
th.field-header-cell .fa-chevron-up {
    color: #00a4c8 !important;
    font-size: 11px !important;
    margin-left: 4px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    transition: transform 0.2s ease !important;
}

/* Floating Table Body Row Cards */
div.list>table tbody tr,
tr.list-row {
    background: #ffffff !important;
    box-shadow: 0 4px 14px -2px rgba(0, 45, 60, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    border-left: 4px solid #e2e8f0 !important;
    border-top: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    border-right: 1px solid #e2e8f0 !important;
}

div.list>table tbody tr td:first-child {
    border-top-left-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
}

div.list>table tbody tr td:last-child {
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

div.list>table tbody tr:hover,
tr.list-row:hover {
    background: linear-gradient(90deg, #f0f9ff 0%, #ffffff 100%) !important;
    transform: none !important;
    border-left: 4px solid #00a4c8 !important;
    border-top: 1px solid #7dd3fc !important;
    border-bottom: 1px solid #7dd3fc !important;
    border-right: 1px solid #7dd3fc !important;
    box-shadow: inset 3px 0 12px -2px rgba(0, 164, 200, 0.2), 0 4px 14px rgba(0, 164, 200, 0.08) !important;
}

div.list>table tbody td {
    padding: 14px 18px !important;
    font-size: 13px !important;
    color: #1e293b !important;
    border-bottom: none !important;
    vertical-align: middle !important;
}

div.list>table tbody tr:last-child td {
    border-bottom: none !important;
}

/* Smart Badges for Emails & Phones */
td.cell[data-name="email"] a,
td.cell[data-name="email"] {
    color: #0284c7 !important;
    font-weight: 600 !important;
}

td.cell[data-name="phone"] {
    font-family: var(--codak-font-sans, sans-serif) !important;
    color: #334155 !important;
    font-weight: 600 !important;
}

/* Checkbox Cells */
th.checkbox-cell,
td.cell-checkbox,
.select-all-container {
    width: 44px !important;
    text-align: center !important;
}

input[type="checkbox"].form-checkbox,
table input[type="checkbox"] {
    width: 17px !important;
    height: 17px !important;
    accent-color: #005a70 !important;
    cursor: pointer !important;
    border-radius: 4px !important;
    vertical-align: middle !important;
}

/* Entity Primary Name Links */
div.list>table tbody td.cell[data-name="name"] a,
div.list>table tbody td a.link,
div.list>table tbody td a[data-action="select"] {
    font-family: var(--codak-font-heading, sans-serif) !important;
    font-weight: 700 !important;
    color: #005a70 !important;
    text-decoration: none !important;
    transition: color 0.15s ease, transform 0.15s ease !important;
    display: inline-block !important;
}

div.list>table tbody td.cell[data-name="name"] a:hover,
div.list>table tbody td a.link:hover,
div.list>table tbody td a[data-action="select"]:hover {
    color: #00a4c8 !important;
    transform: translateX(3px);
}

/* Row Action Buttons & Dropdowns */
div.list>table tbody td.cell-buttons,
div.list>table tbody td .btn-group {
    white-space: nowrap !important;
}

div.list>table tbody td .btn-link,
div.list>table tbody td .btn-default.btn-sm {
    color: #64748b !important;
    border-radius: 6px !important;
    padding: 4px 8px !important;
    transition: all 0.15s ease !important;
}

div.list>table tbody td .btn-link:hover,
div.list>table tbody td .btn-default.btn-sm:hover {
    color: #005a70 !important;
    background-color: #e2e8f0 !important;
}

/* Styled Empty State */
.no-data {
    padding: 40px 20px !important;
    text-align: center !important;
    color: #64748b !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    background: #ffffff !important;
    border: 1px dashed #cbd5e1 !important;
    border-radius: 14px !important;
    margin: 20px 0 !important;
}

/* ==========================================================================
   5. STATUS BADGES
   ========================================================================== */

.cell[data-name="status"] .label,
.cell[data-name="stage"] .label,
.label-status,
.label-stage,
td.cell .label {
    padding: 4px 12px;
    border-radius: 16px;
    font-weight: 700;
    font-size: 11px;
}

.label-success,
.cell[data-name="status"] .label-success,
.cell[data-name="stage"] .label-success {
    background-color: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.label-info,
.label-default,
.cell[data-name="status"] .label-default,
.cell[data-name="stage"] .label-info {
    background-color: #e0f2fe;
    color: #0284c7;
    border: 1px solid #bae6fd;
}

.label-danger,
.cell[data-name="status"] .label-danger,
.cell[data-name="stage"] .label-danger {
    background-color: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.label-warning,
.cell[data-name="status"] .label-warning,
.cell[data-name="stage"] .label-warning {
    background-color: #fffbeb;
    color: #d97706;
    border: 1px solid #fde68a;
}

/* ==========================================================================
   6. CARDS, PANELS, & BUTTONS
   ========================================================================== */

.panel,
.panel-default,
.record .panel {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: var(--codak-border-radius);
    box-shadow: var(--codak-card-shadow);
    margin-bottom: 20px;
}

.panel-default>.panel-heading,
.record .panel-heading {
    background: #ffffff;
    border-bottom: 1px solid #edf2f7;
    padding: 12px 18px;
    font-family: var(--codak-font-heading, sans-serif);
    font-weight: 800;
    color: #005a70;
    font-size: 14px;
}

.btn-primary,
.btn-primary:focus,
.btn-primary:active {
    background-color: #005a70 !important;
    border-color: #005a70 !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
}

.btn-primary:hover {
    background-color: #004557 !important;
    border-color: #004557 !important;
}

.btn-default,
.btn-secondary {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   7. VIBRANT COLORFUL SIDEBAR ICONS
   ========================================================================== */

#navbar .tabs>li>a {
    position: relative;
    padding-left: 18px !important;
    border-left: 4px solid transparent !important;
    font-weight: 500;
}

#navbar .tabs>li>a:hover,
#navbar .tabs>li.active>a:hover {
    background: rgba(0, 164, 200, 0.08) !important;
    color: var(--codak-accent) !important;
}

#navbar .tabs>li.active>a,
#navbar .tabs>li.active>a:focus,
body:has(#analytics-content) #navbar .tabs>li[data-name="AnalyticsDashboard"]>a,
body:has(#analytics-content) #navbar .tabs>li.tab-AnalyticsDashboard>a {
    border-left: 4px solid #00a4c8 !important;
    background: linear-gradient(90deg, rgba(0, 164, 200, 0.15) 0%, transparent 100%) !important;
    color: #005a70 !important;
    font-weight: 700 !important;
}

#navbar .tabs li .short-label>span,
#navbar .tabs li .short-label i,
#navbar .tabs li a i {
    font-size: 15px !important;
    transition: transform 0.25s ease, color 0.25s ease !important;
    display: inline-block !important;
}

#navbar .tabs li a:hover .short-label>span,
#navbar .tabs li.active a .short-label>span {
    transform: scale(1.25) !important;
}

/* 1. Home - Vibrant Cyan */
#navbar .tabs li[data-name="Home"] .short-label>span,
#navbar .tabs li.tab-Home .short-label>span {
    color: #00a4c8 !important;
}

/* 2. Accounts - Warm Gold / Amber */
#navbar .tabs li[data-name="Account"] .short-label>span,
#navbar .tabs li.tab-Account .short-label>span {
    color: #f59e0b !important;
}

/* 3. Contacts - Royal Electric Blue */
#navbar .tabs li[data-name="Contact"] .short-label>span,
#navbar .tabs li.tab-Contact .short-label>span {
    color: #3b82f6 !important;
}

/* 4. Leads - Vibrant Purple */
#navbar .tabs li[data-name="Lead"] .short-label>span,
#navbar .tabs li.tab-Lead .short-label>span {
    color: #a855f7 !important;
}

/* 5. Opportunities - Emerald Green */
#navbar .tabs li[data-name="Opportunity"] .short-label>span,
#navbar .tabs li.tab-Opportunity .short-label>span {
    color: #10b981 !important;
}

/* 6. Analytics Dashboard - Vibrant Bright Cyan */
#navbar .tabs li[data-name="AnalyticsDashboard"] .short-label>span,
#navbar .tabs li.tab-AnalyticsDashboard .short-label>span,
#navbar .tabs li a[href*="AnalyticsDashboard"] .short-label>span,
#navbar .tabs li a[href*="AnalyticsDashboard"] i {
    color: #00a4c8 !important;
}

/* 7. Emails - Vibrant Coral Red */
#navbar .tabs li[data-name="Email"] .short-label>span,
#navbar .tabs li.tab-Email .short-label>span {
    color: #ef4444 !important;
}

/* 8. Meetings - Bright Cyan Teal */
#navbar .tabs li[data-name="Meeting"] .short-label>span,
#navbar .tabs li.tab-Meeting .short-label>span {
    color: #06b6d4 !important;
}

/* 9. Calls - Bright Lime Green */
#navbar .tabs li[data-name="Call"] .short-label>span,
#navbar .tabs li.tab-Call .short-label>span {
    color: #22c55e !important;
}

/* 10. Tasks - Tangerine Orange */
#navbar .tabs li[data-name="Task"] .short-label>span,
#navbar .tabs li.tab-Task .short-label>span {
    color: #f97316 !important;
}

/* 11. Calendar - Indigo Blue */
#navbar .tabs li[data-name="Calendar"] .short-label>span,
#navbar .tabs li.tab-Calendar .short-label>span {
    color: #6366f1 !important;
}

/* 12. Cases - Rose Pink */
#navbar .tabs li[data-name="Case"] .short-label>span,
#navbar .tabs li.tab-Case .short-label>span {
    color: #ec4899 !important;
}

/* 13. Knowledge Base - Amethyst Purple */
#navbar .tabs li[data-name="KnowledgeBaseArticle"] .short-label>span,
#navbar .tabs li[data-name="KnowledgeBase"] .short-label>span,
#navbar .tabs li.tab-KnowledgeBaseArticle .short-label>span {
    color: #8b5cf6 !important;
}

/* 14. Campaigns - Fuchsia Magenta */
#navbar .tabs li[data-name="Campaign"] .short-label>span,
#navbar .tabs li.tab-Campaign .short-label>span {
    color: #d946ef !important;
}

/* 15. Target Lists - Turquoise */
#navbar .tabs li[data-name="TargetList"] .short-label>span,
#navbar .tabs li.tab-TargetList .short-label>span {
    color: #14b8a6 !important;
}

/* 16. Documents - Sky Blue */
#navbar .tabs li[data-name="Document"] .short-label>span,
#navbar .tabs li.tab-Document .short-label>span {
    color: #38bdf8 !important;
}

.page-header h3,
.page-header h2,
.header-title,
.breadcrumb {
    font-family: var(--codak-font-heading, sans-serif) !important;
    font-weight: 800 !important;
    color: #005a70 !important;
}

/* ==========================================================================
   8. FLOATING MODALS & GLASSMORPHISM DIALOG SYSTEM
   ========================================================================== */

/* Modal backdrop — z-index set in the stacking ladder above (section 3) */
.modal-backdrop.in {
    opacity: 0.55 !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.modal-dialog {
    margin-top: 45px !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/*
   MODAL CONTENT — two stacking-context traps removed:
   1. overflow:hidden was clipping date-pickers and dropdowns inside the modal.
   2. animation: ...forwards with a transform in the «to» frame freezes a
      stacking context permanently after the animation ends (browsers keep the
      context alive as long as the composited layer exists).
   Fix: animate opacity only on .modal-content; keep the scale/translate on
   .modal-dialog (which is already a context because modal itself is positioned).
*/
.modal-content {
    border-radius: 18px !important;
    border: 1.5px solid rgba(0, 164, 200, 0.28) !important;
    box-shadow: 0 24px 60px -8px rgba(0, 45, 60, 0.22), 0 8px 24px rgba(0, 0, 0, 0.08) !important;
    /* overflow:hidden removed — was clipping inner pickers & dropdowns */
    background: #ffffff !important;
    /* opacity-only animation: no transform → no permanent stacking context */
    animation: modalFadeIn 0.3s ease forwards !important;
}

/* The pop-in scale lives on .modal-dialog which is already a context */
.modal-dialog {
    animation: modalSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.93) translateY(-16px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-header {
    background: linear-gradient(135deg, #005a70 0%, #007c9b 100%) !important;
    color: #ffffff !important;
    padding: 16px 22px !important;
    border-bottom: none !important;
    position: relative !important;
}

.modal-header .close {
    color: #ffffff !important;
    opacity: 0.8 !important;
    text-shadow: none !important;
    font-size: 22px !important;
    transition: all 0.25s ease !important;
    margin-top: -2px !important;
}

.modal-header .close:hover {
    opacity: 1 !important;
    transform: scale(1.2) rotate(90deg) !important;
    color: #ffffff !important;
}

.modal-title {
    font-family: var(--codak-font-heading, sans-serif) !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    font-size: 16px !important;
    letter-spacing: -0.01em !important;
}

.modal-body {
    padding: 22px !important;
    background: #ffffff !important;
}

.modal-footer {
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 14px 22px !important;
    border-bottom-left-radius: 18px !important;
    border-bottom-right-radius: 18px !important;
}

/* ==========================================================================
   9. KANBAN BOARD SYSTEM & DRAG-AND-DROP CARDS
   ========================================================================== */

.kanban-column {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 14px !important;
    margin-right: 14px !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.02) !important;
}

.kanban-header {
    font-family: var(--codak-font-heading, sans-serif) !important;
    font-weight: 800 !important;
    color: #005a70 !important;
    font-size: 13.5px !important;
    margin-bottom: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.kanban-header .badge {
    background: linear-gradient(135deg, #005a70 0%, #007c9b 100%) !important;
    color: #ffffff !important;
    border-radius: 20px !important;
    padding: 4px 10px !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    box-shadow: 0 2px 6px rgba(0, 90, 112, 0.22) !important;
}

.kanban-card {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 12px !important;
    padding: 14px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 4px 12px rgba(0, 45, 60, 0.05) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    border-left: 4px solid #00a4c8 !important;
}

.kanban-card:hover {
    /* No transform — kanban cards may contain dropdown menus */
    box-shadow: 0 10px 28px -4px rgba(0, 70, 90, 0.18),
        0 3px 8px rgba(0, 164, 200, 0.1) !important;
    border-left-color: #005a70 !important;
}

/* Kanban Card Dropdown Positioning & Stacking Fix */
.list-kanban .panel,
.list-kanban .panel-body,
.list-kanban .item-menu-container,
.list-kanban .item-menu-container > .dropdown,
.list-kanban .item-menu-container > .btn-group {
    position: relative !important;
    overflow: visible !important;
}

/* Crucial: Dragged sortable helper MUST be position:absolute so jQuery UI tracks the cursor accurately */
.list-kanban .item.ui-sortable-helper {
    position: absolute !important;
    z-index: 999999 !important;
    opacity: 0.95 !important;
    transition: none !important;
    -webkit-transition: none !important;
    transform: none !important;
    box-shadow: 0 16px 36px rgba(0, 45, 60, 0.25) !important;
    cursor: grabbing !important;
    box-sizing: border-box !important;
}

.list-kanban .item-menu-container .dropdown-menu,
.list-kanban .item .dropdown-menu,
.list-kanban .kanban-card .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    margin-top: 2px !important;
    z-index: 1050 !important;
    box-shadow: 0 10px 30px -4px rgba(0, 45, 60, 0.22), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* ==========================================================================
   10. STREAM & SOCIAL ACTIVITY FEED
   ========================================================================== */

.stream-post-container,
.stream-head,
.stream-item {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 16px !important;
    margin-bottom: 14px !important;
    box-shadow: 0 4px 16px -2px rgba(0, 45, 60, 0.04) !important;
    transition: all 0.2s ease !important;
}

.stream-post-container:hover,
.stream-item:hover {
    border-color: rgba(0, 164, 200, 0.35) !important;
    box-shadow: 0 8px 24px -4px rgba(0, 164, 200, 0.14) !important;
}

.stream-post-avatar img,
.avatar-image {
    border-radius: 50% !important;
    border: 2px solid #00a4c8 !important;
    box-shadow: 0 2px 6px rgba(0, 164, 200, 0.22) !important;
}

.stream-actions .btn-link {
    color: #64748b !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    transition: color 0.2s ease !important;
}

.stream-actions .btn-link:hover {
    color: #005a70 !important;
    text-decoration: none !important;
}

/* ==========================================================================
   11. ADVANCED FORM FIELDS & ATTACHMENTS DROPZONE
   ========================================================================== */

.attachments-multiple-container {
    background: #f8fafc !important;
    border: 2px dashed #cbd5e1 !important;
    border-radius: 14px !important;
    padding: 20px !important;
    text-align: center !important;
    transition: all 0.25s ease !important;
}

.attachments-multiple-container:hover {
    border-color: #00a4c8 !important;
    background: #f0f9ff !important;
}

.multi-enum-btn,
.select2-search-choice {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%) !important;
    color: #0369a1 !important;
    border: 1px solid #7dd3fc !important;
    border-radius: 16px !important;
    padding: 3px 10px !important;
    font-weight: 700 !important;
    font-size: 11.5px !important;
    margin: 2px !important;
}

.colorpicker-popup,
.datetime-picker-popup {
    border-radius: 14px !important;
    box-shadow: 0 12px 32px rgba(0, 45, 60, 0.18) !important;
    border: 1px solid #cbd5e1 !important;
    /* overflow:hidden removed — was clipping inner popup content at the border-radius edge */
}

/* ==========================================================================
   12. TOP HEADER SHELL & CAPSULE GLOBAL SEARCH BAR
   ========================================================================== */

input[data-name="global-search"],
.global-search-container input {
    background: #f1f5f9 !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 25px !important;
    padding: 7px 16px 7px 36px !important;
    font-size: 13px !important;
    transition: all 0.25s ease !important;
}

input[data-name="global-search"]:focus {
    background: #ffffff !important;
    border-color: #00a4c8 !important;
    box-shadow: 0 0 0 4px rgba(0, 164, 200, 0.18) !important;
}

.action[data-action="quick-create"] {
    background: linear-gradient(135deg, #005a70 0%, #007c9b 100%) !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    width: 34px !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 3px 10px rgba(0, 90, 112, 0.25) !important;
    transition: all 0.25s ease !important;
}

.action[data-action="quick-create"]:hover {
    transform: scale(1.1) rotate(90deg) !important;
    background: linear-gradient(135deg, #007c9b 0%, #00a4c8 100%) !important;
    box-shadow: 0 6px 18px rgba(0, 164, 200, 0.4) !important;
}

/* ==========================================================================
   13. SEGMENTED PILL NAVIGATION TABS (SUBPANELS & DETAIL VIEWS)
   ========================================================================== */

.nav-tabs,
.subpanel-tabs {
    border-bottom: none !important;
    display: inline-flex !important;
    gap: 6px !important;
    background: #f1f5f9 !important;
    padding: 4px !important;
    border-radius: 25px !important;
    border: 1px solid #cbd5e1 !important;
    margin-bottom: 16px !important;
}

.nav-tabs>li>a,
.subpanel-tabs>li>a {
    border: none !important;
    border-radius: 20px !important;
    padding: 6px 16px !important;
    font-family: var(--codak-font-heading, sans-serif) !important;
    font-weight: 700 !important;
    font-size: 12.5px !important;
    color: #64748b !important;
    background: transparent !important;
    transition: all 0.25s ease !important;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.subpanel-tabs>li.active>a {
    background: linear-gradient(135deg, #005a70 0%, #007c9b 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(0, 90, 112, 0.25) !important;
}

/* ==========================================================================
   14. FLOATING TOAST NOTIFICATIONS & STATUS ALERT CARDS
   ========================================================================== */

.notify-container {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 2000 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.notify-text,
.alert-notify {
    background: #ffffff !important;
    border-radius: 14px !important;
    padding: 14px 20px !important;
    box-shadow: 0 10px 30px -4px rgba(0, 45, 60, 0.18), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    border-left: 5px solid #00a4c8 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    color: #0f172a !important;
    animation: toastSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    /* backdrop-filter removed — combined with animation:forwards+transform it creates
       a PERMANENT stacking context after animation ends, blocking content behind toast */
}

/* FIX: opacity+translateX only, NO scale() in the final «to» frame.
   animation:forwards freezes the final keyframe — any transform there creates a
   permanent stacking context. Ending at translateX(0) with no transform is safe. */
@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ==========================================================================
   15. 100% UNIFORM PURE WHITE LOGIN PAGE BACKGROUND
   ========================================================================== */

html,
body,
body.login-body,
body.login-body #content,
body.login-body .container,
body.login-body .container.content,
body.login-body .container-centering,
.container-centering {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
}

#login.panel {
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1.5px solid rgba(0, 164, 200, 0.3) !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 50px -10px rgba(0, 45, 60, 0.18), 0 0 30px rgba(0, 164, 200, 0.2) !important;
    /* overflow:hidden removed — was clipping date-pickers & dropdowns inside login form */
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease !important;
}

#login.panel:hover {
    box-shadow: 0 24px 60px -8px rgba(0, 45, 60, 0.22), 0 0 40px rgba(0, 164, 200, 0.3) !important;
}

#login .panel-heading {
    background: linear-gradient(135deg, #005a70 0%, #007c9b 100%) !important;
    padding: 24px 20px !important;
    border-bottom: none !important;
    text-align: center !important;
}

#login .logo-container img.logo {
    max-height: 50px !important;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25)) !important;
    transition: transform 0.3s ease !important;
}

#login .logo-container img.logo:hover {
    transform: scale(1.05) !important;
}

#login #btn-login {
    background: linear-gradient(135deg, #005a70 0%, #00a4c8 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 10px 24px !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    letter-spacing: 0.02em !important;
    box-shadow: 0 4px 16px rgba(0, 90, 112, 0.3) !important;
    transition: all 0.25s ease !important;
}

#login #btn-login:hover {
    background: linear-gradient(135deg, #004557 0%, #007c9b 100%) !important;
    box-shadow: 0 8px 24px rgba(0, 164, 200, 0.45) !important;
    transform: translateY(-2px) !important;
}

/* ==========================================================================
   16. GRIDSTACK DASHBOARD & INTERACTIVE DASHLET CARDS (.dashlet)
   ========================================================================== */

/*
   DASHLET — three stacking-context traps removed:
   1. overflow:hidden was clipping the «...» dropdown menu at the card edge.
   2. transform:translateY(-4px) on :hover created a stacking context exactly
      when the user hovers to reach the «...» button — guaranteed to trap the menu.
   3. animation:fadeUpEntrance...forwards in custom-ui-animations.css freezes
      a transform-based stacking context permanently (fixed there).
   Lift effect is now pure box-shadow + border-color — same visual, zero context.
*/
.dashlet {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 20px -4px rgba(0, 45, 60, 0.06) !important;
    transition: box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    /* overflow:hidden removed — was clipping dashlet dropdown menus */
}

.dashlet:hover {
    /* No transform — use shadow depth instead to simulate lift */
    box-shadow: 0 14px 40px -6px rgba(0, 45, 60, 0.16),
        0 4px 12px -2px rgba(0, 164, 200, 0.12) !important;
    border-color: rgba(0, 164, 200, 0.45) !important;
}

.dashlet .panel-heading {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 12px 18px !important;
}

.dashlet .panel-title {
    font-family: var(--codak-font-heading, sans-serif) !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    color: #005a70 !important;
}

.dashboard-tabs .btn {
    border-radius: 20px !important;
    font-weight: 700 !important;
    font-size: 12.5px !important;
    padding: 6px 16px !important;
    transition: all 0.2s ease !important;
}

.dashboard-tabs .btn.active {
    background: linear-gradient(135deg, #005a70 0%, #007c9b 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(0, 90, 112, 0.25) !important;
}

/* ==========================================================================
   17. ADMIN CONTROL CENTER MODERN GRID CARDS (.table-admin-panel)
   ========================================================================== */

.table-admin-panel {
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
}

.table-admin-panel tr.admin-content-row {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0, 45, 60, 0.04) !important;
    transition: box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.table-admin-panel tr.admin-content-row:hover {
    /* No transform — would create a stacking context on the row */
    box-shadow: 0 10px 24px -4px rgba(0, 164, 200, 0.16) !important;
    border-color: rgba(0, 164, 200, 0.35) !important;
}

.table-admin-panel td {
    padding: 12px 16px !important;
    border: none !important;
    vertical-align: middle !important;
}

.table-admin-panel td .icon {
    color: #00a4c8 !important;
    font-size: 16px !important;
    margin-right: 8px !important;
    transition: transform 0.2s ease !important;
}

.table-admin-panel tr.admin-content-row:hover td .icon {
    transform: scale(1.25) rotate(5deg) !important;
    color: #005a70 !important;
}

.admin-search-container input[data-name="quick-search"] {
    border-radius: 20px !important;
    padding: 8px 18px !important;
    font-size: 13.5px !important;
    border: 1.5px solid #cbd5e1 !important;
    transition: all 0.25s ease !important;
}

.admin-search-container input[data-name="quick-search"]:focus {
    border-color: #00a4c8 !important;
    box-shadow: 0 0 0 4px rgba(0, 164, 200, 0.18) !important;
}

/* ==========================================================================
   18. SLEEK FUTURISTIC SCROLLBARS & FOCUS RINGS
   ========================================================================== */

::-webkit-scrollbar {
    width: 7px !important;
    height: 7px !important;
}

::-webkit-scrollbar-track {
    background: rgba(241, 245, 249, 0.6) !important;
    border-radius: 10px !important;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #005a70 0%, #00a4c8 100%) !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 6px rgba(0, 90, 112, 0.2) !important;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #004557 0%, #007c9b 100%) !important;
}

/* ==========================================================================
   19. ELEVATED RECORD SIDE PANELS (.panel-side)
   ========================================================================== */

.record .side .panel,
.panel-side {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 16px -2px rgba(0, 45, 60, 0.05) !important;
    border-left: 4px solid #00a4c8 !important;
    margin-bottom: 16px !important;
    transition: all 0.25s ease !important;
}

.record .side .panel:hover,
.panel-side:hover {
    box-shadow: 0 8px 24px -4px rgba(0, 90, 112, 0.12) !important;
    border-left-color: #005a70 !important;
}

.panels-show-more-delimiter a {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 20px !important;
    padding: 6px 14px !important;
    color: #005a70 !important;
    font-weight: 700 !important;
    box-shadow: 0 3px 10px rgba(0, 45, 60, 0.06) !important;
    transition: all 0.2s ease !important;
}

.panels-show-more-delimiter a:hover {
    background: #005a70 !important;
    color: #ffffff !important;
    transform: scale(1.05) !important;
}

/* ==========================================================================
   20. WYSIWYG RICH TEXT EDITOR STYLING
   ========================================================================== */

.note-editor,
.wysiwyg-container {
    border-radius: 14px !important;
    border: 1px solid #cbd5e1 !important;
    /* overflow:hidden removed — was clipping toolbar dropdowns (Bold/Italic/etc menus) */
    box-shadow: 0 4px 14px rgba(0, 45, 60, 0.04) !important;
}

.note-toolbar,
.wysiwyg-toolbar {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 8px 12px !important;
}

.note-toolbar .btn,
.wysiwyg-toolbar .btn {
    border-radius: 6px !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #475569 !important;
    transition: all 0.15s ease !important;
}

.note-toolbar .btn:hover,
.wysiwyg-toolbar .btn:hover {
    background: #005a70 !important;
    color: #ffffff !important;
    border-color: #005a70 !important;
}

/* ==========================================================================
   21. DETAIL & EDIT VIEW FLOATING ACTION TOOLBAR (.detail-button-container)

   CRITICAL: backdrop-filter creates a new CSS stacking context which traps
   any .dropdown-menu inside it — making dropdowns appear to bleed through
   content below. We achieve the same frosted-glass look via a ::before
   pseudo-element so the element itself stays stacking-context-free.
   ========================================================================== */

.detail-button-container:not(.hidden),
.detail-button-container.stick-sub:not(.hidden),
.detail-button-container.sticked:not(.hidden),
.detail-button-container.has-sticked-bar:not(.hidden) {
    position: sticky !important;
    top: 48px !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    z-index: 100 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 14px !important;
    padding: 10px 20px !important;
    margin-top: 0 !important;
    margin-bottom: 18px !important;
    box-shadow: 0 6px 20px -2px rgba(0, 45, 60, 0.14), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.detail-button-container.hidden {
    display: none !important;
}

.detail-button-container .btn,
.detail-button-container .btn-group>.btn {
    padding: 9px 20px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
}

/* Hide dummy spacer div inserted by JS when scroll threshold is hit */
.detail-button-container+div[style*="height"] {
    display: none !important;
}

.detail-button-container .action[data-action="previous"],
.detail-button-container .action[data-action="next"] {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #005a70 !important;
    font-size: 12px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 6px rgba(0, 45, 60, 0.06) !important;
}

.detail-button-container .action[data-action="previous"]:hover,
.detail-button-container .action[data-action="next"]:hover {
    background: #005a70 !important;
    color: #ffffff !important;
    transform: scale(1.15) !important;
    box-shadow: 0 4px 12px rgba(0, 90, 112, 0.25) !important;
}

/* ==========================================================================
   22. NESTED CATEGORY TREE SIDEBARS (.tree-item, .tree-node)
   ========================================================================== */

.category-tree-container,
.tree-node {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 12px !important;
    box-shadow: 0 4px 14px rgba(0, 45, 60, 0.04) !important;
}

.tree-item>a,
.category-tree-container a {
    border-radius: 10px !important;
    padding: 6px 12px !important;
    font-weight: 700 !important;
    font-size: 12.5px !important;
    color: #475569 !important;
    transition: all 0.2s ease !important;
    display: block !important;
}

.tree-item.active>a,
.category-tree-container a.active {
    background: linear-gradient(135deg, #005a70 0%, #007c9b 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(0, 90, 112, 0.22) !important;
}

.tree-item>a:hover {
    background: #e0f2fe !important;
    color: #0284c7 !important;
}

/* ==========================================================================
   23. RECORD MERGE & FIELD COMPARISON MATRIX (.merge-container)
   ========================================================================== */

.merge-container table {
    border-radius: 14px !important;
    overflow: hidden !important;
    border: 1px solid #cbd5e1 !important;
}

.merge-field-row.conflict {
    background-color: #fffbeb !important;
    border-left: 4px solid #f59e0b !important;
}

.merge-field-row input[type="radio"] {
    accent-color: #005a70 !important;
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
}

/* ==========================================================================
   24. PULSATING LED STATUS INDICATORS & PRIORITY PILLS (@keyframes statusPulse)
   ========================================================================== */

.cell[data-name="status"] .label::before,
.cell[data-name="stage"] .label::before,
.label-status::before {
    content: '' !important;
    display: inline-block !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background-color: currentColor !important;
    margin-right: 6px !important;
    vertical-align: middle !important;
    animation: statusPulse 2s infinite ease-in-out !important;
}

/* FIX: opacity-only pulse — no transform to avoid creating stacking contexts
   on every badge in the list table (transform would trap cell dropdowns). */
@keyframes statusPulse {
    0% {
        opacity: 0.35;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.35;
    }
}

/* Priority Badges */
.cell[data-name="priority"] .label-danger,
.priority-high {
    background-color: #ffe4e6 !important;
    color: #e11d48 !important;
    border: 1px solid #fecdd3 !important;
    box-shadow: 0 2px 6px rgba(225, 29, 72, 0.15) !important;
}

.cell[data-name="priority"] .label-warning,
.priority-medium {
    background-color: #fef3c7 !important;
    color: #d97706 !important;
    border: 1px solid #fde68a !important;
}

.cell[data-name="priority"] .label-info,
.priority-low {
    background-color: #e0f2fe !important;
    color: #0284c7 !important;
    border: 1px solid #bae6fd !important;
}

/* ==========================================================================
   25. MODERN TOGGLE SWITCH CONTROLS & PROFILE CARD HALO
   ========================================================================== */

.user-profile-card .avatar-container img,
.user-avatar-halo {
    border-radius: 50% !important;
    box-shadow: 0 0 0 4px rgba(0, 164, 200, 0.25), 0 8px 24px rgba(0, 45, 60, 0.15) !important;
    transition: transform 0.3s ease !important;
}

.user-profile-card:hover img {
    transform: scale(1.06) !important;
}

/* ==========================================================================
   26. TABLE ROW ACTION DROPDOWNS & MICRO-ANIMATIONS (.cell-buttons)
   ========================================================================== */

/* cell-buttons inherits the universal dropdown canvas rules above.
   Padding-inline-start slide gives the tactile left-shift without creating
   a stacking context (transform would). */
.cell-buttons .dropdown-menu>li>a {
    border-radius: 8px !important;
    padding-block: 6px !important;
    padding-inline-start: 12px !important;
    padding-inline-end: 12px !important;
    font-weight: 700 !important;
    font-size: 12.5px !important;
    color: #334155 !important;
    transition: background-color 0.15s ease,
        color 0.15s ease,
        padding-inline-start 0.15s ease !important;
}

.cell-buttons .dropdown-menu>li>a:hover {
    background-color: #005a70 !important;
    color: #ffffff !important;
    padding-inline-start: 18px !important;
}

/* 27. NOTIFICATION BADGE — minimal position + size tweak only */
.number-badge {

    margin-left: -4px !important;
}

/* ==========================================================================
   28. PASSWORD INPUT LUXURY GROUP & REVEAL TOGGLE
   ========================================================================== */
.pwd-input-group {
    display: table !important;
    width: 100% !important;
    border-collapse: separate !important;
    position: relative !important;
    box-shadow: 0 2px 8px rgba(0, 45, 60, 0.04) !important;
    border-radius: 10px !important;
    margin-bottom: 2px !important;
}

.pwd-input-group .input-group-addon {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-right: none !important;
    color: #005a70 !important;
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    padding: 8px 14px !important;
    font-size: 14px !important;
    vertical-align: middle !important;
    display: table-cell !important;
    width: 1% !important;
    white-space: nowrap !important;
}

.pwd-input-group .form-control {
    display: table-cell !important;
    width: 100% !important;
    border-radius: 0 !important;
    border: 1px solid #cbd5e1 !important;
    font-size: 13.5px !important;
    height: 38px !important;
    padding: 8px 12px !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
    box-shadow: none !important;
    vertical-align: middle !important;
}

.pwd-input-group .form-control:focus {
    border-color: #00a4c8 !important;
    box-shadow: 0 0 0 3px rgba(0, 164, 200, 0.15) !important;
    z-index: 2 !important;
}

.pwd-input-group .input-group-btn {
    display: table-cell !important;
    width: 1% !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    position: relative !important;
}

.pwd-input-group .input-group-btn .toggle-pwd-btn,
.toggle-pwd-btn {
    border: 1px solid #cbd5e1 !important;
    border-left: none !important;
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    background: #f8fafc !important;
    color: #00a4c8 !important;
    padding: 8px 14px !important;
    height: 38px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    outline: none !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.pwd-input-group .input-group-btn .toggle-pwd-btn:hover,
.toggle-pwd-btn:hover {
    background-color: #e0f2fe !important;
    color: #005a70 !important;
    border-color: #7dd3fc !important;
}

.pwd-input-group .input-group-btn .toggle-pwd-btn.is-active,
.toggle-pwd-btn.is-active {
    background-color: #fef2f2 !important;
    color: #dc2626 !important;
    border-color: #fca5a5 !important;
}

/* Generate Password Button & Alignment Fix */
.cell[data-name="generatePassword"] {
    display: flex !important;
    align-items: flex-end !important;
    height: 100% !important;
    padding-bottom: 2px !important;
}

.pwd-gen-btn {
    background-color: #005a70 !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    padding: 8px 18px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    height: 38px !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(0, 90, 112, 0.2) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    cursor: pointer !important;
}

.pwd-gen-btn:hover {
    background-color: #00a4c8 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(0, 164, 200, 0.35) !important;
    transform: translateY(-1px);
}

/* ==========================================================================
   CODAK CRM SMART UPDATE CENTER & ONE-CLICK DEPLOY SUITE
   ========================================================================== */

.codak-notifications-wrapper {
    margin-bottom: 16px;
}

.codak-upgrade-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.02) !important;
    padding: 20px 24px !important;
    position: relative !important;
    transition: all 0.2s ease-in-out !important;
    direction: ltr !important;
    text-align: left !important;
}

.codak-upgrade-card:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.08) !important;
}

.codak-upgrade-layout {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.codak-icon-box {
    width: 60px;
    height: 60px;
    min-width: 60px;
    background: #e0f2fe;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0369a1;
    font-size: 24px;
}

.codak-upgrade-card.is-up-to-date .codak-icon-box {
    background: #dcfce7;
    color: #15803d;
}

.codak-content-area {
    flex: 1;
    min-width: 0;
}

.codak-content-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    gap: 16px;
}

.codak-badge-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
}

.codak-badge-status.update-available {
    background: #dcfce7;
    color: #15803d;
}

.codak-badge-status.update-available .status-dot {
    width: 6px;
    height: 6px;
    background-color: #16a34a;
    border-radius: 50%;
}

.codak-badge-status.up-to-date {
    background: #f1f5f9;
    color: #475569;
}

.codak-badge-status.up-to-date .status-dot {
    width: 6px;
    height: 6px;
    background-color: #64748b;
    border-radius: 50%;
}

.codak-card-title {
    font-size: 19px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 4px 0;
    letter-spacing: -0.3px;
    line-height: 1.25;
}

.codak-card-subtitle {
    font-size: 13.5px;
    color: #64748b;
    margin: 0;
    font-weight: 400;
}

.codak-version-group {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin-top: 4px;
}

.pill-version {
    padding: 6px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
}

.pill-version.old {
    background: #f1f5f9;
    color: #64748b;
}

.version-arrow {
    color: #94a3b8;
    font-size: 14px;
}

.pill-version.new {
    background: #e0f2fe;
    color: #0284c7;
}

.codak-actions-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.btn-codak-primary {
    background: #005a70 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 11px 22px !important;
    border-radius: 10px !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06) !important;
}

.btn-codak-primary:hover {
    background: #004556 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 90, 112, 0.25) !important;
}

.btn-codak-primary .icon-arrow {
    font-size: 15px;
    margin-left: 2px;
}

.codak-progress-container {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px;
    margin-top: 14px;
}

.codak-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12.5px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 8px;
}

.codak-progress-track {
    height: 6px;
    background: #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
}

.codak-progress-bar {
    height: 100%;
    background: #005a70;
    border-radius: 8px;
    transition: width 0.3s ease;
}

.codak-steps-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.codak-step-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #64748b;
}

.codak-step-item.active {
    font-weight: 600;
    color: #005a70;
}

.codak-step-item.completed {
    color: #16a34a;
}

.codak-step-item.error {
    color: #dc2626;
}

/* ==========================================================================
   CODAK CRM ABOUT PAGE - OFFICIAL BRAND TEAL THEME (CLEAN NO-BREAK UI)
   ========================================================================== */

.complex-text {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    color: #334155 !important;
    line-height: 1.65 !important;
    font-size: 13.5px !important;
    background: #ffffff !important;
    overflow: hidden !important;
}

/* Main Title - Codak Brand Teal */
.complex-text h1 {
    color: #005a70 !important;
    font-weight: 800 !important;
    font-size: 24px !important;
    letter-spacing: -0.4px !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    line-height: 1.25 !important;
}

/* Subtitle Tagline Badge */
.complex-text > p:first-of-type em,
.complex-text > em:first-of-type {
    color: #005a70 !important;
    font-size: 13px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    display: inline-block !important;
    background: #e0f2fe !important;
    border: 1px solid #bae6fd !important;
    padding: 4px 12px !important;
    border-radius: 8px !important;
    margin-bottom: 12px !important;
}

/* Section Titles with Codak Teal Left Accent Bar */
.complex-text h3 {
    color: #0f172a !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    letter-spacing: -0.2px !important;
    margin-top: 22px !important;
    margin-bottom: 12px !important;
    position: relative !important;
    padding-left: 12px !important;
}

.complex-text h3::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 2px !important;
    bottom: 2px !important;
    width: 4px !important;
    background: #005a70 !important;
    border-radius: 4px !important;
}

/* Soft Gradient Section Dividers */
.complex-text hr {
    border: none !important;
    height: 1px !important;
    background: linear-gradient(90deg, #e2e8f0 0%, #bae6fd 50%, #e2e8f0 100%) !important;
    margin: 20px 0 !important;
}

/* Creative Feature Card Items List (Clean, No-Break, No Bullet Dots) */
.complex-text ul {
    padding: 0 !important;
    margin: 0 0 18px 0 !important;
    list-style: none !important;
    list-style-type: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.complex-text li {
    list-style: none !important;
    list-style-type: none !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 3px solid #005a70 !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    margin: 0 !important;
    line-height: 1.55 !important;
    color: #475569 !important;
    transition: all 0.2s ease !important;
}

.complex-text li::before,
.complex-text li::marker {
    display: none !important;
    content: none !important;
}

.complex-text li:hover {
    background: #f0f9ff !important;
    border-color: #cbd5e1 !important;
    border-left-color: #007c9b !important;
}

.complex-text li strong {
    color: #005a70 !important;
    font-weight: 700 !important;
}

/* Specification Paragraph Styling */
.complex-text p {
    margin-bottom: 12px !important;
    color: #334155 !important;
}

/* Copyright Footer */
.complex-text > p:last-child em,
.complex-text > em:last-child,
.complex-text p:last-child {
    color: #94a3b8 !important;
    font-size: 12px !important;
    text-align: center !important;
    display: block !important;
    margin-top: 24px !important;
    border-top: 1px dashed #e2e8f0 !important;
    padding-top: 14px !important;
}

/* ==========================================================================
   20. CODAK KANBAN & OPPORTUNITY BOARD FIX (ZERO-FLYING / DRAG-DROP STABILITY)
   ========================================================================== */

/* 1. Ensure Table Columns Align Cleanly to Top */
div.list-kanban>div.kanban-columns-container>table,
div.list-kanban>div.kanban-columns-container>table>tbody,
div.list-kanban>div.kanban-columns-container>table>tbody tr.kanban-row {
    vertical-align: top !important;
}

div.list-kanban td.group-column,
div.list-kanban>div>table td.group-column {
    vertical-align: top !important;
    padding-top: 8px !important;
}

/* 2. Drag & Drop Stabilization - Kill all transitions during drag on active helper */
div.list-kanban .item.ui-sortable-helper,
div.list-kanban .item.ui-sortable-helper *,
div.list-kanban .ui-sortable-placeholder {
    transition: none !important;
    -webkit-transition: none !important;
    animation: none !important;
}

/* 3. Drop Placeholder - Clean dashed drop area without forced min-height to prevent freezing */
div.list-kanban .ui-sortable-placeholder {
    visibility: visible !important;
    background: rgba(0, 164, 200, 0.08) !important;
    border: 2px dashed #00a4c8 !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    margin-bottom: 12px !important;
}

/* 4. Kanban Top Bar Alignment */
.list-kanban-container .list-buttons-container,
div.list-kanban-container + .list-buttons-container {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    margin-bottom: 8px !important;
}

/* 5. Kanban Container Scrolling - overflow-y: hidden matches EspoCRM core and prevents dual-axis scroll traps */
div.list-kanban-container {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    clear: both !important;
}