/* ==========================================================================
   LAYOUT.CSS —
   Chargé après base.css. Ne redéfinit PAS les tokens ni les composants
   de base (body, html, reset, .ui-btn, .input-field, navbar, etc.).

   CONTENU :
   ① Page layout         (.page-content)
   ② Modal tokens extra  + composant modal
   ③ Account tabs        (.account-tab, .tab-danger, .tab-warning…)
   ④ Extended variants   (warning/success inputs, btn-warning/success, info-box)
   ⑤ Phone input         (.phone-input-container, .phone-input-core)
   ⑥ iti z-index fix
   ⑦ Field feedback      (.field-error/success/warning avec icônes, .match-feedback)
   ⑧ Account layout      (.account-card, .account-row-vertical, dividers)
   ⑨ Dark overrides      (warning btn dark, secondary btn dark)

   RÈGLE : tout ce qui touche à tokens purs ou composants déjà dans base.css
           doit rester dans base.css, pas ici.
   ========================================================================== */


/* ==========================================================================
   ① PAGE LAYOUT
   ========================================================================== */

.ui-btn {
  -webkit-tap-highlight-color: transparent;
}

button, a, [x-data] [role="button"] {
  -webkit-tap-highlight-color: transparent;
}

.page-content {
  box-sizing: border-box;
  width: 96%;
  margin-left: auto;
  margin-right: auto;
  padding-top: var(--page-top, 1.6rem);
  padding-bottom: var(--page-bottom, 2.4rem);
}

@media (max-width: 768px) {
  .page-content { width: 94%; padding-top: 1.2rem; padding-bottom: 1.8rem; }
}
@media (max-width: 480px) {
  .page-content { width: 92%; padding-top: 1rem; padding-bottom: 1.4rem; }
}


/* ==========================================================================
   ② MODAL — tokens supplémentaires + composant
   (Tokens de base --modal-* déjà dans base.css)
   ========================================================================== */

:root {
  --modal-gap:            0.75rem;
  --modal-min-height:     200px;
  --modal-header-color:   var(--text);
  --modal-title-size:     1.05rem;
  --modal-header-danger:  var(--danger);
  --modal-header-accent:  var(--accent);
  --modal-header-warning: var(--warning);
  --modal-header-success: var(--success);

  /* Danger tab tokens */
  --tab-danger-color:        var(--danger);
  --tab-danger-bg:           var(--danger-bg);
  --tab-danger-input-border: var(--danger);
  --tab-danger-input-ring:   rgba(242, 90, 85, 0.25);
  --tab-danger-btn-bg:       var(--danger);
  --tab-danger-btn-text:     #ffffff;
  --tab-danger-info-bg:      var(--danger-bg);
  --tab-danger-info-border:  color-mix(in srgb, var(--danger) 25%, transparent);
  --tab-danger-info-text:    var(--danger);
  --tab-danger-heading:      var(--danger);
  --tab-danger-label:        var(--danger);
  --tab-danger-note:         var(--danger);

  /* Warning button (complète base.css) */
  --btn-warning-bg:       #e7a019;
  --btn-warning-bg-hover: #c47e10;
}

/* Opt-in modal classes */
.modal-backdrop.use-modal-tokens {
  background: var(--modal-backdrop-bg);
  position: fixed;
  inset: 0;
  z-index: 12000 !important;
}

.modal-container {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 12000; /* aligné avec modal-backdrop et modal-card */
  padding: 1rem;
}

.modal-card.use-modal-tokens {
  background: var(--modal-bg);
  color: var(--modal-text);
  border-radius: var(--modal-radius);
  box-shadow: var(--modal-shadow);
  border: var(--modal-border);
  max-width: var(--modal-max-width, 560px);
  min-height: var(--modal-min-height, 200px);
  width: auto;
  margin: 0 auto;
  padding: var(--modal-padding, 1.2em);
  position: relative;
  z-index: 12000 !important;
  transition: transform 0.28s ease, box-shadow 0.28s ease, opacity 0.28s ease;
}

@media (max-width: 640px) {
  .modal-card.use-modal-tokens { width: 90%; }
}

.modal-card.use-modal-tokens .modal-body { padding: var(--modal-padding); }

.modal-card.use-modal-tokens header {
  border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  padding-bottom: 0.6em;
  margin-bottom: 1em;
}

.modal-card.use-modal-tokens footer {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  gap: 1.5rem !important;
  border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  padding-top: 0.6em;
  margin-top: 1em;
}

.modal-card.use-modal-tokens .ui-btn {
  display: inline-flex;
  width: auto;
  min-width: 6.5em;
  justify-content: center;
}

/* Variant glows */
.modal-card.use-modal-tokens[data-variant="accent"]  { box-shadow: var(--shadow-accent-glow); }
.modal-card.use-modal-tokens[data-variant="danger"]  { box-shadow: var(--shadow-danger-glow); }
.modal-card.use-modal-tokens[data-variant="warning"] { box-shadow: 0 0 25px rgba(255,180,0,.45); }
.modal-card.use-modal-tokens[data-variant="success"] { box-shadow: 0 0 25px rgba(0,200,100,.45); }

/* Modal title helpers */
.modal-title {
  color: var(--modal-header-color);
  font-size: var(--modal-title-size);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin: 0 0 0.8rem;
}
.modal-title--accent  { color: var(--accent); }
.modal-title--danger  { color: var(--danger); }
.modal-title--warning { color: var(--warning); }
.modal-title--success { color: var(--success); }


/* ==========================================================================
   ③ ACCOUNT TABS
   ========================================================================== */

.account-tabs-bar { scroll-snap-type: x mandatory; }

.account-tab {
  transition: background var(--duration-2), box-shadow var(--duration-2);
  outline: none;
  scroll-snap-align: center;
}
.account-tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--input-ring-focus);
}

.account-tab.active {
  background: var(--accent);
  color: #ffffff;
  box-shadow: var(--shadow-accent-glow);
}
.account-tab.active:focus-visible {
  box-shadow: var(--shadow-accent-glow), 0 0 0 3px var(--input-ring-focus);
}

/* Danger */
.account-tab.active.tab-danger {
  background: var(--danger);
  color: #ffffff;
  box-shadow: var(--shadow-danger-glow);
}
.account-tab.active.tab-danger:focus-visible {
  box-shadow: var(--shadow-danger-glow), 0 0 0 3px var(--input-ring-danger);
}
.account-tab.tab-danger:not(.active) {
  color: color-mix(in srgb, var(--danger) 70%, var(--muted) 30%);
}

/* Warning / Success */
.account-tab.active.tab-warning {
  background: var(--warning);
  color: #ffffff;
  box-shadow: 0 2px 22px rgba(231,160,25,.25);
}
.account-tab.active.tab-success {
  background: var(--success);
  color: #ffffff;
  box-shadow: 0 2px 22px rgba(0,153,69,.25);
}

/* tab-danger auto-styling */
.tab-danger h2                        { color: var(--tab-danger-heading); }
.tab-danger label,
.tab-danger .note,
.tab-danger .legend-heading           { color: var(--tab-danger-label); }
.tab-danger .btn                      { background: var(--tab-danger-btn-bg); color: var(--tab-danger-btn-text); }


/* ==========================================================================
   ④ EXTENDED VARIANTS — Warning / Success inputs, info-boxes, legacy btns
   ========================================================================== */

/* Input idle (tous les variants partagent un idle neutre) */
.input-field.input-danger,
.input-field.input-warning,
.input-field.input-success {
  border-color: var(--input-border) !important;
  background: var(--input-bg) !important;
  color: var(--input-text) !important;
  box-shadow: none !important;
}

/* Focus halos */
.input-field.input-danger:focus {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px var(--input-ring-danger, rgba(242,90,85,.25)) !important;
}
.input-field.input-warning:focus,
.input-field-warning:focus {
  border-color: var(--warning) !important;
  box-shadow: 0 0 0 3px var(--input-ring-warning, rgba(231,160,25,.25)) !important;
}
.input-field.input-success:focus,
.input-field-success:focus {
  border-color: var(--success) !important;
  box-shadow: 0 0 0 3px var(--input-ring-success, rgba(0,153,69,.25)) !important;
}

/* Info boxes */
.warning-info {
  background: var(--warning-bg);
  color: var(--warning);
  border: 1px solid color-mix(in srgb, var(--warning) 25%, transparent);
}
.success-info {
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid color-mix(in srgb, var(--success) 25%, transparent);
}

/* Legacy .btn-* (non ui-btn) */
.btn-warning { background: var(--warning); color: #ffffff; }
.btn-warning:hover { background: #c88412; }
.btn-success { background: var(--success); color: #ffffff; }
.btn-success:hover { background: #007a35; }


/* ==========================================================================
   ⑤ PHONE INPUT
   ========================================================================== */

.phone-input-container.input-field,
.phone-input-container.input-danger {
  width: 100%;
  border: 1.5px solid var(--input-border) !important;
  border-radius: var(--input-radius) !important;
  background: var(--input-bg) !important;
  color: var(--input-text) !important;
  box-sizing: border-box;
  transition:
    border-color     var(--duration-2),
    box-shadow       var(--duration-2),
    background-color var(--duration-2);
}
.phone-input-container.input-field:hover         { border-color: var(--input-border-hover) !important; }
.phone-input-container.input-field:focus-within  {
  border-color: var(--input-border-focus) !important;
  box-shadow: 0 0 0 3px var(--input-ring-focus) !important;
}
.phone-input-container.input-danger:focus-within {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px var(--input-ring-danger, rgba(242,90,85,.25)) !important;
}

.phone-input-core {
  flex: 1;
  border: none;
  outline: none;
  padding: 0 var(--space-4);
  font: inherit;
  color: var(--input-text);
  background: transparent;
  line-height: 1.4;
  height: 100%;
  box-shadow: none !important;
}


/* ==========================================================================
   ⑥ ITI (intl-tel-input) Z-INDEX FIX
   .base-card > * { z-index:1 } crée un stacking context.
   Le dropdown doit passer au-dessus des siblings.
   ========================================================================== */

.iti               { position: relative; z-index: 1; }
.iti--open         { z-index: 51 !important; } /* 51 > header z-index:50 */
.iti__dropdown-content,
.iti__country-list { z-index: 9999 !important; }


/* ==========================================================================
   ⑦ FIELD FEEDBACK — version complète avec icônes
   (Version simplifiée de base.css supprimée ; celle-ci fait autorité.)
   ========================================================================== */

.field-error,
.field-success,
.field-warning {
  position: relative;
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  line-height: 1.3;
  margin: 0.3em 0;
  height: 1.3em;
  overflow: hidden;
  box-sizing: border-box;
  pointer-events: none;
  gap: 0.4em;
}

.field-error   { color: var(--danger); }
.field-success { color: var(--success); }
.field-warning { color: var(--warning); }

/* Icônes pseudo-éléments */
.field-error::before,
.field-success::before,
.field-warning::before {
  font-size: 0.9em;
  flex-shrink: 0;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  will-change: opacity, transform;
}
.field-error::before   { content: "✖"; color: var(--danger); }
.field-success::before { content: "✔"; color: var(--success); }
.field-warning::before { content: "⚠"; color: var(--warning); }

.field-error.is-visible::before,
.field-success.is-visible::before,
.field-warning.is-visible::before { opacity: 1; transform: translateY(0); }

/* Texte animé (Alpine x-show) */
.field-error   span,
.field-success span,
.field-warning span {
  display: inline-block;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  will-change: opacity, transform;
}
.field-error   span[x-show]:not([style*="display: none"]),
.field-success span[x-show]:not([style*="display: none"]),
.field-warning span[x-show]:not([style*="display: none"]) {
  opacity: 1;
  transform: translateY(0);
}

/* Match feedback */
.match-feedback {
  margin-top: 0.4em;
  font-size: 0.82rem;
  line-height: 1.25;
  min-height: 1.3em;
  display: flex;
  align-items: center;
  gap: 0.4em;
  overflow: hidden;
  position: relative;
}
.match-feedback span {
  display: inline-block;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.match-feedback span[x-show]:not([style*="display: none"]) { opacity: 1; transform: translateY(0); }
.match-feedback.ok    { color: var(--success); }
.match-feedback.error { color: var(--danger); }
.match-true::before  { content: "✔"; margin-right: 0.4em; color: var(--success); }
.match-false::before { content: "✖"; margin-right: 0.4em; color: var(--danger); }


/* ==========================================================================
   ⑧ ACCOUNT LAYOUT HELPERS
   ========================================================================== */

.account-card h2 { margin: 0 0 var(--h2-info-gap, 0.5em) !important; }

.account-row-vertical {
  display: flex;
  flex-direction: column;
  gap: var(--label-gap, 0.25em);
  margin-bottom: 1em;
}
@media (max-width: 600px) {
  .account-row-vertical { gap: var(--label-gap-mobile, 0.25em); }
}

/* Dividers */
.account-tab-divider {
  position: relative;
  text-align: center;
  margin: var(--space-6) 0 var(--space-4);
  line-height: 1;
}

.account-tab-divider.divider-danger-zone::before {
  content: "";
  position: absolute;
  top: 50%; left: 0;
  width: 100%; height: 1px;
  background: color-mix(in srgb, var(--danger) 40%, transparent);
  transform: translateY(-50%);
  border-radius: 1px;
}
.account-tab-divider.divider-danger-zone span {
  position: relative;
  padding: 0 0.8em;
  background: var(--card);
  color: var(--danger);
  font-size: 0.88em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.account-tab-divider.divider-accent-zone::before {
  content: "";
  position: absolute;
  top: 50%; left: 0;
  width: 100%; height: 1px;
  background: color-mix(in srgb, var(--muted) 40%, transparent);
  transform: translateY(-50%);
  border-radius: 1px;
}
.account-tab-divider.divider-accent-zone span {
  position: relative;
  padding: 0 0.8em;
  background: var(--card);
  color: color-mix(in srgb, var(--text) 85%, var(--muted) 15%);
  font-size: 0.88em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}


/* ==========================================================================
   ⑨ DB-KICKER VARIANTS
   (centralisés ici pour éviter la duplication dans security-log.css / devices.css)
   ========================================================================== */

.db-kicker--danger {
  color: var(--danger);
  background: var(--danger-bg);
  border-color: color-mix(in srgb, var(--danger) 22%, transparent);
}

.db-kicker--warn {
  color: var(--warning);
  background: var(--warning-bg);
  border-color: color-mix(in srgb, var(--warning) 22%, transparent);
}


/* ==========================================================================
   ⑩ DARK OVERRIDES
   ========================================================================== */

.dark .ui-btn--warning,
.dark .ui-btn.ui-btn--warning { color: #fff2cc; }

.dark {
  --btn-secondary-bg:       #2c4a08;
  --btn-secondary-bg-hover: #3d6610;
  --btn-secondary-fg:       #f7fee7;
}