/* ========================================
   MODAL SYSTEM - Novo Mercado Pet ERP
   ======================================== */

/* ===== VARIÁVEIS — edite aqui para mudar as cores do modal ===== */
:root {
     /* Overlay */
     --modal-overlay-bg: rgba(10, 25, 47, 0.6);

     /* Card / estrutura */
     --modal-bg: #ffffff;
     --modal-surface: #f8fafc;
     --modal-surface-hover: #f1f5f9;
     --modal-border: #e5e7eb;
     --modal-border-soft: #d1d5db;
     --modal-border-muted: #9ca3af;
     --modal-radius-card: 20px;
     --modal-radius-btn: 12px;
     --modal-radius-icon: 14px;
     --modal-radius-details: 12px;

     /* Tipografia */
     --modal-font: 'DM Sans', 'Inter', system-ui, sans-serif;
     --modal-text-strong: #0f172a;
     --modal-text: #475569;
     --modal-text-muted: #94a3b8;

     /* ── Tipo: confirm ── */
     --modal-confirm-icon-bg: linear-gradient(135deg, #dbeafe, #bfdbfe);
     --modal-confirm-icon-color: #1d4ed8;
     --modal-confirm-icon-shadow: rgba(37, 99, 235, 0.2);
     --modal-confirm-details-bg: #f0f7ff;
     --modal-confirm-details-border: #bfdbfe;
     --modal-confirm-btn: linear-gradient(135deg, #1e40af, #2563eb);
     --modal-confirm-btn-hover: linear-gradient(135deg, #1d3a9e, #1e40af);
     --modal-confirm-btn-shadow: rgba(37, 99, 235, 0.35);
     --modal-confirm-btn-shadow-hover: rgba(37, 99, 235, 0.45);

     /* ── Tipo: success ── */
     --modal-success-icon-bg: linear-gradient(135deg, #d1fae5, #a7f3d0);
     --modal-success-icon-color: #059669;
     --modal-success-icon-shadow: rgba(16, 185, 129, 0.2);
     --modal-success-details-bg: #f0fdf6;
     --modal-success-details-border: #a7f3d0;
     --modal-success-accent: #16a34a;
     --modal-success-btn: linear-gradient(135deg, #059669, #10b981);
     --modal-success-btn-hover: linear-gradient(135deg, #047857, #059669);
     --modal-success-btn-shadow: rgba(16, 185, 129, 0.35);
     --modal-success-btn-shadow-hover: rgba(16, 185, 129, 0.45);

     /* ── Tipo: error ── */
     --modal-error-icon-bg: #ffe5e5;
     --modal-error-icon-color: #ff1a1a;
     --modal-error-icon-shadow: rgba(255, 0, 0, 0.35);

     --modal-error-details-bg: #fff5f5;
     --modal-error-details-border: #ffb3b3;

     --modal-error-accent: #ff0000;

     --modal-error-btn: #ff0000;
     --modal-error-btn-hover: #cc0000;
     --modal-error-btn-shadow: rgba(255, 0, 0, 0.4);
     --modal-error-btn-shadow-hover: rgba(255, 0, 0, 0.55);


     /* ── Tipo: warning (laranja minimalista clean) ── */

     --modal-warning-icon-bg: #FFF6ED;
     --modal-warning-icon-color: #F97316;
     --modal-warning-icon-shadow: rgba(249, 115, 22, 0.18);

     --modal-warning-details-bg: #FFFBF7;
     --modal-warning-details-border: #FED7AA;

     --modal-warning-accent: #ff0000;

     --modal-warning-btn: #ff0000;
     --modal-warning-btn-hover: #cc0000;
     --modal-warning-btn-shadow: rgba(255, 0, 0, 0.4);
     --modal-warning-btn-shadow-hover: rgba(255, 0, 0, 0.55);

     /* ── Tipo: info ── */
     --modal-info-icon-bg: linear-gradient(135deg, #e0e7ff, #c7d2fe);
     --modal-info-icon-color: #6366f1;
     --modal-info-icon-shadow: rgba(99, 102, 241, 0.2);
     --modal-info-details-bg: #f5f3ff;
     --modal-info-details-border: #c7d2fe;
     --modal-info-accent: #6366f1;
     --modal-info-btn: linear-gradient(135deg, #4338ca, #6366f1);
     --modal-info-btn-hover: linear-gradient(135deg, #3730a3, #4338ca);
     --modal-info-btn-shadow: rgba(99, 102, 241, 0.35);
     --modal-info-btn-shadow-hover: rgba(99, 102, 241, 0.45);

     /* Toast */
     --modal-toast-bg: #ffffff;
     --modal-toast-border: #d1d5db;
     --modal-toast-radius: 12px;
}

/* ===== OVERLAY ===== */
.modal-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     background: var(--modal-overlay-bg);
     z-index: 99999;
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     animation: modalOverlayFadeIn 0.18s ease forwards;
     padding: 16px;
     will-change: opacity;
}

@keyframes modalOverlayFadeIn {
     to {
          opacity: 1;
     }
}

.modal-overlay.closing {
     animation: modalOverlayFadeOut 0.2s ease forwards;
}

@keyframes modalOverlayFadeOut {
     to {
          opacity: 0;
     }
}

/* ===== CARD ===== */
.modal-card {
     background: var(--modal-bg);
     border-radius: var(--modal-radius-card);
     box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.18),
          0 0 0 1px rgba(0, 0, 0, 0.05);
     min-width: 340px;
     max-width: 500px;
     width: 92%;
     overflow: hidden;
     transform: scale(0.9) translateY(20px);
     opacity: 0;
     animation: modalCardEnter 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
     will-change: transform, opacity;
}

@keyframes modalCardEnter {
     to {
          transform: scale(1) translateY(0);
          opacity: 1;
     }
}

.modal-overlay.closing .modal-card {
     animation: modalCardExit 0.2s ease forwards;
}

@keyframes modalCardExit {
     to {
          transform: scale(0.95) translateY(10px);
          opacity: 0;
     }
}

/* ===== HEADER ===== */
.modal-header {
     padding: 22px 26px 20px;
     display: flex;
     align-items: center;
     gap: 16px;
     border-bottom: 1px solid var(--modal-border);
     position: relative;
}

.modal-header::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 26px;
     right: 26px;
     height: 1px;
     background: linear-gradient(90deg, transparent, var(--modal-border) 20%, var(--modal-border) 80%, transparent);
}

.modal-header-icon {
     width: 48px;
     height: 48px;
     border-radius: var(--modal-radius-icon);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 22px;
     flex-shrink: 0;
}

.modal-header-content {
     flex: 1;
}

.modal-header-title {
     font-family: var(--modal-font);
     font-size: 17px;
     font-weight: 700;
     color: var(--modal-text-strong);
     margin: 0;
     line-height: 1.35;
     letter-spacing: -0.01em;
}

.modal-header-subtitle {
     font-family: var(--modal-font);
     font-size: 13px;
     color: var(--modal-text-muted);
     margin: 3px 0 0 0;
}

/* Header Type Variations */
.modal-header.type-confirm .modal-header-icon {
     background: var(--modal-confirm-icon-bg);
     color: var(--modal-confirm-icon-color);
     box-shadow: 0 4px 12px var(--modal-confirm-icon-shadow);
}

.modal-header.type-success .modal-header-icon {
     background: var(--modal-success-icon-bg);
     color: var(--modal-success-icon-color);
     box-shadow: 0 4px 12px var(--modal-success-icon-shadow);
}

.modal-header.type-error .modal-header-icon {
     background: var(--modal-error-icon-bg);
     color: var(--modal-error-icon-color);
     box-shadow: 0 4px 12px var(--modal-error-icon-shadow);
}

.modal-header.type-warning .modal-header-icon {
     background: var(--modal-warning-icon-bg);
     color: var(--modal-warning-icon-color);
     box-shadow: 0 4px 12px var(--modal-warning-icon-shadow);
}

.modal-header.type-info .modal-header-icon {
     background: var(--modal-info-icon-bg);
     color: var(--modal-info-icon-color);
     box-shadow: 0 4px 12px var(--modal-info-icon-shadow);
}

/* ===== BODY ===== */
.modal-body {
     padding: 20px 26px 24px;
     font-family: var(--modal-font);
     font-size: 14.5px;
     line-height: 1.65;
     color: var(--modal-text);
}

.modal-body p {
     margin: 0 0 14px 0;
}

.modal-body p:last-child {
     margin-bottom: 0;
}

.modal-body strong {
     color: var(--modal-text-strong);
     font-weight: 600;
}

/* ===== DETAILS BOX ===== */
.modal-details {
     background: var(--modal-surface);
     border-radius: var(--modal-radius-details);
     padding: 6px 4px;
     margin-top: 14px;
     border: 1px solid var(--modal-border);
     overflow: hidden;
}

.modal-details.type-confirm {
     background: var(--modal-confirm-details-bg);
     border-color: var(--modal-confirm-details-border);
}

.modal-details.type-success {
     background: var(--modal-success-details-bg);
     border-color: var(--modal-success-details-border);
}

.modal-details.type-error {
     background: var(--modal-error-details-bg);
     border-color: var(--modal-error-details-border);
}

.modal-details.type-warning {
     background: var(--modal-warning-details-bg);
     border-color: var(--modal-warning-details-border);
}

.modal-details.type-info {
     background: var(--modal-info-details-bg);
     border-color: var(--modal-info-details-border);
}

.modal-details-row {
     display: flex;
     align-items: flex-start;
     gap: 12px;
     padding: 9px 14px;
     font-size: 13.5px;
     transition: background 0.1s ease;

}

.modal-details-row:not(:last-child) {
     border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.modal-details-row:hover {
     background: rgba(0, 0, 0, 0.025);
}

.modal-details-label {
     color: var(--modal-text);
     font-weight: 500;
     min-width: 100px;
     padding-top: 1px;
}

.modal-details-label::before {
     content: '•';
     margin-right: 6px;
     opacity: 0.4;
}

.modal-details-value {
     color: var(--modal-text-strong);
     font-weight: 500;
     flex: 1;
     line-height: 1.5;
}

/* ===== FOOTER ===== */
.modal-footer {
     padding: 16px 26px 22px;
     display: flex;
     justify-content: flex-end;
     gap: 10px;
     background: var(--modal-bg);
     border-top: 1px solid var(--modal-surface);
}

/* ===== BUTTONS ===== */
.modal-btn {
     font-family: var(--modal-font);
     font-size: 14px;
     font-weight: 600;
     padding: 10px 22px;
     border-radius: var(--modal-radius-btn);
     border: none;
     cursor: pointer;
     transition: opacity 0.15s ease,
          transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
          box-shadow 0.2s ease,
          background 0.15s ease,
          border-color 0.15s ease;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     min-width: 108px;
     letter-spacing: 0.01em;
     will-change: transform;
}

.modal-btn:focus {
     outline: none;
     box-shadow: 0 0 0 0.8px var(--modal-info-icon-shadow);
}

.modal-btn:active {
     transform: scale(0.95) !important;
}

/* Secondary Button */
.modal-btn-secondary {
     background: var(--modal-bg);
     color: var(--modal-text);
     border: 1.5px solid var(--modal-border);
}

.modal-btn-secondary:hover {
     background: var(--modal-surface);
     border-color: var(--modal-border-muted);
     color: var(--modal-text-strong);
}

/* Primary Variations */
.modal-btn-primary-confirm {
     background: var(--modal-confirm-btn);
     color: #ffffff;
     box-shadow: 0 4px 14px var(--modal-confirm-btn-shadow);
}

.modal-btn-primary-confirm:hover {
     background: var(--modal-confirm-btn-hover);
     box-shadow: 0 6px 18px var(--modal-confirm-btn-shadow-hover);
     transform: translateY(-1px);
}

.modal-btn-primary-success {
     background: var(--modal-success-btn);
     color: #ffffff;
     box-shadow: 0 4px 14px var(--modal-success-btn-shadow);
}

.modal-btn-primary-success:hover {
     background: var(--modal-success-btn-hover);
     box-shadow: 0 6px 18px var(--modal-success-btn-shadow-hover);
     transform: translateY(-1px);
}

.modal-btn-primary-error {
     background: var(--modal-error-btn);
     color: #ffffff;
     box-shadow: 0 4px 14px var(--modal-error-btn-shadow);
}

.modal-btn-primary-error:hover {
     background: var(--modal-error-btn-hover);
     box-shadow: 0 6px 18px var(--modal-error-btn-shadow-hover);
     transform: translateY(-1px);
}

.modal-btn-primary-warning {
     background: var(--modal-warning-btn);
     color: #ffffff;
     box-shadow: 0 4px 14px var(--modal-warning-btn-shadow);
}

.modal-btn-primary-warning:hover {
     background: var(--modal-warning-btn-hover);
     box-shadow: 0 6px 18px var(--modal-warning-btn-shadow-hover);
     transform: translateY(-1px);
}

.modal-btn-primary-info {
     background: var(--modal-info-btn);
     color: #ffffff;
     box-shadow: 0 4px 14px var(--modal-info-btn-shadow);
}

.modal-btn-primary-info:hover {
     background: var(--modal-info-btn-hover);
     box-shadow: 0 6px 18px var(--modal-info-btn-shadow-hover);
     transform: translateY(-1px);
}

/* ========================================
   TOAST NOTIFICATIONS
   ======================================== */

.modal-toast-container {
     position: fixed;
     bottom: 28px;
     right: 28px;
     z-index: 99998;
     display: flex;
     flex-direction: column;
     gap: 10px;
     pointer-events: none;
     max-width: 400px;
     width: calc(100vw - 32px);
}

.modal-toast {
     background: var(--modal-toast-bg);
     border-radius: 16px;
     box-shadow:
          0 4px 6px -1px rgba(0, 0, 0, 0.06),
          0 10px 30px -5px rgba(0, 0, 0, 0.14),
          0 0 0 1px rgba(0, 0, 0, 0.04);
     padding: 16px 18px 16px 16px;
     display: flex;
     align-items: center;
     gap: 14px;
     border-left: 4px solid var(--modal-toast-border);
     position: relative;
     overflow: hidden;
     pointer-events: auto;
     transform: translateX(calc(100% + 40px));
     opacity: 0;
     animation: toastSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
     will-change: transform, opacity;
}

@keyframes toastSlideIn {
     to {
          transform: translateX(0);
          opacity: 1;
     }
}

.modal-toast.closing {
     animation: toastSlideOut 0.28s cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes toastSlideOut {
     to {
          transform: translateX(calc(100% + 40px));
          opacity: 0;
     }
}

/* Toast Types */
.modal-toast.type-success {
     border-left-color: var(--modal-success-accent);
}

.modal-toast.type-error {
     border-left-color: var(--modal-error-accent);
}

.modal-toast.type-warning {
     border-left-color: var(--modal-warning-accent);
}

.modal-toast.type-info {
     border-left-color: var(--modal-info-accent);
}

/* Toast Icon — círculo grande como no modelo de "Sucesso" */
.modal-toast-icon {
     width: 44px;
     height: 44px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
}

.modal-toast-icon svg {
     width: 22px;
     height: 22px;
}

.modal-toast.type-success .modal-toast-icon {
     background: var(--modal-success-icon-bg);
     color: var(--modal-success-icon-color);
     box-shadow: 0 4px 12px var(--modal-success-icon-shadow);
}

.modal-toast.type-error .modal-toast-icon {
     background: var(--modal-error-icon-bg);
     color: var(--modal-error-icon-color);
     box-shadow: 0 4px 12px var(--modal-error-icon-shadow);
}

.modal-toast.type-warning .modal-toast-icon {
     background: var(--modal-warning-icon-bg);
     color: var(--modal-warning-icon-color);
     box-shadow: 0 4px 12px var(--modal-warning-icon-shadow);
}

.modal-toast.type-info .modal-toast-icon {
     background: var(--modal-info-icon-bg);
     color: var(--modal-info-icon-color);
     box-shadow: 0 4px 12px var(--modal-info-icon-shadow);
}

/* Toast Content */
.modal-toast-content {
     flex: 1;
     min-width: 0;
}

.modal-toast-title {
     font-family: var(--modal-font);
     font-size: 14px;
     font-weight: 700;
     color: var(--modal-text-strong);
     margin: 0 0 3px 0;
     line-height: 1.3;
     letter-spacing: -0.01em;
}

.modal-toast-message {
     font-family: var(--modal-font);
     font-size: 13px;
     color: var(--modal-text);
     margin: 0;
     line-height: 1.45;
}

/* Toast Action Button (opcional — aparece quando actionLabel é passado) */
.modal-toast-action {
     background: rgba(0, 0, 0, .06);
     border: 1px solid rgba(0, 0, 0, .12);
     color: var(--modal-text-strong);
     padding: 6px 12px;
     border-radius: 6px;
     font-size: 12px;
     font-weight: 600;
     cursor: pointer;
     flex-shrink: 0;
     white-space: nowrap;
     transition: background-color 0.15s ease;
     line-height: 1.3;
}

.modal-toast-action:hover {
     background: rgba(0, 0, 0, .12);
}

.modal-toast.type-success .modal-toast-action {
     background: rgba(22, 163, 74, .12);
     border-color: rgba(22, 163, 74, .25);
     color: #15803d;
}

.modal-toast.type-success .modal-toast-action:hover {
     background: rgba(22, 163, 74, .22);
}

/* Toast Close Button */
.modal-toast-close {
     background: transparent;
     border: none;
     color: var(--modal-text-muted);
     cursor: pointer;
     padding: 6px;
     margin: -6px -4px -6px 0;
     border-radius: 8px;
     transition: background-color 0.15s ease, color 0.15s ease;
     line-height: 1;
     align-self: flex-start;
     flex-shrink: 0;
}

.modal-toast-close svg {
     width: 16px;
     height: 16px;
     display: block;
}

.modal-toast-close:hover {
     background: var(--modal-surface-hover);
     color: var(--modal-text-strong);
}

/* Toast Progress Bar */
.modal-toast-progress {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: rgba(0, 0, 0, 0.06);
     border-radius: 0 0 12px 12px;
}

.modal-toast-progress-bar {
     height: 100%;
     width: 100%;
     transform-origin: left;
     animation: toastProgress linear forwards;
     border-radius: 0 0 12px 12px;
}

@keyframes toastProgress {
     from {
          transform: scaleX(1);
     }

     to {
          transform: scaleX(0);
     }
}

.modal-toast.type-success .modal-toast-progress-bar {
     background: var(--modal-success-accent);
}

.modal-toast.type-error .modal-toast-progress-bar {
     background: var(--modal-error-accent);
}

.modal-toast.type-warning .modal-toast-progress-bar {
     background: var(--modal-warning-accent);
}

.modal-toast.type-info .modal-toast-progress-bar {
     background: var(--modal-info-accent);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 480px) {
     .modal-card {
          min-width: 0;
          width: 95%;
          max-width: none;
          margin: 16px;
     }

     .modal-header {
          padding: 16px 18px;
     }

     .modal-body {
          padding: 16px 18px;
     }

     .modal-footer {
          padding: 14px 18px 16px;
          flex-direction: column;
     }

     .modal-btn {
          width: 100%;
     }

     .modal-toast-container {
          left: 12px;
          right: 12px;
          bottom: 12px;
          max-width: none;
          width: auto;
     }

     .modal-toast {
          border-radius: 14px;
     }

     .modal-toast-icon {
          width: 40px;
          height: 40px;
     }

     .modal-toast-icon svg {
          width: 20px;
          height: 20px;
     }
}