/*
ITPlatform Tools - DNS Lookup
Tool-specific CSS overrides

Ce fichier contient uniquement les styles non couverts par base.css V2 :
- Disposition colonne de la section interface (domaine + boutons type)
- Groupe boutons type DNS (.dns-type-btn)
- Groupe boutons d'action (Analyser + Réinitialiser en ligne)
- Style de la cellule "type" dans .tool-result (override white-space)
*/

/* ============================================================
   Ligne domaine + type : disposition colonne
   ============================================================ */

.dns-input-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.dns-input-row .field-group {
    margin-bottom: 0;
}

/* ============================================================
   Boutons de sélection du type d'enregistrement DNS
   ============================================================ */

.dns-type-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.dns-type-btn {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 600;
    padding: 7px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background var(--transition-fast),
                border-color var(--transition-fast),
                color var(--transition-fast);
    line-height: 1;
    letter-spacing: 0.02em;
}

.dns-type-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-light);
}

.dns-type-btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.dns-type-btn.active:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

/* ============================================================
   Groupe de boutons d'action
   ============================================================ */

.action-row {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-xl);
    align-items: center;
}

/* ============================================================
   Section résultat : override white-space de .tool-result
   Le framework met white-space: pre-wrap sur .tool-result,
   ce qui casse les tableaux HTML. On reset ici.
   ============================================================ */

#result-section {
    white-space: normal;
    font-family: var(--font-sans);
}

/* ============================================================
   En-tête du bloc résultat
   ============================================================ */

.result-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-lg);
}

.result-section-header h2 {
    margin: 0;
    font-size: var(--text-xl);
}

/* ============================================================
   Responsive — mobile (< 600px)
   ============================================================ */

@media (max-width: 600px) {
    .action-row {
        flex-direction: column;
        align-items: stretch;
    }

    .action-row .tool-button {
        width: 100%;
        justify-content: center;
    }
}