/* ============================================================
   ITPlatform Tools — Design System V2
   ============================================================

   Positionnement : infrastructure, DNS, securite, audit.
   Public : sysadmins, DevOps, profils techniques.
   Ton visuel : sobre, precis, professionnel. Pas startup.

   Choix visuels :
   - Fond blanc casse (#fafafa) pour reposer l'oeil sur des contenus denses
   - Bleu infrastructure (#1a56db) : serieux, confiance, technique
   - Monospace systematique pour les sorties techniques
   - Bordures fines, radius modere (6px) : net sans etre arrondi
   - Hierarchy claire : header > interface > result > explication
   - Alertes a bord gauche epais : reperage rapide dans un audit
   - Spacing genereux entre sections (48px) pour respirer
   - Pas d'animations lourdes, juste des transitions de 150ms

   Structure :
   1. Variables CSS
   2. Reset / Base
   3. Layout (container, sections)
   4. Typography
   5. Buttons
   6. Inputs / Select / Textarea
   7. Field groups & labels
   8. Dynamic lists
   9. Checkbox & radio groups
   10. Tabs / Mode switcher
   11. Result display
   12. Alerts (success, warning, error, info)
   13. Status banners
   14. Badges
   15. Tables
   16. Code inline
   17. Findings / Report sections
   18. Learn link
   19. Context meta
   20. Responsive
   ============================================================ */


/* ============================================================
   1. VARIABLES CSS
   ============================================================ */

:root {
  /* --- Couleurs principales --- */
  --color-primary:        #1a56db;
  --color-primary-hover:  #1347b8;
  --color-primary-light:  #e8f0fe;

  --color-text:           #1a1a1a;
  --color-text-secondary: #555;
  --color-text-muted:     #666;
  --color-text-faint:     #999;

  --color-bg:             #ffffff;
  --color-bg-subtle:      #fafafa;
  --color-bg-muted:       #f3f4f6;
  --color-bg-interface:   #f7f8fa;

  --color-border:         #d1d5db;
  --color-border-light:   #e5e7eb;
  --color-border-focus:   var(--color-primary);

  /* --- Couleurs semantiques --- */
  --color-success:        #0f7b3f;
  --color-success-bg:     #ecfdf5;
  --color-success-border: #a7f3d0;

  --color-warning:        #92400e;
  --color-warning-bg:     #fffbeb;
  --color-warning-border: #fde68a;

  --color-error:          #991b1b;
  --color-error-bg:       #fef2f2;
  --color-error-border:   #fecaca;

  --color-info:           #1e40af;
  --color-info-bg:        #eff6ff;
  --color-info-border:    #bfdbfe;

  /* --- Couleurs boutons --- */
  --color-secondary:      #4b5563;
  --color-secondary-hover:#374151;

  --color-danger:         #dc2626;
  --color-danger-hover:   #b91c1c;

  --color-copied:         #16a34a;
  --color-copied-hover:   #15803d;

  /* --- Typography --- */
  --font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:  "SFMono-Regular", Consolas, "Liberation Mono", Menlo, "Courier New", monospace;

  --text-xs:    12px;
  --text-sm:    13px;
  --text-base:  14px;
  --text-md:    15px;
  --text-lg:    16px;
  --text-xl:    20px;
  --text-2xl:   26px;

  --leading-tight:  1.3;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;

  /* --- Spacing --- */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   12px;
  --space-base: 16px;
  --space-lg:   20px;
  --space-xl:   24px;
  --space-2xl:  32px;
  --space-3xl:  48px;

  /* --- Radius --- */
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  8px;

  /* --- Transitions --- */
  --transition-fast: 150ms ease;
}


/* ============================================================
   2. RESET / BASE
   ============================================================ */

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

.tool-container *:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}


/* ============================================================
   3. LAYOUT — Container & sections
   ============================================================ */

.tool-container {
  max-width: 880px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
}

.tool-interface,
.tool-result,
.tool-explanation,
.tool-best-practices,
.tool-related,
.tool-context {
  margin-bottom: var(--space-3xl);
}

.tool-interface {
  background: var(--color-bg-interface);
  padding: var(--space-xl);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
}

.tool-result {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  white-space: pre-wrap;
  overflow-x: auto;
}


/* ============================================================
   4. TYPOGRAPHY
   ============================================================ */

.tool-header {
  margin-bottom: var(--space-2xl);
}

.tool-header h1 {
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-sm) 0;
  color: var(--color-text);
}

.tool-subtitle {
  font-size: var(--text-md);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: var(--leading-normal);
}

.tool-container h2 {
  font-size: var(--text-xl);
  font-weight: 600;
  margin: 0 0 var(--space-base) 0;
  color: var(--color-text);
}

.tool-container h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 var(--space-md) 0;
  color: var(--color-text);
}

.tool-container h4 {
  font-size: var(--text-lg);
  font-weight: 600;
  margin: var(--space-xl) 0 var(--space-md) 0;
  color: var(--color-text);
}

.tool-container p {
  margin: 0 0 var(--space-base) 0;
  line-height: var(--leading-relaxed);
}

.tool-container ul {
  margin: 0 0 var(--space-base) 0;
  padding-left: var(--space-xl);
}

.tool-container li {
  margin-bottom: var(--space-sm);
  line-height: var(--leading-relaxed);
}

.tool-best-practices li {
  padding-left: var(--space-xs);
}


/* ============================================================
   5. BUTTONS
   ============================================================ */

/* --- Primary --- */
.tool-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px 18px;
  background: var(--color-primary);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.tool-button:hover {
  background: var(--color-primary-hover);
}

.tool-button:active {
  transform: translateY(1px);
}

/* --- Secondary (grey) --- */
.tool-button.secondary {
  background: var(--color-secondary);
}

.tool-button.secondary:hover {
  background: var(--color-secondary-hover);
}

/* --- Danger (red, for remove buttons) --- */
.tool-button.danger {
  background: var(--color-danger);
}

.tool-button.danger:hover {
  background: var(--color-danger-hover);
}

/* --- Small variant --- */
.tool-button.small {
  padding: 6px 12px;
  font-size: var(--text-sm);
}

/* --- Copied state (for copy buttons) --- */
.tool-button.copied,
.copy-button.copied {
  background: var(--color-copied);
}

.tool-button.copied:hover,
.copy-button.copied:hover {
  background: var(--color-copied-hover);
}

/* --- Copy button alias --- */
.copy-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 6px 14px;
  background: var(--color-secondary);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: background var(--transition-fast);
}

.copy-button:hover {
  background: var(--color-secondary-hover);
}


/* ============================================================
   6. INPUTS / SELECT / TEXTAREA
   ============================================================ */

.tool-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.tool-input:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.12);
}

.tool-input::placeholder {
  color: var(--color-text-faint);
}

/* Error state */
.tool-input.error {
  border-color: var(--color-danger);
  background: var(--color-error-bg);
}

.tool-input.error:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

/* Select */
select.tool-input {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Textarea */
textarea.tool-input {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  resize: vertical;
  min-height: 120px;
}

/* Number input monospace */
input[type="number"].tool-input {
  font-family: var(--font-mono);
}

/* Input inside .tool-interface — remove bottom margin (field-group handles it) */
.tool-interface .tool-input {
  margin-bottom: 0;
}


/* ============================================================
   7. FIELD GROUPS & LABELS
   ============================================================ */

.field-group {
  margin-bottom: var(--space-xl);
}

.field-group:last-child {
  margin-bottom: 0;
}

.field-group label {
  display: block;
  font-weight: 500;
  font-size: var(--text-base);
  color: var(--color-text);
  margin-bottom: 6px;
}

.field-help {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: var(--space-xs) 0 var(--space-sm) 0;
  line-height: var(--leading-normal);
}

.field-help code {
  font-style: normal;
}

.error-msg {
  color: var(--color-danger);
  font-size: var(--text-xs);
  margin-top: var(--space-xs);
}


/* ============================================================
   8. DYNAMIC LISTS (add/remove entries)
   ============================================================ */

.dynamic-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.list-entry {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
}

.list-entry input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-bg);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.list-entry input:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.12);
}

.list-entry input.error {
  border-color: var(--color-danger);
  background: var(--color-error-bg);
}

.list-entry .error-msg {
  color: var(--color-danger);
  font-size: var(--text-xs);
  margin-top: 2px;
}

.list-entry button {
  padding: 8px 12px;
  background: var(--color-danger);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--transition-fast);
}

.list-entry button:hover {
  background: var(--color-danger-hover);
}


/* ============================================================
   9. CHECKBOX & RADIO GROUPS
   ============================================================ */

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.checkbox-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: normal;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

.checkbox-label input[type="checkbox"],
.checkbox-label input[type="radio"] {
  width: auto;
  margin: 0 var(--space-sm) 0 0;
  cursor: pointer;
  accent-color: var(--color-primary);
}


/* ============================================================
   10. TABS / MODE SWITCHER
   ============================================================ */

.mode-tabs {
  display: flex;
  gap: 0;
  margin-bottom: var(--space-lg);
  border-bottom: 2px solid var(--color-border-light);
}

.mode-tab {
  padding: var(--space-md) var(--space-lg);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--color-text-secondary);
  margin-bottom: -2px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.mode-tab:hover:not(.active) {
  color: var(--color-text);
}

.mode-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: 500;
}

.mode-panel {
  display: none;
}

.mode-panel.active {
  display: block;
}


/* ============================================================
   11. RESULT DISPLAY
   ============================================================ */

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

.result-header strong {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
}

/* Technical output block (SPF, DMARC, CRON records) */
.tool-output {
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border-light);
  padding: var(--space-base);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  word-break: break-all;
  margin-bottom: var(--space-base);
  min-height: 48px;
}

/* Result sub-sections (CRON) */
.result-section {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border-light);
}

.result-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.result-label {
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.result-value {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  color: var(--color-primary);
  background: var(--color-bg-muted);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-light);
  margin-bottom: var(--space-md);
}


/* ============================================================
   12. ALERTS (success, warning, error, info)
   ============================================================ */

.alert {
  padding: var(--space-md) var(--space-base);
  border-radius: var(--radius-md);
  border-left: 4px solid;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-md);
}

.alert strong {
  font-weight: 600;
}

.alert-success,
.success-box {
  background: var(--color-success-bg);
  border-left-color: var(--color-success);
  color: var(--color-success);
}

.alert-warning,
.warning-box {
  background: var(--color-warning-bg);
  border-left-color: #f59e0b;
  color: var(--color-warning);
}

.alert-error,
.error-box {
  background: var(--color-error-bg);
  border-left-color: var(--color-danger);
  color: var(--color-error);
}

.alert-info,
.info-box {
  background: var(--color-info-bg);
  border-left-color: var(--color-primary);
  color: var(--color-info);
}

/* Box variants (used in DMARC/SPF tools — same semantics, no border-left) */
.warning-box,
.info-box,
.success-box,
.error-box {
  padding: var(--space-md) var(--space-base);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-md);
  border-left: 4px solid;
}

.warning-box strong,
.info-box strong,
.success-box strong,
.error-box strong {
  font-weight: 600;
}

.info-notice {
  margin-top: var(--space-base);
}

/* Lookup counter (SPF) */
.lookup-counter {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--color-info-bg);
  border: 1px solid var(--color-info-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  color: var(--color-info);
}

.lookup-counter.warning {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
  color: var(--color-warning);
}

.lookup-counter.error {
  background: var(--color-error-bg);
  border-color: var(--color-error-border);
  color: var(--color-error);
}

.lookup-counter strong {
  font-weight: 600;
}


/* ============================================================
   13. STATUS BANNERS (DKIM checker style)
   ============================================================ */

.status-banner {
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: var(--text-md);
  text-align: center;
  margin-bottom: var(--space-xl);
  border: 1px solid;
}

.status-valid {
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
  color: var(--color-success);
}

.status-warning {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
  color: var(--color-warning);
}

.status-error {
  background: var(--color-error-bg);
  border-color: var(--color-error-border);
  color: var(--color-error);
}


/* ============================================================
   14. BADGES
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: 10px;
  line-height: 1.4;
  white-space: nowrap;
}

.badge-success {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.badge-warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.badge-error {
  background: var(--color-error-bg);
  color: var(--color-error);
}

.badge-info {
  background: var(--color-info-bg);
  color: var(--color-info);
}

.badge-neutral {
  background: var(--color-bg-muted);
  color: var(--color-text-secondary);
}


/* ============================================================
   15. TABLES
   ============================================================ */

.tool-table,
.tags-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-xl);
  font-size: var(--text-base);
}

.tool-table thead,
.tags-table thead {
  background: var(--color-bg-muted);
}

.tool-table th,
.tags-table th {
  padding: var(--space-md);
  text-align: left;
  font-weight: 600;
  color: var(--color-text);
  border-bottom: 2px solid var(--color-border);
}

.tool-table td,
.tags-table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border-light);
}

.tool-table tbody tr:hover,
.tags-table tbody tr:hover {
  background: var(--color-bg-subtle);
}

.tags-table .tag-value {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  word-break: break-all;
  max-width: 400px;
}

.tags-table .tag-value em {
  color: var(--color-text-faint);
  font-style: italic;
}

/* Status icons in tables */
.tags-table .status-valid {
  color: var(--color-success);
  font-weight: 700;
  background: transparent;
  border: none;
}

.tags-table .status-warning {
  color: #d97706;
  font-weight: 700;
  background: transparent;
  border: none;
}

.tags-table .status-error {
  color: var(--color-danger);
  font-weight: 700;
  background: transparent;
  border: none;
}


/* ============================================================
   16. CODE INLINE
   ============================================================ */

.tool-container code {
  background: var(--color-bg-muted);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--color-text);
  border: 1px solid var(--color-border-light);
}


/* ============================================================
   17. FINDINGS / REPORT SECTIONS (DKIM checker)
   ============================================================ */

.findings-section {
  margin-bottom: var(--space-base);
  padding: var(--space-md) var(--space-base);
  border-radius: var(--radius-md);
  border-left: 4px solid;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

.findings-section strong {
  display: block;
  margin-bottom: var(--space-sm);
  font-size: var(--text-md);
}

.findings-section ul {
  margin: 0;
  padding-left: var(--space-lg);
}

.findings-section li {
  margin-bottom: var(--space-xs);
}

.errors-section {
  background: var(--color-error-bg);
  border-left-color: var(--color-danger);
  color: var(--color-error);
}

.warnings-section {
  background: var(--color-warning-bg);
  border-left-color: #f59e0b;
  color: var(--color-warning);
}

.info-section {
  background: var(--color-info-bg);
  border-left-color: var(--color-primary);
  color: var(--color-info);
}

.no-findings {
  color: var(--color-success);
  font-style: italic;
  margin: 0;
  padding: var(--space-md);
  background: var(--color-success-bg);
  border-radius: var(--radius-md);
}


/* ============================================================
   18. LEARN LINK
   ============================================================ */

.learn-link {
  margin-top: var(--space-md);
  font-size: var(--text-base);
}

.learn-link a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition-fast);
}

.learn-link a:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}


/* ============================================================
   19. CONTEXT META
   ============================================================ */

.tool-context {
  border-top: 1px solid var(--color-border-light);
  padding-top: var(--space-lg);
}

.tool-context-meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}


/* ============================================================
   20. RESPONSIVE
   ============================================================ */

@media (max-width: 640px) {
  .tool-container {
    padding: var(--space-base);
  }

  .tool-header h1 {
    font-size: 22px;
  }

  .tool-interface {
    padding: var(--space-base);
  }

  /* Tabs stack vertically */
  .mode-tabs {
    flex-direction: column;
    gap: 0;
  }

  .mode-tab {
    border-bottom: 1px solid var(--color-border-light);
    text-align: left;
    padding: var(--space-md) var(--space-base);
  }

  .mode-tab.active {
    background: var(--color-primary-light);
  }

  /* Result header stacks */
  .result-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }

  /* Dynamic lists stack */
  .list-entry {
    flex-direction: column;
    align-items: stretch;
  }

  .list-entry button {
    width: 100%;
  }

  /* Tables compress */
  .tool-table th,
  .tool-table td,
  .tags-table th,
  .tags-table td {
    padding: 6px var(--space-sm);
    font-size: var(--text-sm);
  }

  .tags-table .tag-value {
    font-size: var(--text-xs);
    max-width: 180px;
  }
}