/* ================================================================
   3D LABELS — CSS2DRenderer Overlay Styles
   ================================================================

   Estilos para labels 3D renderizadas via CSS2DRenderer do Three.js.
   Labels sao elementos DOM posicionados sobre o canvas WebGL,
   sempre viradas para a camera (billboard).

   Categorias:
   - .label-3d-name   — nome do elemento (poço, pluma, etc.)
   - .label-3d-obs    — valor da última observação
   - .label-3d-geo    — nome da camada geológica (litologia)
   - .label-3d-title  — título do modelo

   ================================================================ */

/* ---- Base ---- */
.label-3d {
    pointer-events: none;
    white-space: nowrap;
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    line-height: 1.2;
    font-size: 11px;
    font-family: system-ui, -apple-system, sans-serif;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.65);
    text-shadow:
        0 0 3px rgba(0, 0, 0, 0.9),
        0 1px 2px rgba(0, 0, 0, 0.7);
    -webkit-user-select: none;
    user-select: none;
}

/* ---- Element Name ---- */
.label-3d-name {
    font-weight: 600;
    font-size: var(--text-xs, 10px);
    letter-spacing: 0.3px;
    text-transform: capitalize;
}

/* ---- Observation Value ---- */
.label-3d-obs {
    font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;
    font-size: var(--text-xs, 10px);
    color: #7dffb3;
    background: rgba(0, 0, 0, 0.55);
    padding: 1px 4px;
}

/* ---- Geology Layer ---- */
.label-3d-geo {
    font-size: var(--text-xs, 10px);
    font-style: italic;
    border-left: 2px solid currentColor;
    padding-left: 4px;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0.85;
}

/* ---- Model Title ---- */
.label-3d-title {
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.5px;
    background: rgba(0, 0, 0, 0.35);
    padding: 3px 10px;
    border-radius: 3px;
}

/* ---- Hidden (LOD culling) ---- */
.label-3d-hidden {
    display: none !important;
}

/* ================================================================
   LABEL SETTINGS MODAL
   ================================================================ */

/* Global toggle */
.label-settings-global {
    padding: 8px 0 12px;
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.1));
    margin-bottom: 12px;
}

.label-toggle-row {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}

.label-toggle-text {
    color: var(--text-primary, #e0e0e0);
}

/* Category card */
.label-category-card {
    border: 1px solid var(--border-color, rgba(255,255,255,0.1));
    border-radius: var(--radius-lg);
    margin-bottom: 8px;
    overflow: hidden;
    background: var(--surface-secondary, rgba(255,255,255,0.03));
}

.label-category-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: background 0.15s;
}

.label-category-header:hover {
    background: var(--surface-hover, rgba(255,255,255,0.06));
}

.label-category-icon {
    display: flex;
    align-items: center;
    opacity: 0.7;
}

.label-category-icon svg {
    width: 16px;
    height: 16px;
}

.label-category-name {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #e0e0e0);
}

.label-category-toggle {
    display: flex;
    align-items: center;
}

/* Category body (settings) */
.label-category-body {
    padding: 8px 12px 12px;
    border-top: 1px solid var(--border-color, rgba(255,255,255,0.08));
}

/* Setting row */
.label-setting-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--text-secondary, #aaa);
}

.label-setting-row label {
    min-width: 80px;
    flex-shrink: 0;
}

.label-setting-row input[type="range"] {
    flex: 1;
    max-width: 120px;
    accent-color: var(--accent-color, #4a90d9);
}

.label-setting-row input[type="color"] {
    width: 28px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--border-color, rgba(255,255,255,0.15));
    border-radius: 3px;
    cursor: pointer;
    background: transparent;
}

.label-setting-row input[type="text"],
.label-setting-row select {
    flex: 1;
    padding: 4px 8px;
    font-size: 12px;
    border: 1px solid var(--border-color, rgba(255,255,255,0.15));
    border-radius: 3px;
    background: var(--input-bg, rgba(0,0,0,0.2));
    color: var(--text-primary, #e0e0e0);
}

.label-setting-value {
    min-width: 35px;
    text-align: right;
    font-family: monospace;
    font-size: 11px;
    opacity: 0.8;
}

.label-color-options {
    display: flex;
    align-items: center;
    gap: 8px;
}

.label-color-options label {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: auto;
    cursor: pointer;
}

/* Footer */
.label-settings-footer {
    padding: 12px 0 4px;
    border-top: 1px solid var(--border-color, rgba(255,255,255,0.1));
    margin-top: 8px;
    text-align: right;
}

.label-settings-footer .btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.label-settings-footer .btn svg {
    width: 14px;
    height: 14px;
}