@import "tailwindcss";

/* =========================
   BASE
========================= */

.dialog {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dialog.hidden {
  display: none;
}

.dialog-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

/* =========================
   BOX
========================= */

.dialog-box {
  position: relative;
  background: #fff;
  color: #000;
  width: 100%;
  max-width: 420px;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  animation: dialogIn 0.25s ease-out;
}

/* =========================
   HEADER
========================= */

.dialog-header {
  padding: 16px 20px;
  font-size: 18px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dialog-close {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
}

/* =========================
   BODY
========================= */

.dialog-body {
  padding: 20px;
  font-size: 15px;
}

/* =========================
   FOOTER
========================= */

.dialog-footer {
  padding: 14px;
  display: flex;
  gap: 10px;
  border-top: 1px solid #eee;
}

.dialog-btn {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-weight: 600;
}

/* =========================
   DEFAULT
========================= */

.dialog-cancel {
  background: #f1f1f1;
  color: #333;
}

.dialog-approve {
  background: #2563eb;
  color: #fff;
}

/* =========================
   TYPES
========================= */

.dialog.alert .dialog-box {
  background: #fff7ed;
  color: #9a3412;
}

.dialog.danger .dialog-box {
  background: #fee2e2;
  color: #7f1d1d;
}

.dialog.success .dialog-box {
  background: #dcfce7;
  color: #14532d;
}

.dialog.info .dialog-box {
  background: #e0f2fe;
  color: #075985;
}

.app-dialog-input {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #ccc;
  margin-bottom: 16px;
}

/* =========================
   ANIMATION
========================= */

@keyframes dialogIn {
  from {
    transform: scale(0.95);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* =========================
   MODAL
========================= */
.modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal.hidden {
  display: none;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

/* =========================
   BOX
========================= */

.modal-box {
  position: relative;
  background: #fff;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
  animation: modalIn 0.25s ease-out;
}

/* =========================
   SIZES
========================= */

.modal.small .modal-box {
  max-width: 400px;
}

.modal.medium .modal-box {
  max-width: 640px;
}

.modal.large .modal-box {
  max-width: 900px;
}

.modal.full .modal-box {
  max-width: 95vw;
  height: 95vh;
}

/* =========================
   HEADER
========================= */

.modal-header {
  padding: 16px 20px;
  font-size: 18px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: inherit;
}

/* =========================
   BODY
========================= */

.modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

/* =========================
   FOOTER
========================= */

.modal-footer {
  padding: 14px;
  display: flex;
  gap: 10px;
  border-top: 1px solid #eee;
}

.modal-btn {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-weight: 600;
}

/* =========================
   BUTTONS
========================= */

.modal-cancel {
  background: #f1f1f1;
  color: #333;
}

.modal-approve {
  background: #2563eb;
  color: #fff;
}

/* =========================
   HEADER TYPES
========================= */

.modal.alert .modal-header {
  background: #f97316;
}

.modal.danger .modal-header {
  background: #dc2626;
}

.modal.success .modal-header {
  background: #16a34a;
}

.modal.info .modal-header {
  background: #0284c7;
}

/* =========================
   CUSTOM CONTRACT MODAL TYPES
========================= */

.modal.contrato-modal .modal-header {
  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.modal.nf-modal .modal-header {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #1e293b;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.modal.nf-modal .modal-close {
  color: #1e293b;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.modal.nf-modal .modal-close:hover {
  opacity: 1;
}

.modal.contrato-modal .modal-close {
  color: #fff;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.modal.contrato-modal .modal-close:hover {
  opacity: 1;
}

/* =========================
   ANIMATION
========================= */

@keyframes modalIn {
  from {
    transform: scale(0.95);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

@media (max-width: 475px) {
  .xs\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* Classes para o estado ativo */
.menu-item-active {
  background: linear-gradient(to right, var(--active-color-50), var(--active-color-100)/50);
  color: var(--active-color-700);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.menu-item-active .icon-container {
  box-shadow: 0 4px 6px -1px var(--active-shadow-color);
}

.menu-item-active .fa-chevron-right {
  opacity: 1 !important;
}

/* Cores específicas para cada item */
.menu-item-active[data-menu-item="home"] {
  --active-color-50: #fef2f2;
  --active-color-100: #fee2e2;
  --active-color-700: #b91c1c;
  --active-shadow-color: rgba(239, 68, 68, 0.4);
}

.menu-item-active[data-menu-item="clientes"] {
  --active-color-50: #eff6ff;
  --active-color-100: #dbeafe;
  --active-color-700: #1d4ed8;
  --active-shadow-color: rgba(59, 130, 246, 0.4);
}

.menu-item-active[data-menu-item="fornecedores"] {
  --active-color-50: #ecfdf5;
  --active-color-100: #d1fae5;
  --active-color-700: #047857;
  --active-shadow-color: rgba(16, 185, 129, 0.4);
}

.menu-item-active[data-menu-item="contas"] {
  --active-color-50: #faf5ff;
  --active-color-100: #f3e8ff;
  --active-color-700: #7c3aed;
  --active-shadow-color: rgba(168, 85, 247, 0.4);
}

.menu-item-active[data-menu-item="plano-contas"] {
  --active-color-50: #f0fdfa;
  --active-color-100: #ccfbf1;
  --active-color-700: #0d9488;
  --active-shadow-color: rgba(20, 184, 166, 0.4);
}

.menu-item-active[data-menu-item="faturas"] {
  --active-color-50: #fffbeb;
  --active-color-100: #fef3c7;
  --active-color-700: #b45309;
  --active-shadow-color: rgba(245, 158, 11, 0.4);
}

.menu-item-active[data-menu-item="relatorios"] {
  --active-color-50: #fff1f2;
  --active-color-100: #ffe4e6;
  --active-color-700: #be123c;
  --active-shadow-color: rgba(244, 63, 94, 0.4);
}

.menu-item-active[data-menu-item="config"] {
  --active-color-50: #f9fafb;
  --active-color-100: #f3f4f6;
  --active-color-700: #374151;
  --active-shadow-color: rgba(107, 114, 128, 0.4);
}

.submenu-item {
  @apply flex items-center px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-100 transition;
}

.sidebar-icon {
  @apply w-8 h-8 rounded-lg flex items-center justify-center;
}

.sidebar-icon i {
  @apply text-white text-sm;
}

.menu-active {
  @apply bg-indigo-50 text-indigo-700 shadow-sm;
}

.submenu-active {
  @apply bg-indigo-100 text-indigo-700 shadow-sm;
}

.submenu-open {
  @apply block;
}