/* =============================================================================
   Tooltips & Popovers - shadcn-inspired Components
   =============================================================================

   Modern, accessible tooltip and popover components following shadcn/ui design
   philosophy adapted for Bootstrap 5.

   Related: specs/context/style-guide.md Section 4.9
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Tooltips - Simple, text-only contextual help
   ----------------------------------------------------------------------------- */

.tooltip {
    /* Override Bootstrap defaults with shadcn-inspired values */
    --bs-tooltip-bg: var(--foreground, hsl(222 84% 5%));
    --bs-tooltip-color: var(--background, hsl(0 0% 100%));
    --bs-tooltip-max-width: 280px;
    --bs-tooltip-padding-x: 0.75rem;
    --bs-tooltip-padding-y: 0.375rem;
    --bs-tooltip-font-size: 0.875rem;
    --bs-tooltip-border-radius: 0.375rem;

    font-family: var(--font-sans, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
    font-weight: 500;
    line-height: 1.4;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1),
                0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.tooltip-inner {
    background-color: var(--bs-tooltip-bg);
    color: var(--bs-tooltip-color);
    border-radius: var(--bs-tooltip-border-radius);
    padding: var(--bs-tooltip-padding-y) var(--bs-tooltip-padding-x);
    text-align: left;
}

/* Tooltip arrows - ensure they match the inverted background */
.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
    border-top-color: var(--bs-tooltip-bg);
}

.bs-tooltip-end .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
    border-right-color: var(--bs-tooltip-bg);
}

.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
    border-bottom-color: var(--bs-tooltip-bg);
}

.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
    border-left-color: var(--bs-tooltip-bg);
}

/* -----------------------------------------------------------------------------
   Popovers - Rich content containers with actions
   ----------------------------------------------------------------------------- */

.popover {
    /* Override Bootstrap defaults with shadcn-inspired values */
    --bs-popover-max-width: 320px;
    --bs-popover-border-color: var(--border, hsl(214 32% 91%));
    --bs-popover-border-radius: 0.5rem;
    --bs-popover-bg: var(--popover, hsl(0 0% 100%));
    --bs-popover-body-color: var(--popover-foreground, hsl(222 84% 5%));
    --bs-popover-header-bg: var(--popover, hsl(0 0% 100%));
    --bs-popover-header-color: var(--popover-foreground, hsl(222 84% 5%));

    font-family: var(--font-sans, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1),
                0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--bs-popover-border-color);

    /* Animation removed - Bootstrap's .fade class handles transition after positioning */
    /* This prevents the flash at (0,0) before Popper.js calculates correct position */
}

/* Popover header */
.popover-header {
    background-color: var(--bs-popover-header-bg);
    color: var(--bs-popover-header-color);
    border-bottom: 1px solid var(--bs-popover-border-color);
    padding: 0.75rem 1rem;
    font-weight: 600;
    font-size: 0.9375rem;
}

/* Custom header with close button layout */
.popover-header-custom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.popover-header-custom .btn-close {
    padding: 0.25rem;
    margin: -0.25rem -0.25rem -0.25rem 0;
    opacity: 0.5;
    transition: opacity 0.15s ease;
}

.popover-header-custom .btn-close:hover {
    opacity: 1;
}

/* Popover body */
.popover-body {
    padding: 1rem;
    color: var(--bs-popover-body-color);
    font-size: 0.875rem;
    line-height: 1.6;
}

/* Popover body content structure */
.popover-body-content p {
    margin-bottom: 0.5rem;
}

.popover-body-content p:last-child {
    margin-bottom: 0;
}

.popover-body-content ul,
.popover-body-content ol {
    padding-left: 1.25rem;
    margin-bottom: 0.5rem;
}

.popover-body-content ul:last-child,
.popover-body-content ol:last-child {
    margin-bottom: 0;
}

.popover-body-content li {
    margin-bottom: 0.25rem;
}

.popover-body-content li:last-child {
    margin-bottom: 0;
}

.popover-body-content .btn {
    margin-top: 0.5rem;
}

.popover-body-content code {
    background-color: var(--muted, hsl(210 40% 96%));
    color: var(--muted-foreground, hsl(215 16% 47%));
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.8125rem;
}

/* Popover arrows */
.bs-popover-top > .popover-arrow::before,
.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::before,
.bs-popover-top > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after {
    border-top-color: var(--bs-popover-border-color);
}

.bs-popover-top > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after {
    border-top-color: var(--bs-popover-bg);
}

.bs-popover-end > .popover-arrow::before,
.bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::before,
.bs-popover-end > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::after {
    border-right-color: var(--bs-popover-border-color);
}

.bs-popover-end > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::after {
    border-right-color: var(--bs-popover-bg);
}

.bs-popover-bottom > .popover-arrow::before,
.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::before,
.bs-popover-bottom > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after {
    border-bottom-color: var(--bs-popover-border-color);
}

.bs-popover-bottom > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after {
    border-bottom-color: var(--bs-popover-bg);
}

.bs-popover-start > .popover-arrow::before,
.bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::before,
.bs-popover-start > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::after {
    border-left-color: var(--bs-popover-border-color);
}

.bs-popover-start > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::after {
    border-left-color: var(--bs-popover-bg);
}

/* -----------------------------------------------------------------------------
   Popover Variants
   ----------------------------------------------------------------------------- */

/* Warning popover */
.popover.popover-warning {
    --bs-popover-border-color: var(--warning, hsl(48 96% 51%));
}

.popover.popover-warning .popover-header {
    background-color: color-mix(in srgb, var(--warning, hsl(48 96% 51%)), white 90%);
    border-bottom-color: var(--bs-popover-border-color);
}

/* Info popover */
.popover.popover-info {
    --bs-popover-border-color: var(--info, hsl(200 95% 45%));
}

.popover.popover-info .popover-header {
    background-color: color-mix(in srgb, var(--info, hsl(200 95% 45%)), white 90%);
    border-bottom-color: var(--bs-popover-border-color);
}

/* Danger/Error popover */
.popover.popover-danger,
.popover.popover-error {
    --bs-popover-border-color: var(--destructive, hsl(0 84% 60%));
}

.popover.popover-danger .popover-header,
.popover.popover-error .popover-header {
    background-color: color-mix(in srgb, var(--destructive, hsl(0 84% 60%)), white 90%);
    border-bottom-color: var(--bs-popover-border-color);
}

/* Success popover */
.popover.popover-success {
    --bs-popover-border-color: var(--success, hsl(142 76% 36%));
}

.popover.popover-success .popover-header {
    background-color: color-mix(in srgb, var(--success, hsl(142 76% 36%)), white 90%);
    border-bottom-color: var(--bs-popover-border-color);
}

/* -----------------------------------------------------------------------------
   Responsive adjustments
   ----------------------------------------------------------------------------- */

@media (max-width: 576px) {
    .popover {
        --bs-popover-max-width: calc(100vw - 2rem);
    }

    .tooltip {
        --bs-tooltip-max-width: calc(100vw - 2rem);
    }
}