/*!
 * Tippy.js Custom Themes
 * Matches old poshytip styling for PHXPortal
 */

/* ============================================
 * Darkgray Theme (tip-darkgray replacement)
 * ============================================ */
.tippy-box[data-theme~='darkgray'] {
    background-color: #4a4a4a;
    color: #ffffff;
    border-radius: 4px;
    font-size: 12px;
    font-family: Arial, sans-serif;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.tippy-box[data-theme~='darkgray'] > .tippy-arrow::before {
    color: #4a4a4a;
}

.tippy-box[data-theme~='darkgray'] > .tippy-backdrop {
    background-color: #4a4a4a;
}

.tippy-box[data-theme~='darkgray'] > .tippy-content {
    padding: 6px 10px;
}

/* ============================================
 * Light Theme (alternative)
 * ============================================ */
.tippy-box[data-theme~='light'] {
    background-color: #fff;
    color: #26323d;
    border: 1px solid #d0d0d0;
    box-shadow: 0 0 20px 4px rgba(154, 161, 177, 0.15),
                0 4px 80px -8px rgba(36, 40, 47, 0.25),
                0 4px 4px -2px rgba(91, 94, 105, 0.15);
}

.tippy-box[data-theme~='light'] > .tippy-arrow::before {
    color: #fff;
}

.tippy-box[data-theme~='light'] > .tippy-backdrop {
    background-color: #fff;
}

.tippy-box[data-theme~='light'] > .tippy-content {
    padding: 6px 10px;
}

/* ============================================
 * Light Border Theme
 * ============================================ */
.tippy-box[data-theme~='light-border'] {
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 8, 16, 0.15);
    color: #333;
    box-shadow: 0 4px 14px -2px rgba(0, 8, 16, 0.08);
}

.tippy-box[data-theme~='light-border'] > .tippy-arrow::before {
    color: #fff;
}

.tippy-box[data-theme~='light-border'] > .tippy-arrow::after {
    content: '';
    position: absolute;
    z-index: -1;
}

.tippy-box[data-theme~='light-border'] > .tippy-arrow::after {
    border-color: transparent;
    border-style: solid;
}

.tippy-box[data-theme~='light-border'][data-placement^='top'] > .tippy-arrow::before {
    border-top-color: #fff;
}

.tippy-box[data-theme~='light-border'][data-placement^='top'] > .tippy-arrow::after {
    border-top-color: rgba(0, 8, 16, 0.2);
    border-width: 7px 7px 0;
    top: 17px;
    left: 1px;
}

.tippy-box[data-theme~='light-border'][data-placement^='bottom'] > .tippy-arrow::before {
    border-bottom-color: #fff;
    bottom: 16px;
}

.tippy-box[data-theme~='light-border'][data-placement^='bottom'] > .tippy-arrow::after {
    border-bottom-color: rgba(0, 8, 16, 0.2);
    border-width: 0 7px 7px;
    bottom: 17px;
    left: 1px;
}

.tippy-box[data-theme~='light-border'][data-placement^='left'] > .tippy-arrow::before {
    border-left-color: #fff;
}

.tippy-box[data-theme~='light-border'][data-placement^='left'] > .tippy-arrow::after {
    border-left-color: rgba(0, 8, 16, 0.2);
    border-width: 7px 0 7px 7px;
    left: 17px;
    top: 1px;
}

.tippy-box[data-theme~='light-border'][data-placement^='right'] > .tippy-arrow::before {
    border-right-color: #fff;
    right: 16px;
}

.tippy-box[data-theme~='light-border'][data-placement^='right'] > .tippy-arrow::after {
    border-width: 7px 7px 7px 0;
    right: 17px;
    top: 1px;
    border-right-color: rgba(0, 8, 16, 0.2);
}

/* ============================================
 * Global Tippy Adjustments for Grid Tooltips
 * ============================================ */

/* Ensure tooltips appear above Kendo grids */
.tippy-box {
    z-index: 10000 !important;
}

/* Prevent tooltip width from being too narrow in grids */
.k-grid .tippy-box {
    max-width: 300px;
}

/* Ensure text wraps nicely */
.tippy-content {
    word-wrap: break-word;
    overflow-wrap: break-word;
}