[data-controller="popover"], [data-controller="popover"]:hover {
    position: relative !important;
}

[data-popover-target="card"] {
    position: absolute;
    z-index: 1001;
    background: white;
    border: 1px solid var(--cibor-gray);
    padding: 8px;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

[data-popover-target="card"][data-color="dark"] {
    background: var(--cibor-toast-background);
    border: none;
    color: white;
}

[data-popover-target="card"]::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
}

/* Default position: top */
[data-popover-target="card"]:not([data-position]) {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
}
[data-popover-target="card"]:not([data-position])::before {
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px 6px 0 6px;
    border-color: var(--cibor-gray) transparent transparent transparent;
}

/* Position: right */
[data-popover-target="card"][data-position="right"] {
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 8px;
}
[data-popover-target="card"][data-position="right"]::before {
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 6px 6px 6px 0;
    border-color: transparent var(--cibor-gray) transparent transparent;
}

/* Position: left */
[data-popover-target="card"][data-position="left"] {
    right: 100% !important;
    top: 50% !important;
    transform: translateY(-50%);
    margin-right: 8px;
}
[data-popover-target="card"][data-position="left"]::before {
    right: -6px !important;
    top: 50% !important;
    transform: translateY(-50%);
    border-width: 6px 0 6px 6px;
    border-color: transparent transparent transparent var(--cibor-gray);
}

/* Position: top */
[data-popover-target="card"][data-position="top"] {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
}
[data-popover-target="card"][data-position="top"]::before {
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px 6px 0 6px;
    border-color: var(--cibor-gray) transparent transparent transparent;
}

/* Position: bottom */
[data-popover-target="card"][data-position="bottom"] {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
}
[data-popover-target="card"][data-position="bottom"]::before {
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 6px 6px 6px;
    border-color: transparent transparent var(--cibor-gray) transparent;
}

/* Dark mode arrow for all positions */
[data-popover-target="card"][data-color="dark"]::before {
    border-color: var(--cibor-toast-background) transparent transparent transparent;
}
[data-popover-target="card"][data-color="dark"][data-position="right"]::before {
    border-color: transparent var(--cibor-toast-background) transparent transparent;
}
[data-popover-target="card"][data-color="dark"][data-position="left"]::before {
    border-color: transparent transparent transparent var(--cibor-toast-background);
}
[data-popover-target="card"][data-color="dark"][data-position="top"]::before {
    border-color: var(--cibor-toast-background) transparent transparent transparent;
}
[data-popover-target="card"][data-color="dark"][data-position="bottom"]::before {
    border-color: transparent transparent var(--cibor-toast-background) transparent;
}

.cibor-popover {
    position: absolute;
    z-index: 1000;
    border: 1px solid var(--cibor-gray-light);
    border-radius: 5px;
    background-color: white;
    filter: brightness(100%);
}

.cibor-popover-title {
    font-weight: bold;
    color: var(--cibor-blue);
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    background-color: var(--cibor-gray-extra-light);
    padding-top: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--cibor-gray-light);
}

.cibor-popover-content {
    padding: 2px;
    text-align: left;
}

.popover-group {
    z-index: 1000;
}