/* bwb-zambuto Custom Portal Styles */

/* Prevent line breaks and hide overflow in all page tables */
.sjs-page table th,
.sjs-page table td {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Force standard dark text color for cells in light mode (excluding custom colored ones) */
.sjs-page table td:not([class*="text-green-"]):not([class*="text-emerald-"]):not([class*="text-pink-"]):not([class*="text-rose-"]):not([class*="text-gold-"]):not([class*="text-red-"]):not([class*="text-blue-"]):not([class*="text-indigo-"]) {
    color: #0f172a !important; /* slate-900 */
}

/* Retain high-contrast light text colors in dark mode */
.dark .sjs-page table td:not([class*="text-green-"]):not([class*="text-emerald-"]):not([class*="text-pink-"]):not([class*="text-rose-"]):not([class*="text-gold-"]):not([class*="text-red-"]):not([class*="text-blue-"]):not([class*="text-indigo-"]) {
    color: #f1f5f9 !important; /* slate-100 */
}

.cell-spacer {
    background-color: rgb(255 255 255 / 1);
}

.dark .sjs-page .cell-spacer {
    background-color: rgb(19, 26, 52) !important;
    border: 1px solid rgb(19, 26, 52) !important;
}

.cell-border table td:not(.border-none),
.cell-border table th:not(.border-none),
.cell-border table thead th:not(.border-none),
.cell-border table thead th.border-none,
.cell-border table td.border-none,
.cell-spacer {
    border-color: rgb(229, 231, 235) !important;
}

.dark .cell-border table td:not(.border-none),
.dark .cell-border table th:not(.border-none),
.dark .cell-border table thead th:not(.border-none),
.dark .cell-border table thead th.border-none,
.dark .cell-border table td.border-none,
.dark .cell-spacer {
    border-color: rgb(30 41 59) !important;
}

.cell-border table td:not(.border-none),
.cell-border table th:not(.border-none),
.cell-border table thead th.border-none,
.cell-border table td.border-none {
    border-right: 1px solid;
}

[sjs-id="detailedPersonTable"] thead th:not(.border-none) {
    border-bottom: 1px solid;

}

/* Dialog footer button overrides to match user requested aesthetics */
.sjs-user-dialog-overlay .sjs-dialog-footer .sjs-btn {
    border-radius: 0.375rem !important;
}

/* Segmented button group for Cancel/Delete */
.segmented-button-group {
    display: flex !important;
    align-items: stretch !important;
}

.segmented-button-group .sjs-btn:first-child {
    border-top-left-radius: 0.375rem !important;
    border-bottom-left-radius: 0.375rem !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.segmented-button-group .sjs-btn:last-child {
    border-top-right-radius: 0.375rem !important;
    border-bottom-right-radius: 0.375rem !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.segmented-button-group .sjs-btn:only-child {
    border-radius: 0.375rem !important;
}

/* Enhancements for Segmented Button Group with 3+ buttons (Cancel, Delete, Download) */
.segmented-button-group .sjs-btn:not(:first-child):not(:last-child) {
    border-radius: 0 !important;
}

.segmented-button-group .sjs-btn {
    margin: 0 !important;
}

.segmented-button-group {
    gap: 0 !important;
}


/* Custom width and fullscreen behavior on mobile for generic dialogs */
.dialog-xl .sjs-dialog-container {
    width: 100% !important;
    height: 100% !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

/* Search bar optimization inside accordions */
.search-input-field {
    margin-bottom: 0 !important; /* Remove wrapper margin-bottom to align layout */
}

.search-input-field .sjs-input {
    height: 2.25rem !important; /* Sleeker height matched to button */
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    padding-left: 2.5rem !important; /* Make room for left icon */
    border-radius: 0.375rem !important;
    background-color: rgba(248, 250, 252, 0.8) !important;
    font-size: 0.8125rem !important;
}

.dark .search-input-field .sjs-input {
    background-color: rgba(15, 23, 42, 0.4) !important;
}

/* Center search icon vertically inside the 2.25rem input box */
.search-input-field .sjs-input-icon {
    height: 2.25rem !important;
    display: flex !important;
    align-items: center !important;
}

.sjs-ul {
    border-width: 0 !important;
    border-radius: 0 !important;
}

/* Active Tabs Styling overrides to match active sidebar items */
.sjs-tabs > li.active {
    border-bottom-color: #a38152 !important; /* gold-600 */
}

.dark .sjs-tabs > li.active {
    border-bottom-color: #c5a87b !important; /* gold-400 */
}

.sjs-tabs > li.active > span {
    color: #a38152 !important; /* gold-600 */
}

.dark .sjs-tabs > li.active > span {
    color: #c5a87b !important; /* gold-400 */
}

.sjs-tabs > li:hover > span {
    color: #a38152 !important; /* gold-600 */
}

.dark .sjs-tabs > li:hover > span {
    color: #c5a87b !important; /* gold-400 */
}

/* Global Toggle Gold/Bronze styling overrides */
.sjs-toggle-input:checked + .sjs-toggle-slider {
    background-color: #b89765 !important; /* gold-500 */
    border-color: #a38152 !important; /* gold-600 */
}

.dark .sjs-toggle-input:checked + .sjs-toggle-slider {
    background-color: #c5a87b !important; /* gold-400 */
    border-color: #b89765 !important; /* gold-500 */
}

.sjs-toggle-input:focus + .sjs-toggle-slider {
    --tw-ring-color: #b89765 !important; /* ring gold-500 */
}

/* Fix card borders for customer list and history list items */
[sjs-id="customerList"] > li,
[sjs-id="historyList"] > li {
    border-width: 1px !important;
}

/* Grouped Todo List styling */
.grouped_list {
    display: flex;
    flex-direction: column;
    gap: 0 !important; /* No space between items */
    border-radius: 0.75rem; /* rounded-xl */
}

.grouped_list > li {
    margin-bottom: 0 !important; /* Remove individual margin-bottom */
    border-radius: 0 !important; /* Remove individual rounded corners */
    border: 1px solid rgb(226, 232, 240) !important; /* default slate-200 border */
    border-top-width: 0 !important; /* Prevent double borders */
}

.dark .grouped_list > li {
    border-color: rgba(255, 255, 255, 0.05) !important;
}

/* First item: round the top corners and restore top border */
.grouped_list > li:first-child {
    border-top-left-radius: 0.75rem !important;
    border-top-right-radius: 0.75rem !important;
    border-top-width: 1px !important;
}

/* Last item: round the bottom corners */
.grouped_list > li:last-child {
    border-bottom-left-radius: 0.75rem !important;
    border-bottom-right-radius: 0.75rem !important;
}

@media (min-width: 768px) {
    .sjs-page {
        padding-left: 9rem;
    }
    .customer-page.sjs-page {
        padding-left: 13rem;
        padding-right: 1rem;
    }
    .dialog-xl .sjs-dialog-container {
        width: 66vw !important;
        max-width: 90vw !important;
        height: auto !important;
        max-height: 90vh !important;
        border-radius: 0.75rem !important;
        margin: auto !important;
    }

    .sjs-input-group,
    .sjs-select-group,
    .sjs-searchable-group,
    .sjs-checkbox-group,
    .sjs-toggle-group,
    .sjs-colorpicker-group {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.75rem;
    }
    .sjs-input-label,
    .sjs-select-label,
    .sjs-searchable-label,
    .sjs-checkbox-group-label,
    .sjs-toggle-label,
    .sjs-colorpicker-label {
        order: 1;
        grid-column: span 1 / span 1;
    }
    .sjs-input,
    .sjs-input-wrapper-icon,
    .sjs-select,
    .sjs-select-input,
    .sjs-select-wrapper,
    .sjs-checkbox-items,
    .sjs-toggle-items,
    .sjs-colorpicker-controls {
        order: 2;
        grid-column: span 2 / span 2;
    }
    .sjs-input-wrapper-icon {
        order: 2;
    }
    .md\:hidden {
        display: none !important;
    }
    .contact-list-item {
        flex-direction: row;
        align-items: center;
    }
    .contact-list-item .name-col,
    .contact-list-item .action-col {
        width: 50% !important;
    }
    .contact-list-item .action-col {
        justify-content: flex-end;
    }
    .contact-actions-layout {
        margin-left: auto;
        align-items: flex-end;
    }
    .contact-actions-icons {
        justify-content: flex-end;
    }
    .contact-actions-texts {
        align-items: flex-end;
        text-align: right;
    }

}

/* Mobile responsive navbar rightCol styling */
@media (max-width: 767px) {
    #rightCol {
        display: none !important;
    }
    #rightCol.open {
        display: flex !important;
        position: absolute;
        top: 3.5rem; /* slightly below the h-16 navbar */
        right: 0.75rem;
        background-color: #ffffff;
        border: 1px solid rgba(226, 232, 240, 0.8);
        border-radius: 0.75rem;
        padding: 0.5rem;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        z-index: 50;
        min-width: 140px;
    }
    .dark #rightCol.open {
        background-color: #0c1222;
        border-color: rgba(255, 255, 255, 0.1);
    }
    #rightCol.open #customNavbar {
        flex-direction: column;
        align-items: stretch;
        margin-right: 0;
    }
    .sjs-input-group {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
    .sjs-input-group .sjs-input-label,
    .sjs-select-group .sjs-select-label,
    .sjs-searchable-group .sjs-searchable-label,
    .sjs-checkbox-group .sjs-checkbox-group-label,
    .sjs-toggle-group .sjs-toggle-label {
        order: -1;
        margin-bottom: 0.5rem;
    }
}


/* Mobile responsive styling for tabs to prevent overflow */
@media (max-width: 640px) {
    .sjs-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
    }
    .sjs-tabs > li {
        flex: 1 1 0% !important;
        min-width: 0 !important;
    }
    .sjs-tabs > li > span {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        font-size: 0.8125rem !important; /* ~13px */
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/* ==========================================================================
   Font Theming Classes (Similar to Dark Mode)
   ========================================================================== */

html.font-arial,
html.font-arial body,
html.font-arial .font-sans,
.font-arial,
.font-arial .font-sans,
.font-arial table,
.font-arial input,
.font-arial button,
.font-arial select,
.font-arial textarea,
.font-arial h1, .font-arial h2, .font-arial h3, .font-arial h4, .font-arial h5, .font-arial h6,
.font-arial .sjs-page,
.font-arial .sjs-dialog {
    font-family: 'Liberation Sans', Arial, Helvetica, sans-serif !important;
}

html.font-calibri,
html.font-calibri body,
html.font-calibri .font-sans,
.font-calibri,
.font-calibri .font-sans,
.font-calibri table,
.font-calibri input,
.font-calibri button,
.font-calibri select,
.font-calibri textarea,
.font-calibri h1, .font-calibri h2, .font-calibri h3, .font-calibri h4, .font-calibri h5, .font-calibri h6,
.font-calibri .sjs-page,
.font-calibri .sjs-dialog {
    font-family: 'Carlito', Calibri, 'Segoe UI', sans-serif !important;
}

html.font-poiret,
html.font-poiret body,
html.font-poiret .font-sans,
.font-poiret,
.font-poiret .font-sans,
.font-poiret table,
.font-poiret input,
.font-poiret button,
.font-poiret select,
.font-poiret textarea,
.font-poiret h1, .font-poiret h2, .font-poiret h3, .font-poiret h4, .font-poiret h5, .font-poiret h6,
.font-poiret .sjs-page,
.font-poiret .sjs-dialog {
    font-family: 'Poiret One', Inter, Outfit, sans-serif !important;
}

/* Continuous Horizontal Infinite Scrolling Marquee for References */
@keyframes marquee-scroll {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-50%);
    }
}

.references-marquee-track {
    display: flex;
    width: max-content;
    animation: marquee-scroll 40s linear infinite;
    will-change: transform;
}

.references-marquee-track:hover {
    animation-play-state: paused;
}