/* 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: 75vw !important;
        max-width: 90vw !important;
        min-width: min(850px, 92vw) !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;
}

/* ==========================================================================
   SJS Editor Widget Styling & Layout
   ========================================================================== */

.sjs-editor-group {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

.sjs-editor-label {
    display: block !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.375rem !important;
    color: #334155;
}

.dark .sjs-editor-label {
    color: #cbd5e1 !important;
}

.sjs-editor-wrapper {
    width: 100% !important;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: #ffffff;
    transition: all 0.2s ease-in-out;
}

.dark .sjs-editor-wrapper {
    border-color: #334155;
    background-color: #0f172a;
}

.sjs-editor-wrapper:focus-within {
    border-color: #a38152;
    box-shadow: 0 0 0 2px rgba(163, 129, 82, 0.25);
}

.sjs-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.5rem;
    background-color: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    user-select: none;
}

.dark .sjs-editor-toolbar {
    background-color: rgba(30, 41, 59, 0.6);
    border-color: #334155;
}

.sjs-editor-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem;
    min-width: 1.85rem;
    height: 1.85rem;
    border-radius: 0.375rem;
    border: 1px solid transparent;
    background: transparent;
    color: #475569;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.dark .sjs-editor-btn {
    color: #94a3b8;
}

.sjs-editor-btn:hover {
    background-color: #e2e8f0;
    color: #0f172a;
}

.dark .sjs-editor-btn:hover {
    background-color: #334155;
    color: #f8fafc;
}

.sjs-editor-btn.is-active {
    background-color: #e2e8f0;
    color: #a38152;
    border-color: rgba(163, 129, 82, 0.3);
}

.dark .sjs-editor-btn.is-active {
    background-color: #1e293b;
    color: #c5a87b;
    border-color: rgba(197, 168, 123, 0.3);
}

.sjs-editor-separator {
    width: 1px;
    height: 1.25rem;
    background-color: #cbd5e1;
    margin: 0 0.25rem;
}

.dark .sjs-editor-separator {
    background-color: #334155;
}

.sjs-editor-body {
    padding: 0.75rem 1rem;
    min-height: 160px;
    max-height: 380px;
    overflow-y: auto;
    outline: none;
    font-size: 0.875rem;
    line-height: 1.6;
    color: #1e293b;
}

.dark .sjs-editor-body {
    color: #f1f5f9;
}

.sjs-editor-body[data-placeholder]:empty:before {
    content: attr(data-placeholder);
    color: #94a3b8;
    pointer-events: none;
}

.sjs-editor-body ul {
    list-style-type: disc !important;
    padding-left: 1.5rem !important;
    margin: 0.5rem 0 !important;
}

.sjs-editor-body ol {
    list-style-type: decimal !important;
    padding-left: 1.5rem !important;
    margin: 0.5rem 0 !important;
}

.sjs-editor-body li {
    margin-bottom: 0.25rem !important;
}

.sjs-editor-body blockquote {
    border-left: 3px solid #a38152 !important;
    padding-left: 0.75rem !important;
    margin: 0.5rem 0 !important;
    color: #64748b !important;
}

.dark .sjs-editor-body blockquote {
    color: #94a3b8 !important;
}

/* Workshop Dialog wider sizing */
@media (min-width: 768px) {
    .workshop-dialog .sjs-dialog-container {
        width: 82vw !important;
        max-width: 1100px !important;
    }
}

/* Description rich-text elements in detail views */
.sjs-dialog-content [sjs-id="description"] ul {
    list-style-type: disc !important;
    padding-left: 1.25rem !important;
    margin: 0.375rem 0 !important;
}

.sjs-dialog-content [sjs-id="description"] ol {
    list-style-type: decimal !important;
    padding-left: 1.25rem !important;
    margin: 0.375rem 0 !important;
}

.sjs-dialog-content [sjs-id="description"] li {
    margin-bottom: 0.2rem !important;
}

.sjs-dialog-content [sjs-id="description"] blockquote {
    border-left: 3px solid #a38152 !important;
    padding-left: 0.75rem !important;
    margin: 0.5rem 0 !important;
    color: #64748b !important;
}

.dark .sjs-dialog-content [sjs-id="description"] blockquote {
    color: #94a3b8 !important;
}

/* Editor & Description Links */
.sjs-editor-body a,
.sjs-dialog-content [sjs-id="description"] a {
    color: #a38152 !important;
    text-decoration: underline !important;
    cursor: pointer !important;
    font-weight: 500 !important;
    transition: color 0.15s ease !important;
}

.sjs-editor-body a:hover,
.sjs-dialog-content [sjs-id="description"] a:hover {
    color: #8c6d43 !important;
}

.dark .sjs-editor-body a,
.dark .sjs-dialog-content [sjs-id="description"] a {
    color: #c5a87b !important;
}

.dark .sjs-editor-body a:hover,
.dark .sjs-dialog-content [sjs-id="description"] a:hover {
    color: #dfc8a5 !important;
}

/* Editor Floating Link Bubble */
.sjs-editor-link-bubble {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
}

/* Scroll offset for sticky navbar */
#leistungen,
#ueber-mich,
#kontakt {
    scroll-margin-top: 5.5rem;
}

/* Prevent horizontal overflow without creating an internal scroll container */
.overflow-x-clip {
    overflow-x: clip;
}