/* 
 * Deutcheswift Premium Modern Design Stylesheet
 * Integrates glassmorphism, modern typography (Inter & Outfit),
 * smooth micro-animations, and unified light/dark color variables.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap');

:root {
  /* Premium Light Theme Colors */
  --brand-primary: #277768;      /* Base Dark Teal Green */
  --brand-primary-glow: rgba(39, 119, 104, 0.15);
  --brand-accent: #42a893;       /* Secondary Emerald Green */
  
  --surface-bg: #f8fafc;         /* Slate 50 */
  --surface-card: #ffffff;
  --surface-border: #e2e8f0;     /* Slate 200 */
  --surface-shadow: 0 10px 30px -10px rgba(148, 163, 184, 0.12);
  
  --text-main: #0f172a;          /* Slate 900 */
  --text-muted: #64748b;         /* Slate 500 */
  
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Outfit', sans-serif;
}

.dark, [data-theme="dark"] {
  /* Premium Glassmorphic Dark Theme Colors */
  --brand-primary: #42a893;      /* Secondary Emerald Green */
  --brand-primary-glow: rgba(66, 168, 147, 0.2);
  --brand-accent: #a5d89f;       /* Light Mint Green */
  
  --surface-bg: #090d16;         /* Deep Slate 950 */
  --surface-card: rgba(17, 24, 39, 0.7); /* Slate 900 70% opacity */
  --surface-border: rgba(255, 255, 255, 0.08);
  --surface-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5);
  
  --text-main: #f8fafc;          /* Slate 50 */
  --text-muted: #94a3b8;         /* Slate 400 */
}

/* --- Base Overrides --- */
body {
  font-family: var(--font-sans) !important;
  background-color: var(--surface-bg) !important;
  color: var(--text-main) !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, [class*="balance"], [class*="amount"] {
  font-family: var(--font-display) !important;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* --- Glassmorphism Box Components --- */
.box, .card, [class*="bg-n0"] {
  background: var(--surface-card) !important;
  border: 1px solid var(--surface-border) !important;
  box-shadow: var(--surface-shadow) !important;
  border-radius: 16px !important; /* Premium semi-rounded */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease;
}

.box:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.15) !important;
}

/* --- Input Field Upgrades (No childish bubbles) --- */
input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
select,
textarea {
  border-radius: 12px !important; /* Modern rounded-xl instead of rounded-3xl */
  border: 1px solid var(--surface-border) !important;
  background: rgba(15, 23, 42, 0.03) !important;
  color: var(--text-main) !important;
  padding: 12px 18px !important;
  font-size: 0.95rem !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.dark input[type="text"],
.dark input[type="number"],
.dark input[type="password"],
.dark input[type="email"],
.dark select,
.dark textarea {
  background: rgba(255, 255, 255, 0.03) !important;
}

input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 4px var(--brand-primary-glow) !important;
  background: var(--surface-card) !important;
}

/* Override labels for inputs */
label {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
  margin-bottom: 6px !important;
  display: block;
}

/* --- Modern Buttons --- */
.btn, button.continue, button[type="submit"] {
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-accent) 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 12px 24px !important;
  cursor: pointer;
  box-shadow: 0 4px 14px 0 var(--brand-primary-glow) !important;
  transition: all 0.25s ease !important;
}

.btn:hover, button.continue:hover, button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px 0 var(--brand-primary-glow) !important;
  filter: brightness(1.08);
}

.btn-outline, button.cancel {
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  background: transparent !important;
  color: var(--brand-primary) !important;
  border: 1px solid var(--brand-primary) !important;
  border-radius: 12px !important;
  padding: 12px 24px !important;
  transition: all 0.25s ease !important;
}

.btn-outline:hover, button.cancel:hover {
  background: var(--brand-primary-glow) !important;
  border-color: var(--brand-primary) !important;
}

/* --- Responsive & Glassmorphic Tables --- */
table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 6px !important;
}

thead tr {
  background: transparent !important;
}

thead th {
  color: var(--text-muted) !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 12px 24px !important;
  border-bottom: 2px solid var(--surface-border) !important;
}

tbody tr {
  background: rgba(255, 255, 255, 0.01) !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
}

tbody tr:hover {
  background: rgba(59, 130, 246, 0.04) !important;
  transform: scale(1.002);
}

.dark tbody tr:hover {
  background: rgba(96, 165, 250, 0.04) !important;
}

tbody td {
  padding: 16px 24px !important;
  border-bottom: 1px solid var(--surface-border) !important;
  color: var(--text-main) !important;
}

/* --- Modals with Smooth Animation --- */
.ac-modal-overlay, .notification-modal {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  background: rgba(9, 13, 22, 0.6) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s !important;
}

.ac-modal-overlay.open, .notification-modal[style*="display: flex"], .notification-modal.open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.modal-inner, .notification-content {
  background: var(--surface-card) !important;
  border: 1px solid var(--surface-border) !important;
  box-shadow: var(--surface-shadow) !important;
  border-radius: 20px !important;
  max-width: 500px !important;
  width: 90% !important;
  padding: 30px !important;
  transform: scale(0.9) translateY(20px);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.ac-modal-overlay.open .modal-inner, 
.notification-modal.open .notification-content {
  transform: scale(1) translateY(0) !important;
}

/* --- Modal Typography and Elements --- */
.notification-content h3 {
  color: var(--text-main) !important;
}

.notification-content p {
  color: var(--text-muted) !important;
}

.notification-content .btn-outline {
  border: 1px solid var(--surface-border) !important;
  color: var(--text-muted) !important;
  background: transparent !important;
}

.notification-content .btn-outline:hover {
  background: rgba(15, 23, 42, 0.05) !important;
  color: var(--text-main) !important;
}

.dark .notification-content .btn-outline:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* --- Custom Alert Rows --- */
.received-row {
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.06) 0%, rgba(99, 102, 241, 0.06) 100%) !important;
  border-left: 4px solid var(--brand-primary) !important;
}

.received-label {
  color: var(--brand-primary) !important;
  font-weight: 600 !important;
}

/* --- Page Transitions and Smooth Animations --- */
.vertical {
  animation: fadeIn 0.4s ease-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Customizer styles and scrollbar overrides */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--surface-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--surface-border);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}