/**
 * Volley Hub Pro - BUTTON MICRO LABELS
 * ---------------------------------------------------------------------------
 * Small captions under the icon-only toolbar buttons ("Home", "Bracket",
 * "Replay", ...) so it is clear what each one does without opening the app
 * documentation.
 *
 * HOW IT WORKS
 *  - button-labels.js marks the buttons with `data-label` + `.btn-labelled`;
 *    this file only styles the caption (drawn INSIDE the button, so nothing
 *    outside the toolbar shifts).
 *  - Everything is gated by `html:not(.btn-labels-off)`: with the labels
 *    switched off, not a single rule here applies and the UI is exactly the
 *    original one.
 *
 * INCLUDED ONLY BY index.html. To remove the feature:
 *   1. delete button-labels.css and button-labels.js
 *   2. delete the two marked lines in index.html
 *   (or just press the 🏷 chip in the toolbar to hide them in-app)
 */

/* --- label layout --- */
html:not(.btn-labels-off) .btn-labelled {
    flex-direction: column !important;
    gap: 1px !important;
    height: auto !important;
    min-height: 40px;
    padding: 5px 8px 4px !important;
    line-height: 1 !important;
}

html:not(.btn-labels-off) .btn-labelled::after {
    content: attr(data-label);
    display: block;
    font-size: 0.46rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.58);
    white-space: nowrap;
    pointer-events: none;
}

/* Grouped controls (the split camera pill) must be allowed to grow. */
html:not(.btn-labels-off) .cam-split-btn.has-btn-labels {
    height: auto !important;
    overflow: visible !important;
}

html:not(.btn-labels-off) .cam-split-btn .btn-labelled {
    min-height: 38px;
    padding: 5px 7px 4px !important;
}

html:not(.btn-labels-off) .cam-split-btn .btn-labelled::after {
    font-size: 0.42rem;
}

/* Round / tall buttons keep a compact shape while growing just enough. */
html:not(.btn-labels-off) .toggle-stats-btn.btn-labelled {
    width: auto !important;
    min-width: 44px;
    height: auto !important;
    padding: 8px 6px !important;
}

/* --- accents, using the app palette --- */
html:not(.btn-labels-off) .btn-rotate-a.btn-labelled::after {
    color: var(--primary);
}

html:not(.btn-labels-off) .btn-rotate-b.btn-labelled::after {
    color: var(--secondary);
}

html:not(.btn-labels-off) .controls-row > .btn-icon[onclick="resetAll()"].btn-labelled::after {
    color: rgba(255, 90, 120, 0.92);
}

html:not(.btn-labels-off) .btn-pro-export.btn-labelled::after {
    color: rgba(0, 0, 0, 0.72);
}

/* A button that is currently ON (cyan background) needs dark text. */
html:not(.btn-labels-off) .btn-labelled.active::after {
    color: rgba(0, 0, 0, 0.72);
}

/* --- very small phones: keep the captions from widening the rows --- */
@media (max-width: 380px) {
    html:not(.btn-labels-off) .btn-labelled {
        padding: 4px 5px 3px !important;
        min-height: 36px;
    }

    html:not(.btn-labels-off) .btn-labelled::after {
        font-size: 0.4rem;
    }

    html:not(.btn-labels-off) .cam-split-btn .btn-labelled {
        min-height: 34px;
        padding: 4px 5px 3px !important;
    }
}

/* --- the small "Labels" chip itself --- */
html:not(.btn-labels-off) .btn-label-toggle {
    opacity: 0.92;
}