/* File: assets/css/components/sfv-system-modal.css */
/* =========================================================
   SFV » System Modal
   Responsabilidade:
   - modal global de sistema do SaaS
   - confirmações, alertas, prompts e diálogos críticos
   - consome tokens/skin existentes
   - não depende de inline
   - fornece camada contextual de botão para modais
   ========================================================= */

.sfv-scope{
  --sfv-system-modal-z: 9999;
  --sfv-system-modal-maxw: 520px;
  --sfv-system-modal-gap: 18px;
  --sfv-system-modal-pad: 22px;
  --sfv-system-modal-radius: var(--sfv-r12, 14px);

  --sfv-system-modal-overlay: rgba(8, 12, 24, .62);
  --sfv-system-modal-blur: 6px;

  --sfv-system-modal-bg: var(--sfv-panel-bg, var(--sfv-color-surface, #111));
  --sfv-system-modal-border: var(--sfv-panel-border, var(--sfv-color-border, rgba(255,255,255,.12)));
  --sfv-system-modal-shadow: var(--sfv-shadow-2, 0 18px 40px rgba(0,0,0,.28));

  --sfv-system-modal-title: var(--sfv-panel-title, var(--sfv-color-text-strong, #fff));
  --sfv-system-modal-text: var(--sfv-panel-text, var(--sfv-color-text, rgba(255,255,255,.88)));
  --sfv-system-modal-muted: var(--sfv-panel-muted, var(--sfv-color-text-muted, rgba(255,255,255,.64)));
  --sfv-system-modal-label: var(--sfv-input-label, var(--sfv-system-modal-title));

  --sfv-system-modal-divider: color-mix(in srgb, var(--sfv-system-modal-border) 78%, transparent);

  --sfv-system-modal-input-bg: var(--sfv-input-bg, rgba(255,255,255,.04));
  --sfv-system-modal-input-fg: var(--sfv-input-fg, var(--sfv-system-modal-title));
  --sfv-system-modal-input-border: var(--sfv-input-border, rgba(255,255,255,.14));
  --sfv-system-modal-input-placeholder: var(--sfv-input-placeholder, var(--sfv-system-modal-muted));
  --sfv-system-modal-input-focus-border: var(--sfv-input-focus-border, var(--sfv-btn-primary-bg, var(--sfv-accent, #caa15a)));
  --sfv-system-modal-input-focus-ring: var(--sfv-input-focus-ring, color-mix(in srgb, var(--sfv-system-modal-input-focus-border) 24%, transparent));

  --sfv-system-modal-error: var(--sfv-danger-strong, #ff6b6b);

  --sfv-system-modal-icon-size: 46px;

  /* action bar */
  --sfv-system-modal-action-gap: 12px;
  --sfv-system-modal-action-minw: 0;
  --sfv-system-modal-action-pt: 16px;
  --sfv-system-modal-action-mt: 4px;

  /* =======================================================
     BOTÕES DO MODAL
     - Cancelar segue o mesmo padrão visual dos botões
       positivos/primários do sistema
     - sem tocar nas skins
     ======================================================= */

  /* secundário / cancelar */
  --sfv-system-modal-btn-muted-bg: var(--sfv-btn-primary-bg);
  --sfv-system-modal-btn-muted-fg: var(--sfv-btn-primary-fg);
  --sfv-system-modal-btn-muted-border: var(--sfv-btn-primary-border);

  --sfv-system-modal-btn-muted-hover-bg: var(--sfv-btn-primary-hover-bg);
  --sfv-system-modal-btn-muted-hover-fg: var(--sfv-btn-primary-hover-fg);
  --sfv-system-modal-btn-muted-hover-border: var(--sfv-btn-primary-hover-border);

  --sfv-system-modal-btn-muted-active-bg: var(--sfv-btn-primary-active-bg);
  --sfv-system-modal-btn-muted-active-fg: var(--sfv-btn-primary-active-fg);
  --sfv-system-modal-btn-muted-active-border: var(--sfv-btn-primary-active-border);

  /* primário */
  --sfv-system-modal-btn-primary-bg: var(--sfv-btn-primary-bg);
  --sfv-system-modal-btn-primary-fg: var(--sfv-btn-primary-fg);
  --sfv-system-modal-btn-primary-border: var(--sfv-btn-primary-border);
  --sfv-system-modal-btn-primary-hover-bg: var(--sfv-btn-primary-hover-bg);
  --sfv-system-modal-btn-primary-hover-fg: var(--sfv-btn-primary-hover-fg);
  --sfv-system-modal-btn-primary-hover-border: var(--sfv-btn-primary-hover-border);
  --sfv-system-modal-btn-primary-active-bg: var(--sfv-btn-primary-active-bg);
  --sfv-system-modal-btn-primary-active-fg: var(--sfv-btn-primary-active-fg);
  --sfv-system-modal-btn-primary-active-border: var(--sfv-btn-primary-active-border);

  /* crítico */
  --sfv-system-modal-btn-danger-bg: var(--sfv-btn-danger-bg);
  --sfv-system-modal-btn-danger-fg: var(--sfv-btn-danger-fg);
  --sfv-system-modal-btn-danger-border: var(--sfv-btn-danger-border);
  --sfv-system-modal-btn-danger-hover-bg: var(--sfv-btn-danger-hover-bg);
  --sfv-system-modal-btn-danger-hover-fg: var(--sfv-btn-danger-hover-fg);
  --sfv-system-modal-btn-danger-hover-border: var(--sfv-btn-danger-hover-border);
  --sfv-system-modal-btn-danger-active-bg: var(--sfv-btn-danger-active-bg);
  --sfv-system-modal-btn-danger-active-fg: var(--sfv-btn-danger-active-fg);
  --sfv-system-modal-btn-danger-active-border: var(--sfv-btn-danger-active-border);
}

.sfv-scope .sfv-system-modal{
  position: fixed;
  inset: 0;
  z-index: var(--sfv-system-modal-z);
  display: none;

  --sfv-btn-muted-context-bg: var(--sfv-system-modal-btn-muted-bg);
  --sfv-btn-muted-context-fg: var(--sfv-system-modal-btn-muted-fg);
  --sfv-btn-muted-context-border: var(--sfv-system-modal-btn-muted-border);
  --sfv-btn-muted-context-hover-bg: var(--sfv-system-modal-btn-muted-hover-bg);
  --sfv-btn-muted-context-hover-fg: var(--sfv-system-modal-btn-muted-hover-fg);
  --sfv-btn-muted-context-hover-border: var(--sfv-system-modal-btn-muted-hover-border);
  --sfv-btn-muted-context-active-bg: var(--sfv-system-modal-btn-muted-active-bg);
  --sfv-btn-muted-context-active-fg: var(--sfv-system-modal-btn-muted-active-fg);
  --sfv-btn-muted-context-active-border: var(--sfv-system-modal-btn-muted-active-border);

  --sfv-btn-primary-context-bg: var(--sfv-system-modal-btn-primary-bg);
  --sfv-btn-primary-context-fg: var(--sfv-system-modal-btn-primary-fg);
  --sfv-btn-primary-context-border: var(--sfv-system-modal-btn-primary-border);
  --sfv-btn-primary-context-hover-bg: var(--sfv-system-modal-btn-primary-hover-bg);
  --sfv-btn-primary-context-hover-fg: var(--sfv-system-modal-btn-primary-hover-fg);
  --sfv-btn-primary-context-hover-border: var(--sfv-system-modal-btn-primary-hover-border);
  --sfv-btn-primary-context-active-bg: var(--sfv-system-modal-btn-primary-active-bg);
  --sfv-btn-primary-context-active-fg: var(--sfv-system-modal-btn-primary-active-fg);
  --sfv-btn-primary-context-active-border: var(--sfv-system-modal-btn-primary-active-border);

  --sfv-btn-danger-context-bg: var(--sfv-system-modal-btn-danger-bg);
  --sfv-btn-danger-context-fg: var(--sfv-system-modal-btn-danger-fg);
  --sfv-btn-danger-context-border: var(--sfv-system-modal-btn-danger-border);
  --sfv-btn-danger-context-hover-bg: var(--sfv-system-modal-btn-danger-hover-bg);
  --sfv-btn-danger-context-hover-fg: var(--sfv-system-modal-btn-danger-hover-fg);
  --sfv-btn-danger-context-hover-border: var(--sfv-system-modal-btn-danger-hover-border);
  --sfv-btn-danger-context-active-bg: var(--sfv-system-modal-btn-danger-active-bg);
  --sfv-btn-danger-context-active-fg: var(--sfv-system-modal-btn-danger-active-fg);
  --sfv-btn-danger-context-active-border: var(--sfv-system-modal-btn-danger-active-border);
}

.sfv-scope .sfv-system-modal.is-open{
  display: grid;
  place-items: center;
}

.sfv-scope .sfv-system-modal[hidden]{
  display: none !important;
}

.sfv-scope .sfv-system-modal__overlay{
  position: absolute;
  inset: 0;
  background: var(--sfv-system-modal-overlay);
  backdrop-filter: blur(var(--sfv-system-modal-blur));
  -webkit-backdrop-filter: blur(var(--sfv-system-modal-blur));
}

.sfv-scope .sfv-system-modal__dialog{
  position: relative;
  z-index: 1;
  width: min(calc(100% - 32px), var(--sfv-system-modal-maxw));
  max-width: var(--sfv-system-modal-maxw);
  background: var(--sfv-system-modal-bg);
  border: 1px solid var(--sfv-system-modal-border);
  border-radius: var(--sfv-system-modal-radius);
  box-shadow: var(--sfv-system-modal-shadow);
  overflow: hidden;
}

.sfv-scope .sfv-system-modal__surface{
  display: grid;
  gap: var(--sfv-system-modal-gap);
  padding: var(--sfv-system-modal-pad);
}

.sfv-scope .sfv-system-modal__head{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 14px;
}

.sfv-scope .sfv-system-modal__icon{
  width: var(--sfv-system-modal-icon-size);
  height: var(--sfv-system-modal-icon-size);
  border-radius: 999px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--sfv-danger-bg, #ff1030) 72%, white 28%);
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--sfv-danger-bg, #ff1030) 88%, white 12%) 0%, var(--sfv-danger-bg, #ff1030) 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 0 0 1px rgba(0,0,0,.08),
    0 10px 24px rgba(255, 16, 48, .22);
}

.sfv-scope .sfv-system-modal__icon > svg{
  width: 22px;
  height: 22px;
  display: block;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.22));
}

.sfv-scope .sfv-system-modal__titles{
  min-width: 0;
  display: grid;
  gap: 6px;
}

.sfv-scope .sfv-system-modal__title{
  margin: 0;
  color: var(--sfv-system-modal-title);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.15;
}

.sfv-scope .sfv-system-modal__subtitle{
  margin: 0;
  color: var(--sfv-system-modal-muted);
  font-size: .95rem;
  line-height: 1.35;
}

.sfv-scope .sfv-system-modal__body{
  display: grid;
  gap: 14px;
}

.sfv-scope .sfv-system-modal__text{
  margin: 0;
  color: var(--sfv-system-modal-text);
  font-size: .98rem;
  line-height: 1.55;
}

.sfv-scope .sfv-system-modal__field{
  display: grid;
  gap: 8px;
}

.sfv-scope .sfv-system-modal__label{
  color: var(--sfv-system-modal-label);
  font-size: .92rem;
  font-weight: 600;
}

.sfv-scope .sfv-system-modal__input{
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--sfv-system-modal-input-border);
  background: var(--sfv-system-modal-input-bg);
  color: var(--sfv-system-modal-input-fg);
  outline: 0;
  box-sizing: border-box;
}

.sfv-scope .sfv-system-modal__input::placeholder{
  color: var(--sfv-system-modal-input-placeholder);
}

.sfv-scope .sfv-system-modal__input:focus{
  border-color: var(--sfv-system-modal-input-focus-border);
  box-shadow: 0 0 0 3px var(--sfv-system-modal-input-focus-ring);
}

.sfv-scope .sfv-system-modal__help{
  color: var(--sfv-system-modal-muted);
  font-size: .88rem;
  line-height: 1.4;
}

.sfv-scope .sfv-system-modal__error{
  display: none;
  color: var(--sfv-system-modal-error);
  font-size: .9rem;
  line-height: 1.4;
}

.sfv-scope .sfv-system-modal__error.is-visible{
  display: block;
}

.sfv-scope .sfv-system-modal__actions{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sfv-system-modal-action-gap);
  align-items: stretch;
  padding-top: var(--sfv-system-modal-action-pt);
  margin-top: var(--sfv-system-modal-action-mt);
  border-top: 1px solid var(--sfv-system-modal-divider);
}

.sfv-scope .sfv-system-modal__action{
  min-width: var(--sfv-system-modal-action-minw);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  text-align: center;
  overflow: hidden;
}

.sfv-scope .sfv-system-modal__action--cancel{
  order: 1;
}

.sfv-scope .sfv-system-modal__action--confirm{
  order: 2;
}

.sfv-scope .sfv-system-modal--danger .sfv-system-modal__icon{
  color: #fff;
}

.sfv-scope .sfv-system-modal.is-busy .sfv-system-modal__dialog{
  pointer-events: none;
}

.sfv-scope .sfv-system-modal.is-busy .sfv-system-modal__surface{
  opacity: .82;
}

@media (max-width: 640px){
  .sfv-scope{
    --sfv-system-modal-pad: 18px;
    --sfv-system-modal-gap: 16px;
    --sfv-system-modal-maxw: 100%;
    --sfv-system-modal-icon-size: 42px;
    --sfv-system-modal-action-gap: 10px;
    --sfv-system-modal-action-pt: 14px;
    --sfv-system-modal-action-mt: 2px;
  }

  .sfv-scope .sfv-system-modal__dialog{
    width: min(calc(100% - 20px), 100%);
  }

  .sfv-scope .sfv-system-modal__actions{
    grid-template-columns: 1fr;
  }

  .sfv-scope .sfv-system-modal__action{
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}