@charset "UTF-8";

/* ============================================================
   Tooltip Styles
   Shared tooltip component for the application
   ============================================================ */

.app-tooltip {
    position: fixed;
    z-index: 100000;  /* Higher than modal overlays */
    max-width: 300px;
    padding: 10px 14px;
    border-radius: var(--tooltip-radius);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    white-space: normal;
    word-wrap: break-word;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Default variant - dark background */
.app-tooltip--default {
    background: var(--tooltip-bg);
    color: white;
}

/* Ensure all text inside tooltip is white */
.app-tooltip strong,
.app-tooltip b,
.app-tooltip span {
    color: inherit;
}

/* Error variant - red background */
.app-tooltip--error {
    background: var(--status-error);
    color: white;
}

/* Warning variant - amber background */
.app-tooltip--warning {
    background: var(--status-warning);
    color: white;
}

/* Info variant - blue background */
.app-tooltip--info {
    background: var(--status-info);
    color: white;
}

/* Arrow/pointer styling */
.app-tooltip::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 5px solid transparent;
}

/* Top position - arrow points down */
.app-tooltip[data-position="top"]::after {
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: inherit;
}

.app-tooltip--default[data-position="top"]::after {
    border-top-color: var(--tooltip-bg);
}

.app-tooltip--error[data-position="top"]::after {
    border-top-color: var(--status-error);
}

.app-tooltip--warning[data-position="top"]::after {
    border-top-color: var(--status-warning);
}

.app-tooltip--info[data-position="top"]::after {
    border-top-color: var(--status-info);
}

/* Bottom position - arrow points up */
.app-tooltip[data-position="bottom"]::after {
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
}

.app-tooltip--default[data-position="bottom"]::after {
    border-bottom-color: var(--tooltip-bg);
}

.app-tooltip--error[data-position="bottom"]::after {
    border-bottom-color: var(--status-error);
}

.app-tooltip--warning[data-position="bottom"]::after {
    border-bottom-color: var(--status-warning);
}

.app-tooltip--info[data-position="bottom"]::after {
    border-bottom-color: var(--status-info);
}

/* Left position - arrow points right */
.app-tooltip[data-position="left"]::after {
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
}

.app-tooltip--default[data-position="left"]::after {
    border-left-color: var(--tooltip-bg);
}

.app-tooltip--error[data-position="left"]::after {
    border-left-color: var(--status-error);
}

/* Right position - arrow points left */
.app-tooltip[data-position="right"]::after {
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
}

.app-tooltip--default[data-position="right"]::after {
    border-right-color: var(--tooltip-bg);
}

.app-tooltip--error[data-position="right"]::after {
    border-right-color: var(--status-error);
}

/* ============================================================
   Validation Error Label Styling
   Used with Tooltip.setError() for form validation
   ============================================================ */

label.validation-error {
    color: var(--status-error);
}

/* Add subtle indicator that label has tooltip */
label.validation-error::after {
    content: ' *';
    color: var(--status-error);
}