/* Auth Portal - Dark modern theme */
/* Override Tailwind utility classes from portal.css */

html.h-full.bg-blue-100 {
  --tw-bg-opacity: 1 !important;
  background-color: #0f0f13 !important;
  background: #0f0f13 !important;
}

body.h-full {
  background: #0f0f13 !important;
}

/* Page wrapper */
div.app-page {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(124, 106, 239, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(99, 179, 237, 0.05) 0%, transparent 50%),
    #0f0f13 !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1rem !important;
}

/* Content area */
div.app-content {
  width: 100% !important;
  max-width: 460px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* Main card */
div.app-container {
  --tw-bg-opacity: 1 !important;
  background-color: #16162a !important;
  background: #16162a !important;
  border: 1px solid rgba(124, 106, 239, 0.12) !important;
  border-radius: 20px !important;
  padding: 2.5rem 2rem !important;
  --tw-shadow: none !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(124, 106, 239, 0.04) !important;
}

/* Logo area */
div.logo-col-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding-bottom: 1.5rem !important;
  border-bottom: 1px solid rgba(124, 106, 239, 0.1) !important;
  margin-bottom: 1.25rem !important;
}

img.logo-img {
  height: 52px !important;
  width: auto !important;
  filter: brightness(1.5) saturate(0.8) !important;
  margin: 0 !important;
}

h2.logo-col-txt {
  --tw-text-opacity: 1 !important;
  color: #e8e6f0 !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  text-align: center !important;
}

/* Subtitle */
p.app-inp-lbl {
  --tw-text-opacity: 1 !important;
  color: #6e6c82 !important;
  font-size: 0.85rem !important;
  text-align: center !important;
  padding-bottom: 0.25rem !important;
}

/* Grid container */
div.mt-3.grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

div.pb-2 {
  padding-bottom: 0 !important;
}

/* App button row */
div.app-portal-btn-box {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  border-radius: 12px !important;
  border-width: 0 !important;
  border: 1px solid rgba(124, 106, 239, 0.08) !important;
  background: rgba(124, 106, 239, 0.04) !important;
  --tw-border-opacity: 0 !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden !important;
}

div.app-portal-btn-box:hover {
  background: rgba(124, 106, 239, 0.1) !important;
  border-color: rgba(124, 106, 239, 0.25) !important;
  transform: translateX(4px) !important;
}

/* Icon cell */
div.app-portal-btn-img {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgba(124, 106, 239, 0.1) !important;
  background: rgba(124, 106, 239, 0.1) !important;
  border-radius: 10px !important;
  margin: 6px !important;
  --tw-shadow: none !important;
  box-shadow: none !important;
}

div.app-portal-btn-img i {
  font-size: 1.2rem !important;
  --tw-text-opacity: 1 !important;
  color: #9b8cfc !important;
}

/* Text cell */
div.app-portal-btn-txt {
  flex-grow: 1 !important;
  padding: 0.75rem 0.75rem 0.75rem 0.5rem !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  --tw-text-opacity: 1 !important;
  color: #d0cee0 !important;
  --tw-shadow: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  line-height: 1.4 !important;
}

div.app-portal-btn-txt span {
  color: #d0cee0 !important;
}

div.app-portal-btn-box:hover div.app-portal-btn-txt {
  --tw-bg-opacity: 0 !important;
  background-color: transparent !important;
  background: transparent !important;
}

div.app-portal-btn-box:hover div.app-portal-btn-txt span {
  color: #e8e6f0 !important;
}

/* Sign out - last item, different style */
div.pb-2:last-child {
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(124, 106, 239, 0.08) !important;
}

div.pb-2:last-child div.app-portal-btn-box {
  background: rgba(239, 68, 68, 0.04) !important;
  border-color: rgba(239, 68, 68, 0.1) !important;
}

div.pb-2:last-child div.app-portal-btn-box:hover {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.25) !important;
}

div.pb-2:last-child div.app-portal-btn-img {
  background: rgba(239, 68, 68, 0.1) !important;
}

div.pb-2:last-child div.app-portal-btn-img i {
  color: #f87171 !important;
}

div.pb-2:last-child div.app-portal-btn-txt,
div.pb-2:last-child div.app-portal-btn-txt span {
  color: #e87676 !important;
}

/* Links */
a {
  text-decoration: none !important;
  color: inherit !important;
}

/* Login page button styles */
div.app-login-btn-box {
  background: rgba(124, 106, 239, 0.06) !important;
  border: 1px solid rgba(124, 106, 239, 0.12) !important;
  border-radius: 12px !important;
  transition: all 0.2s ease !important;
}

div.app-login-btn-box:hover {
  background: rgba(124, 106, 239, 0.12) !important;
  border-color: rgba(124, 106, 239, 0.25) !important;
  transform: translateX(4px) !important;
}