/**
 * RSL Popover & Tooltip Styles
 * @version 2.0.0
 */

/* Base Popover Styles */
.rsl-popover,
.rsl-tooltip {
    position: absolute;
    z-index: 1060;
    display: none;
    max-width: 276px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    white-space: normal;
    line-break: auto;
    font-size: 0.875rem;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0.3rem;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
}

.rsl-popover {
    padding: 0;
}

/* Popover Visible State */
.popover-visible {
    opacity: 1;
}

/* Popover Header */
.rsl-popover-header {
    padding: 0.5rem 0.75rem;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #212529;
    background-color: #f0f0f0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    border-top-left-radius: calc(0.3rem - 1px);
    border-top-right-radius: calc(0.3rem - 1px);
}

.rsl-popover-header:empty {
    display: none;
}

/* Popover Body */
.rsl-popover-body {
    padding: 0.75rem;
    color: #212529;
}

/* Tooltip Styles */
.rsl-tooltip {
    max-width: 200px;
    padding: 0.25rem 0.5rem;
    background-color: rgba(0, 0, 0, 0.9);
    color: #fff;
    border: none;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    text-align: center;
}

.rsl-tooltip-inner {
    max-width: 200px;
    padding: 0.25rem 0.5rem;
    color: #fff;
    text-align: center;
}

/* Arrow Styles */
.arrow {
    position: absolute;
    display: block;
    width: 0.8rem;
    height: 0.4rem;
    margin: 0;
}

.arrow::before,
.arrow::after {
    position: absolute;
    display: block;
    content: "";
    border-color: transparent;
    border-style: solid;
}

/* Top Arrow */
.rsl-popover[data-placement^="top"] .arrow,
.arrow.top {
    bottom: calc(-0.4rem - 1px);
}

.rsl-popover[data-placement^="top"] .arrow::before,
.arrow.top::before {
    bottom: 0;
    border-width: 0.4rem 0.4rem 0;
    border-top-color: rgba(0, 0, 0, 0.25);
}

.rsl-popover[data-placement^="top"] .arrow::after,
.arrow.top::after {
    bottom: 1px;
    border-width: 0.4rem 0.4rem 0;
    border-top-color: #fff;
}

/* Bottom Arrow */
.rsl-popover[data-placement^="bottom"] .arrow,
.arrow.bottom {
    top: calc(-0.4rem - 1px);
}

.rsl-popover[data-placement^="bottom"] .arrow::before,
.arrow.bottom::before {
    top: 0;
    border-width: 0 0.4rem 0.4rem;
    border-bottom-color: rgba(0, 0, 0, 0.25);
}

.rsl-popover[data-placement^="bottom"] .arrow::after,
.arrow.bottom::after {
    top: 1px;
    border-width: 0 0.4rem 0.4rem;
    border-bottom-color: #fff;
}

/* Bottom Header Arrow Color */
.rsl-popover[data-placement^="bottom"] .rsl-popover-header::before,
.arrow.bottom.has-header::before {
    border-bottom-color: #f0f0f0;
}

/* Left Arrow */
.rsl-popover[data-placement^="left"] .arrow,
.arrow.left {
    right: calc(-0.4rem - 1px);
    width: 0.4rem;
    height: 0.8rem;
}

.rsl-popover[data-placement^="left"] .arrow::before,
.arrow.left::before {
    right: 0;
    border-width: 0.4rem 0 0.4rem 0.4rem;
    border-left-color: rgba(0, 0, 0, 0.25);
}

.rsl-popover[data-placement^="left"] .arrow::after,
.arrow.left::after {
    right: 1px;
    border-width: 0.4rem 0 0.4rem 0.4rem;
    border-left-color: #fff;
}

/* Right Arrow */
.rsl-popover[data-placement^="right"] .arrow,
.arrow.right {
    left: calc(-0.4rem - 1px);
    width: 0.4rem;
    height: 0.8rem;
}

.rsl-popover[data-placement^="right"] .arrow::before,
.arrow.right::before {
    left: 0;
    border-width: 0.4rem 0.4rem 0.4rem 0;
    border-right-color: rgba(0, 0, 0, 0.25);
}

.rsl-popover[data-placement^="right"] .arrow::after,
.arrow.right::after {
    left: 1px;
    border-width: 0.4rem 0.4rem 0.4rem 0;
    border-right-color: #fff;
}

/* Tooltip Arrows */
.rsl-tooltip .arrow::before {
    border-color: rgba(0, 0, 0, 0.9);
}

.rsl-tooltip[data-placement^="top"] .arrow::before,
.rsl-tooltip .arrow.top::before {
    border-top-color: rgba(0, 0, 0, 0.9);
}

.rsl-tooltip[data-placement^="bottom"] .arrow::before,
.rsl-tooltip .arrow.bottom::before {
    border-bottom-color: rgba(0, 0, 0, 0.9);
}

.rsl-tooltip[data-placement^="left"] .arrow::before,
.rsl-tooltip .arrow.left::before {
    border-left-color: rgba(0, 0, 0, 0.9);
}

.rsl-tooltip[data-placement^="right"] .arrow::before,
.rsl-tooltip .arrow.right::before {
    border-right-color: rgba(0, 0, 0, 0.9);
}

/* Animations */
@keyframes popoverFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes popoverFadeOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.95);
    }
}

.popover-fade {
    animation: popoverFadeIn 0.15s ease-in-out;
}

.popover-scale {
    animation: popoverFadeIn 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Color Variants */
.rsl-popover.popover-primary {
    background-color: #6E7BFF;
    border-color: #6E7BFF;
    color: #fff;
}

.rsl-popover.popover-primary .rsl-popover-header {
    background-color: rgba(0, 0, 0, 0.1);
    border-bottom-color: rgba(0, 0, 0, 0.1);
    color: #fff;
}

.rsl-popover.popover-primary .rsl-popover-body {
    color: #fff;
}

.rsl-popover.popover-primary[data-placement^="top"] .arrow::after,
.rsl-popover.popover-primary[data-placement^="bottom"] .arrow::after,
.rsl-popover.popover-primary[data-placement^="left"] .arrow::after,
.rsl-popover.popover-primary[data-placement^="right"] .arrow::after {
    border-top-color: #6E7BFF;
    border-bottom-color: #6E7BFF;
    border-left-color: #6E7BFF;
    border-right-color: #6E7BFF;
}

.rsl-popover.popover-success {
    background-color: #28a745;
    border-color: #28a745;
    color: #fff;
}

.rsl-popover.popover-success .rsl-popover-header {
    background-color: rgba(0, 0, 0, 0.1);
    border-bottom-color: rgba(0, 0, 0, 0.1);
    color: #fff;
}

.rsl-popover.popover-success .rsl-popover-body {
    color: #fff;
}

.rsl-popover.popover-danger {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #fff;
}

.rsl-popover.popover-danger .rsl-popover-header {
    background-color: rgba(0, 0, 0, 0.1);
    border-bottom-color: rgba(0, 0, 0, 0.1);
    color: #fff;
}

.rsl-popover.popover-danger .rsl-popover-body {
    color: #fff;
}

.rsl-popover.popover-warning {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #fff;
}

.rsl-popover.popover-warning .rsl-popover-header {
    background-color: rgba(0, 0, 0, 0.1);
    border-bottom-color: rgba(0, 0, 0, 0.1);
    color: #fff;
}

.rsl-popover.popover-warning .rsl-popover-body {
    color: #fff;
}

.rsl-popover.popover-info {
    background-color: #17a2b8;
    border-color: #17a2b8;
    color: #fff;
}

.rsl-popover.popover-info .rsl-popover-header {
    background-color: rgba(0, 0, 0, 0.1);
    border-bottom-color: rgba(0, 0, 0, 0.1);
    color: #fff;
}

.rsl-popover.popover-info .rsl-popover-body {
    color: #fff;
}

/* Large Popover */
.rsl-popover-lg {
    max-width: 400px;
}

/* Small Popover */
.rsl-popover-sm {
    max-width: 200px;
}

/* Close Button in Popover */
.rsl-popover .close-popover {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: 0.5;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.rsl-popover .close-popover:hover {
    opacity: 0.75;
}

/* Popover in Dark Theme */
.rsl-popover.popover-dark {
    background-color: #212529;
    border-color: #212529;
    color: #fff;
}

.rsl-popover.popover-dark .rsl-popover-header {
    background-color: rgba(255, 255, 255, 0.1);
    border-bottom-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.rsl-popover.popover-dark .rsl-popover-body {
    color: #fff;
}

.rsl-popover.popover-dark[data-placement^="top"] .arrow::after,
.rsl-popover.popover-dark[data-placement^="bottom"] .arrow::after,
.rsl-popover.popover-dark[data-placement^="left"] .arrow::after,
.rsl-popover.popover-dark[data-placement^="right"] .arrow::after {
    border-top-color: #212529;
    border-bottom-color: #212529;
    border-left-color: #212529;
    border-right-color: #212529;
}

/* Interactive Popover */
.rsl-popover-interactive {
    cursor: default;
}

.rsl-popover-interactive .rsl-popover-body {
    padding: 0.5rem 0.75rem;
}

/* Dark Mode Support for Color Variants */
[data-theme="dark"] .rsl-popover.popover-primary {
    background-color: #6E7BFF !important;
    border-color: #6E7BFF !important;
    color: #fff !important;
}

[data-theme="dark"] .rsl-popover.popover-primary .rsl-popover-header {
    background-color: rgba(0, 0, 0, 0.1) !important;
    border-bottom-color: rgba(0, 0, 0, 0.1) !important;
    color: #fff !important;
}

[data-theme="dark"] .rsl-popover.popover-primary .rsl-popover-body {
    color: #fff !important;
}

[data-theme="dark"] .rsl-popover.popover-success {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
    color: #fff !important;
}

[data-theme="dark"] .rsl-popover.popover-success .rsl-popover-header {
    background-color: rgba(0, 0, 0, 0.1) !important;
    border-bottom-color: rgba(0, 0, 0, 0.1) !important;
    color: #fff !important;
}

[data-theme="dark"] .rsl-popover.popover-success .rsl-popover-body {
    color: #fff !important;
}

[data-theme="dark"] .rsl-popover.popover-danger {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #fff !important;
}

[data-theme="dark"] .rsl-popover.popover-danger .rsl-popover-header {
    background-color: rgba(0, 0, 0, 0.1) !important;
    border-bottom-color: rgba(0, 0, 0, 0.1) !important;
    color: #fff !important;
}

[data-theme="dark"] .rsl-popover.popover-danger .rsl-popover-body {
    color: #fff !important;
}

[data-theme="dark"] .rsl-popover.popover-warning {
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
    color: #fff !important;
}

[data-theme="dark"] .rsl-popover.popover-warning .rsl-popover-header {
    background-color: rgba(0, 0, 0, 0.1) !important;
    border-bottom-color: rgba(0, 0, 0, 0.1) !important;
    color: #fff !important;
}

[data-theme="dark"] .rsl-popover.popover-warning .rsl-popover-body {
    color: #fff !important;
}

[data-theme="dark"] .rsl-popover.popover-info {
    background-color: #17a2b8 !important;
    border-color: #17a2b8 !important;
    color: #fff !important;
}

[data-theme="dark"] .rsl-popover.popover-info .rsl-popover-header {
    background-color: rgba(0, 0, 0, 0.1) !important;
    border-bottom-color: rgba(0, 0, 0, 0.1) !important;
    color: #fff !important;
}

[data-theme="dark"] .rsl-popover.popover-info .rsl-popover-body {
    color: #fff !important;
}

/* Responsive */
@media (max-width: 576px) {
    .rsl-popover,
    .rsl-popover-lg {
        max-width: 90vw;
    }
}