/**
 * TLB Tool Wrapper Overrides
 *
 * Adapts CdS ferramenta.css visual (green/aquarismo) to TLB theme (blue/technical).
 * Loaded AFTER ferramenta.css + tool-specific CSS + tlb-theme.css.
 *
 * Uses --diario-* variables already overridden by tlb-theme.css.
 *
 * @since 2026-03-13
 */

/* ============================================================================
   LAYOUT — Remove CdS site chrome that doesn't apply in TLB context
   ============================================================================ */

/* CdS header/footer elements that leak into tool views */
.ferramenta-header-site,
.site-footer-ferramenta,
.tool-access-guard-overlay {
    display: none !important;
}

/* CdS views wrap tool content in .protected-div-tool-access — force visible in TLB */
.protected-div-tool-access {
    display: block !important;
}

/* ============================================================================
   BREADCRUMB — Override CdS animated gradient with TLB clean technical style
   ============================================================================ */

/* Kill CdS purple gradient + animation — use TLB blue flat style */
.breadcrumb,
.breadcrumb-tool {
    background: linear-gradient(135deg, #1565c0 0%, #1976d2 100%);
    background-size: 100% 100%;
    border: none;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(21, 101, 192, 0.15);
    animation: none;
    padding: 10px 18px;
    margin-bottom: 16px;
    font-size: 0.9rem;
    min-height: 42px;
    gap: 0;
}

/* Links — clean white, no pill bg unless hover */
.breadcrumb-home,
.breadcrumb-canal,
.breadcrumb-item {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.88rem;
    color: rgba(255,255,255,0.9);
}

.breadcrumb-home:hover,
.breadcrumb-canal:hover,
.breadcrumb-item:hover {
    color: #fff;
    background: rgba(255,255,255,0.15);
}

/* Current page — subtle white badge */
.breadcrumb-current,
.breadcrumb-item.current {
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 6px;
    padding: 4px 12px;
    font-weight: 600;
    font-size: 0.88rem;
    color: #fff;
    box-shadow: none;
}

/* Separator — lighter, tighter */
.breadcrumb-separator {
    color: rgba(255,255,255,0.5);
    margin: 0 4px;
    font-size: 0.95rem;
}

/* Icons — slightly smaller */
.breadcrumb-icon,
.breadcrumb-canal-icon {
    font-size: 1.1rem;
    margin-right: 5px;
}

/* Text — thinner weight */
.breadcrumb-text {
    font-weight: 500;
}

/* Mobile breadcrumb */
@media (max-width: 600px) {
    .breadcrumb,
    .breadcrumb-tool {
        font-size: 0.82rem;
        padding: 7px 10px;
        border-radius: 6px;
        min-height: 34px;
    }
    .breadcrumb-home,
    .breadcrumb-canal,
    .breadcrumb-current,
    .breadcrumb-item {
        padding: 3px 6px;
        border-radius: 4px;
        font-size: 0.8rem;
    }
    .breadcrumb-icon,
    .breadcrumb-canal-icon {
        font-size: 1rem;
        margin-right: 3px;
    }
    .breadcrumb-separator {
        margin: 0 2px;
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .breadcrumb,
    .breadcrumb-tool {
        font-size: 0.76rem;
        padding: 5px 8px;
    }
}

/* ============================================================================
   TOOL INTERFACE — Clean integration with TLB card system
   ============================================================================ */

.tool-interface {
    max-width: 960px;
    margin: 0 auto;
}

/* CdS result cards — match TLB card style */
.tool-interface .result-card,
.tool-interface .card {
    border-radius: var(--diario-radius, 6px);
    border: 1px solid var(--diario-border, #e0e0e0);
    box-shadow: var(--diario-shadow, 0 1px 3px rgba(0,0,0,0.12));
}

/* CdS primary buttons — use TLB blue instead of CdS green */
.tool-interface .btn-success,
.tool-interface .btn-primary {
    background-color: var(--diario-primary, #1565c0);
    border-color: var(--diario-primary, #1565c0);
}

.tool-interface .btn-success:hover,
.tool-interface .btn-primary:hover {
    background-color: var(--diario-primary-light, #1e88e5);
    border-color: var(--diario-primary-light, #1e88e5);
}

/* CdS outline buttons */
.tool-interface .btn-outline-success {
    color: var(--diario-primary, #1565c0);
    border-color: var(--diario-primary, #1565c0);
}

.tool-interface .btn-outline-success:hover {
    background-color: var(--diario-primary, #1565c0);
    border-color: var(--diario-primary, #1565c0);
    color: #fff;
}

/* ============================================================================
   FORM ELEMENTS — Technical data-entry feel
   ============================================================================ */

/* Input fields — slightly tighter, monospace for numeric inputs */
.tool-interface input[type="number"],
.tool-interface input[type="text"].measurement-input,
.tool-interface .param-input {
    font-family: var(--diario-font-data, 'JetBrains Mono', monospace);
    font-size: 0.95rem;
}

/* Select dropdowns — match TLB style */
.tool-interface select.form-select,
.tool-interface select.form-control {
    border-radius: var(--diario-radius, 6px);
}

/* ============================================================================
   TOOLTIPS & POPOVERS — Ensure visibility over TLB layout
   ============================================================================ */

.tool-interface .tooltip-container,
.tool-interface [data-tooltip],
.tool-interface .info-tooltip {
    z-index: 1050;
}

/* CdS tooltip styling — neutral for TLB */
.tool-interface .tooltip-text,
.tool-interface .tooltip-content {
    background: #333;
    color: #fff;
    border-radius: 4px;
    font-size: 0.85rem;
    max-width: 300px;
}

/* ============================================================================
   WATER TYPE BUTTONS — Neutral style (CdS uses green active state)
   ============================================================================ */

.tool-interface .water-type-btn.active,
.tool-interface .btn-water-type.active,
.tool-interface [data-water-type].active {
    background-color: var(--diario-primary, #1565c0);
    border-color: var(--diario-primary, #1565c0);
    color: #fff;
}

/* ============================================================================
   RESULT AREAS — Clean display
   ============================================================================ */

.tool-interface #result-area,
.tool-interface [data-result-container] {
    border-radius: var(--diario-radius, 6px);
}

/* ============================================================================
   RESPONSIVE — Mobile adjustments
   ============================================================================ */

@media (max-width: 768px) {
    .tool-interface {
        padding: 0 0.25rem;
    }

    .tool-interface .card {
        border-radius: 4px;
    }
}