/* =========================================================
   GroBase 2.0 Design System — Phase 3
   Plugin styling: Select2, Tagify, ag-Grid, FullCalendar,
   Popovers, Pagination, Support Tab, Chat
   ========================================================= */

/* -------------------------------
   1. Select2
-------------------------------- */

.select2-results__group {
    color: var(--gb-accent) !important;
    font-weight: 700;
}

.select2-results__option.select2-results__option--selected {
    background-color: var(--gb-primary) !important;
    color: #FFFFFF !important;
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    box-shadow: var(--gb-focus-ring) !important;
    border-color: var(--gb-primary) !important;
}

.select2-container--bootstrap-5 .select2-selection {
    border-radius: var(--gb-radius-md) !important;
}

.select2-container--bootstrap-5 .select2-dropdown {
    border-color: var(--gb-primary) !important;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus {
    border-color: var(--gb-primary) !important;
    box-shadow: var(--gb-focus-ring) !important;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown {
    color: var(--bs-body-color) !important;
    background-color: var(--bs-body-bg) !important;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection {
    background-color: var(--bs-body-bg) !important;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: var(--bs-body-color) !important;
}
/* -------------------------------
   2. Pagination
-------------------------------- */

.pagination {
    --bs-pagination-color: var(--gb-primary) !important;
    --bs-pagination-hover-color: var(--gb-primary-hover) !important;
    --bs-pagination-focus-color: var(--gb-primary-hover) !important;
    --bs-pagination-focus-box-shadow: var(--gb-focus-ring) !important;
    --bs-pagination-active-bg: var(--gb-primary) !important;
    --bs-pagination-active-border-color: var(--gb-primary) !important;
    --bs-pagination-border-radius: var(--gb-radius-pill);
}

/* -------------------------------
   3. Accordion
-------------------------------- */

.accordion-item {
    --bs-accordion-active-bg: var(--gb-primary-hover) !important;
    --bs-accordion-active-color: #FFFFFF !important;
    --bs-accordion-btn-focus-box-shadow: var(--gb-focus-ring) !important;
    border-color: var(--gb-border);
}

.accordion-button {
    border-radius: var(--gb-radius-md);
}

.accordion-button:not(.collapsed) {
    color: #FFFFFF;
    background-color: var(--gb-primary-hover);
}

/* -------------------------------
   4. Popovers
-------------------------------- */

.grobase-popover {
   /* --bs-popover-header-bg: var(--gb-primary);*/
    --bs-popover-header-color: #FFFFFF;
    --bs-popover-border-color: var(--gb-border);
    --bs-popover-border-radius: var(--gb-radius-md);
    --bs-popover-body-padding-x: 1rem;
    --bs-popover-body-padding-y: 0.75rem;
}

/* -------------------------------
   5. ag-Grid
-------------------------------- */

.ag-theme-grobase {
    --ag-accent-color: var(--gb-primary) !important;
    --ag-header-background-color: var(--gb-primary) !important;
    --ag-header-text-color: #FFFFFF !important;
    --ag-font-family: var(--gb-font-family) !important;
    --ag-font-size: 12px !important;
    --ag-border-color: var(--gb-border-strong) !important;
    --ag-icon-button-active-color: #FFFFFF !important;
    --ag-row-hover-color: var(--gb-surface-soft) !important;
    --ag-selected-row-background-color: var(--gb-primary-soft) !important;
}

[data-bs-theme="dark"] .ag-theme-grobase {
    --ag-border-color: #212529 !important;
    --ag-background-color: #E0DFDF;
}

[data-bs-theme="dark"] .ag-theme-grobase .ag-cell-value {
    color: var(--gb-primary)
}

[data-bs-theme="dark"] .ag-theme-grobase a {
    color: var(--gb-primary) !important;
}
[data-bs-theme="dark"] .ag-theme-grobase a:hover {
    color: var(--gb-nav-link) !important;
}

.ag-paging-panel {
    font-size: 11px;
    height: auto;
    flex-wrap: wrap-reverse;
    row-gap: 1rem;
    padding: 0.5rem;
    align-items: center;
    justify-content: flex-end;
}

.ag-filter-active::after {
    background-color: #FFFFFF;
}

@media (max-width: 768px) {
    .ag-paging-panel {
        justify-content: center;
    }
}

/* -------------------------------
   6. Tagify
-------------------------------- */

:root {
    --tagify-dd-color-primary: var(--gb-primary) !important;
    --tagify-dd-text-color: #212529 !important;
    --tagify-dd-bg-color: #FFFFFF !important;
    --tagify-dd-item-pad: 0.5em 0.75em !important;
    --tagify-dd-max-height: 300px !important;
}

.stickieLook {
    --tag-bg: #6C757D !important;
    --tag-hover: var(--gb-primary) !important;
    --tag-text-color: #FFFFFF !important;
    --tag-text-color--edit: #111111 !important;
    --tag-remove-bg: var(--tag-hover) !important;
    --tag-pad: 0.5em 0.75em !important;
    --tag-inset-shadow-size: 2em !important;
    --tag-remove-btn-color: #FFFFFF !important;
    --tag-remove-btn-bg--hover: #000000 !important;
    --tags-focus-border-color: var(--gb-primary) !important;

    display: inline-block !important;
    min-width: 0 !important;
    border: none !important;
}

.tagify {
    --placeholder-color: var(--gb-text-muted) !important;
}

.tagify__dropdown {
    min-width: 100px !important;
}

.tagify--focus.form-control {
    box-shadow: var(--gb-focus-ring) !important;
    border-color: var(--gb-primary) !important;
}

.stickieLook .tagify__tag {
    margin-top: 0 !important;
}

.stickieLook .tagify__tag > div {
    border-radius: var(--gb-radius-pill) !important;
}

.stickieLook .tagify__tag__removeBtn {
    margin-inline: -6px 6px !important;
    text-align: right !important;
    transition: 0.12s !important;
}

.stickieLook .tagify__tag:not(.tagify__tag--editable):hover .tagify__tag__removeBtn {
    transform: none !important;
    opacity: 1 !important;
}

.tagify__tag--editable {
    color: var(--gb-danger) !important;
}

.stickieLook + button {
    color: var(--gb-primary) !important;
    font: bold 0.95em/1.2 var(--gb-font-family) !important;
    padding: 0.5em 0.75em !important;
    border: 0 !important;
    background: none !important;
    box-shadow: 0 0 0 2px inset currentColor !important;
    border-radius: var(--gb-radius-pill) !important;
    cursor: pointer !important;
    outline: none !important;
    transition: 0.1s ease-out !important;
    margin: 0 0 0 5px !important;
    vertical-align: top !important;
    height: 25px;
}

.stickieLook + button:hover {
    box-shadow: 0 0 0 4px inset currentColor !important;
}

.stickieLook .tagify__input {
    display: none !important;
}

/* -------------------------------
   7. FullCalendar
-------------------------------- */

:root {
    --fc-button-bg-color: var(--gb-primary);
    --fc-button-border-color: var(--gb-primary);
    --fc-button-hover-bg-color: var(--gb-primary-hover);
    --fc-button-hover-border-color: var(--gb-primary-hover);
}

.fc a {
    color: #80ADAA !important;
    text-decoration: none;
    padding: 5px;
    margin: 5px;
    font-weight: 700;
}

.fc-event {
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fc-h-event {
    border: none;
}

.fc .fc-button {
    font-size: 0.75em;
    margin: 2px;
    border-radius: var(--gb-radius-pill);
}

/* -------------------------------
   8. Form Range
-------------------------------- */

.form-range::-webkit-slider-thumb {
    background-color: var(--gb-primary) !important;
}

.form-range::-moz-range-thumb {
    background-color: var(--gb-primary) !important;
}

.form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px rgba(4, 109, 102, 0.35) !important;
}

.form-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 4px rgba(4, 109, 102, 0.35) !important;
}

/* -------------------------------
   9. Dropdowns
-------------------------------- */

.dropdown-item {
    --bs-dropdown-link-active-bg: var(--gb-primary) !important;
}

/* -------------------------------
   10. Chat / GroBot
-------------------------------- */

.chat-box-widget {
    position: fixed;
    bottom: 150px;
    right: 20px;
    width: 100%;
    max-width: 500px;
    box-shadow: var(--gb-shadow-md);
    display: none;
    border-radius: var(--gb-radius-lg);
    overflow: hidden;
}

.chat-box-widget.show {
    display: block;
}

.message {
    margin-bottom: 10px;
    font-size: 14px;
    box-shadow: var(--gb-shadow-sm);
    padding: 15px;
    border-radius: var(--gb-radius-md);
    background-color: var(--gb-surface);
}

@media (max-width: 576px) {
    .chat-box-widget {
        bottom: 150px;
        right: 10px;
        width: calc(100% - 20px);
    }
}

/* -------------------------------
   11. Support Tab
-------------------------------- */

.support-tab {
    position: fixed;
    left: -55px;
    top: 50%;
    transform: rotate(90deg);
    z-index: 1050;

    background: rgba(25, 135, 84, 0.95);
    color: #FFFFFF;

    padding: 4px 10px;
    border-radius: 12px 12px 0 0;

    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.3px;

    text-decoration: none;
    box-shadow: var(--gb-shadow-md);

    transition: all 0.2s ease;
    backdrop-filter: blur(6px);
}

.support-tab:hover {
    left: -53px;
    background: var(--gb-primary);
    color: #FFFFFF;
}

/* -------------------------------
   12. Dark Mode Plugin Safety
-------------------------------- */

[data-bs-theme="dark"] .message {
    background-color: var(--gb-surface);
}

[data-bs-theme="dark"] .tagify__dropdown {
    background-color: var(--gb-surface);
    color: var(--gb-text);
}

[data-bs-theme="dark"] .fc-theme-standard td,
[data-bs-theme="dark"] .fc-theme-standard th,
[data-bs-theme="dark"] .fc-theme-standard .fc-scrollgrid {
    border-color: var(--gb-border);
}

/* -------------------------------
   Other
-------------------------------- */

[data-bs-theme="dark"] .csvTable {
    color: black;
}

.list-group {
    --bs-list-group-bg: transparent;
}