/**
 * Services Toolbar Core CSS
 *
 * Shared variables and base styles for all toolbar renderers.
 * Renderer-specific styles in floating-toolbar.css, etc.
 */

:root {
    /* Colors */
    --plexa-toolbar-bg: #ffffff;
    --plexa-toolbar-bg-hover: #f3f4f6;
    --plexa-toolbar-border: #e5e7eb;
    --plexa-toolbar-text: #374151;
    --plexa-toolbar-text-muted: #6b7280;
    --plexa-toolbar-accent: #3b82f6;
    --plexa-toolbar-accent-hover: #2563eb;
    --plexa-toolbar-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

    /* Sizing */
    --plexa-toolbar-btn-size: 44px;
    --plexa-toolbar-icon-size: 20px;
    --plexa-toolbar-gap: 8px;
    --plexa-toolbar-padding: 8px;
    --plexa-toolbar-radius: 8px;
    --plexa-toolbar-radius-full: 50%;

    /* Z-index
     * Hierarchy (highest to lowest):
     * - WordPress admin bar: 99999
     * - Plexa editor wrapper: 99998
     * - Services toolbar: 99990
     * - Accessibility panel: 99980
     * - Modal overlays: 99970
     * - Dropdowns/tooltips: 99960
     */
    --plexa-toolbar-z: 99990;

    /* Transitions */
    --plexa-toolbar-transition: 0.2s ease;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        --plexa-toolbar-bg: #1f2937;
        --plexa-toolbar-bg-hover: #374151;
        --plexa-toolbar-border: #374151;
        --plexa-toolbar-text: #e5e7eb;
        --plexa-toolbar-text-muted: #9ca3af;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    :root {
        --plexa-toolbar-transition: 0s;
    }
}

/* Base toolbar container */
.plexa-toolbar {
    position: fixed;
    z-index: var(--plexa-toolbar-z);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 14px;
    line-height: 1.4;
    box-sizing: border-box;
}

.plexa-toolbar *,
.plexa-toolbar *::before,
.plexa-toolbar *::after {
    box-sizing: border-box;
}

/* Toolbar button base */
.plexa-toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--plexa-toolbar-btn-size);
    height: var(--plexa-toolbar-btn-size);
    padding: 0;
    border: none;
    background: var(--plexa-toolbar-bg);
    color: var(--plexa-toolbar-text);
    cursor: pointer;
    transition: background-color var(--plexa-toolbar-transition),
                color var(--plexa-toolbar-transition),
                transform var(--plexa-toolbar-transition);
}

.plexa-toolbar-btn:hover {
    background: var(--plexa-toolbar-bg-hover);
}

.plexa-toolbar-btn:focus {
    outline: 2px solid var(--plexa-toolbar-accent);
    outline-offset: 2px;
}

.plexa-toolbar-btn:focus:not(:focus-visible) {
    outline: none;
}

.plexa-toolbar-btn:focus-visible {
    outline: 2px solid var(--plexa-toolbar-accent);
    outline-offset: 2px;
}

.plexa-toolbar-btn svg {
    width: var(--plexa-toolbar-icon-size);
    height: var(--plexa-toolbar-icon-size);
    flex-shrink: 0;
}

/* Active state */
.plexa-toolbar-btn.is-active {
    background: var(--plexa-toolbar-accent);
    color: white;
}

.plexa-toolbar-btn.is-active:hover {
    background: var(--plexa-toolbar-accent-hover);
}

/* Button label */
.plexa-toolbar-btn-label {
    margin-left: 8px;
    font-size: 13px;
    white-space: nowrap;
}

/* Badge */
.plexa-toolbar-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    color: white;
    background: #ef4444;
    border-radius: 9px;
}

/* Tooltip */
.plexa-toolbar-tooltip {
    position: absolute;
    padding: 6px 10px;
    font-size: 12px;
    white-space: nowrap;
    color: white;
    background: #1f2937;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--plexa-toolbar-transition);
}

.plexa-toolbar-btn:hover .plexa-toolbar-tooltip,
.plexa-toolbar-btn:focus .plexa-toolbar-tooltip {
    opacity: 1;
}

/* Screen reader only */
.plexa-toolbar-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Print styles - hide toolbar */
@media print {
    .plexa-toolbar {
        display: none !important;
    }
}