/* ============================================
   AIXFamily Shared Theme
   Used by: index.html, app-management.html
   ============================================ */

/* Base */
* { font-family: 'Inter', sans-serif; }

body {
  color: white;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Gradient Background */
.gradient-bg {
  background: linear-gradient(135deg, #1e3a8a 0%, #3730a3 25%, #6366f1 50%, #8b5cf6 75%, #a855f7 100%);
}

/* Glass Card */
.glass-card {
  background: rgba(31, 41, 55, 0.8);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(75, 85, 99, 0.3);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Transitions */
.smooth-transition {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

/* Animations */
.fade-in { animation: fadeIn 0.8s ease-out; }

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

.slide-up { animation: slideUp 0.6s ease-out forwards; }

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

.animate-slide-in { animation: slideIn 0.3s ease; }

@keyframes slideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.threat-flash { animation: threatFlash 0.5s ease-out; }

@keyframes threatFlash {
  from { background-color: rgba(239, 68, 68, 0.3); }
  to { background-color: transparent; }
}

.pulse-glow { animation: pulseGlow 2s infinite; }

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.5); }
  50% { box-shadow: 0 0 40px rgba(99, 102, 241, 0.8), 0 0 60px rgba(139, 92, 246, 0.3); }
}

/* Mode Active */
.mode-active {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 0 25px rgba(16, 185, 129, 0.5);
}

/* Dark dropdown styling */
select {
  background: linear-gradient(to right, #a855f7, #3b82f6) !important;
  color: white;
}

select option {
  background: #7c3aed;
  color: white;
  padding: 12px 16px;
}

select option:hover,
select option:focus {
  background: #6366f1 !important;
}

select option:checked {
  background: #8b5cf6;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(99, 102, 241, 0.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(99, 102, 241, 0.5); }

/* ============================================
   Modal Fixes (all screen sizes)
   Explicit ID selectors for maximum reliability
   ============================================ */

/* Make all modal overlays scrollable */
#unbindModal,
#childModal,
#deleteChildModal,
#authCodeModal,
#deviceModal,
#deleteDeviceModal,
#notificationDetailModal,
#allNotificationsModal,
#profileModal {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  align-items: flex-start !important;
  padding: 20px !important;
}

/* Inner modal cards - auto-center via margin */
#unbindModal > .glass-card,
#childModal > .glass-card,
#deleteChildModal > .glass-card,
#authCodeModal > .glass-card,
#deviceModal > .glass-card,
#deleteDeviceModal > .glass-card,
#notificationDetailModal > .glass-card,
#allNotificationsModal > .glass-card,
#profileModal > div:last-child {
  flex-shrink: 0 !important;
  margin: auto !important;
}

/* Modal inputs: prevent iOS zoom on focus */
#unbindModal input, #unbindModal select, #unbindModal textarea,
#childModal input, #childModal select, #childModal textarea,
#deleteChildModal input, #deleteChildModal select,
#authCodeModal input, #authCodeModal select,
#deviceModal input, #deviceModal select, #deviceModal textarea,
#deleteDeviceModal input, #deleteDeviceModal select,
#notificationDetailModal input, #notificationDetailModal select,
#allNotificationsModal input, #allNotificationsModal select,
#profileModal input, #profileModal select, #profileModal textarea {
  font-size: 16px !important;
  min-height: 44px;
}

/* Modal selects: solid dark bg instead of gradient */
#childModal select,
#deviceModal select,
#profileModal select {
  background: rgba(30, 30, 46, 0.95) !important;
}

/* ============================================
   Mobile Responsive: max-width 640px
   ============================================ */
@media (max-width: 640px) {

  /* --- HEADER NAV --- */
  nav {
    padding: 8px 12px !important;
  }
  /* Hide subtitle text (p tag right after h1) */
  nav h1 + p {
    display: none !important;
  }
  /* Hide Active Mode indicator by ID */
  #activeModeIndicator {
    display: none !important;
  }
  /* Hide "All Protected" div (sibling right after mode indicator) */
  #activeModeIndicator + div {
    display: none !important;
  }
  /* Compact nav title */
  nav h1 {
    font-size: 15px !important;
    white-space: nowrap;
  }
  /* Truncate welcome user name */
  #welcomeUser {
    font-size: 13px !important;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Shrink sign out */
  nav .text-red-400 {
    font-size: 11px !important;
  }
  /* Reduce spacing between nav items (override Tailwind space-x) */
  nav [class*="space-x"] > * + * {
    margin-left: 8px !important;
  }

  /* --- DASHBOARD CONTENT --- */
  .max-w-7xl {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Reduce card padding on dashboard */
  #dashboard .glass-card {
    padding: 14px !important;
  }

  /* Section headings */
  #dashboard h3 {
    font-size: 16px !important;
  }

  /* Stats card numbers */
  #dashboard .text-3xl {
    font-size: 1.5rem !important;
  }

  /* Threat stats grid: 1 column */
  .grid.grid-cols-3 {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* Background decorative blobs */
  .blur-3xl {
    width: 200px !important;
    height: 80px !important;
  }

  /* --- MODALS on mobile --- */
  #unbindModal,
  #childModal,
  #deleteChildModal,
  #authCodeModal,
  #deviceModal,
  #deleteDeviceModal,
  #notificationDetailModal,
  #allNotificationsModal,
  #profileModal {
    padding: 8px !important;
  }
  #unbindModal > .glass-card,
  #childModal > .glass-card,
  #deleteChildModal > .glass-card,
  #authCodeModal > .glass-card,
  #deviceModal > .glass-card,
  #deleteDeviceModal > .glass-card,
  #notificationDetailModal > .glass-card,
  #allNotificationsModal > .glass-card,
  #profileModal > div:last-child {
    padding: 16px !important;
    border-radius: 16px !important;
    margin: 8px auto !important;
  }

  /* Profile modal: stack 2-col grid to 1 column */
  #profileModal .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  /* Daily limit presets: 2 columns instead of 4 */
  .grid.grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* --- ARIA BUBBLE on mobile --- */
  .aria-bubble {
    bottom: 16px !important;
    right: 16px !important;
  }
  .aria-bubble-btn {
    width: 52px !important;
    height: 52px !important;
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.6) !important;
  }
  #ariaBubbleIcon {
    font-size: 18px !important;
  }
}

/* ============================================
   Extra small screens: max-width 480px
   ============================================ */
@media (max-width: 480px) {
  #dashboard .glass-card {
    padding: 10px !important;
  }
  #dashboard .text-3xl {
    font-size: 1.25rem !important;
  }
  #dashboard .text-2xl {
    font-size: 1.1rem !important;
  }
  nav h1 {
    font-size: 13px !important;
  }
  /* Aria bubble even smaller */
  .aria-bubble-btn {
    width: 46px !important;
    height: 46px !important;
  }
  #ariaBubbleIcon {
    font-size: 16px !important;
  }
}