/* NoteX 5-Theme Engine Stylesheet */

:root, .light {
  --background: 210 40% 98%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 210 40% 98%;
  --muted: 210 40% 94%;
  --muted-foreground: 215.4 16.3% 42%;
  --border: 214.3 31.8% 84%;
}

.dark {
  --background: 224 71% 4%;
  --foreground: 213 31% 91%;
  --card: 224 71% 7%;
  --card-foreground: 213 31% 91%;
  --primary: 217.2 91.2% 59.8%;
  --primary-foreground: 222.2 47.4% 11.2%;
  --muted: 217.2 32.6% 15%;
  --muted-foreground: 215 20.2% 65.1%;
  --border: 217.2 32.6% 22%;
}

.amoled {
  --background: 0 0% 0%;
  --foreground: 0 0% 98%;
  --card: 0 0% 4%;
  --card-foreground: 0 0% 98%;
  --primary: 217.2 91.2% 59.8%;
  --primary-foreground: 0 0% 0%;
  --muted: 0 0% 12%;
  --muted-foreground: 0 0% 60%;
  --border: 0 0% 20%;
}

.glass {
  --background: 250 40% 10%;
  --foreground: 250 50% 96%;
  --card: 240 40% 12%;
  --card-foreground: 250 50% 96%;
  --primary: 262 83% 58%;
  --primary-foreground: 0 0% 100%;
  --muted: 250 30% 20%;
  --muted-foreground: 250 15% 70%;
  --border: 250 30% 30%;
}

.minimal {
  --background: 0 0% 100%;
  --foreground: 0 0% 10%;
  --card: 0 0% 97%;
  --card-foreground: 0 0% 10%;
  --primary: 0 0% 15%;
  --primary-foreground: 0 0% 100%;
  --muted: 0 0% 92%;
  --muted-foreground: 0 0% 40%;
  --border: 0 0% 82%;
}

/* ==========================================
   Base body styles with smooth transitions
   ========================================== */
body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  min-height: 100vh;
}

/* ==========================================
   Theme Transition Animation (smooth switch)
   ========================================== */
html, body,
header, footer, main, nav, section, aside,
div, span, p, a, h1, h2, h3, h4, h5, h6,
input, textarea, select, button, label,
table, tr, td, th, thead, tbody {
  transition: background-color 0.35s ease, 
              color 0.35s ease, 
              border-color 0.35s ease,
              box-shadow 0.35s ease;
}

/* ==========================================
   Glassmorphism theme background override
   ========================================== */
html.glass body {
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #090d16 100%);
  background-attachment: fixed;
}

/* ==========================================
   Shimmer Skeleton Loading Animation
   ========================================== */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton-shimmer,
.animate-pulse {
  background: linear-gradient(
    90deg,
    hsl(var(--muted)) 0%,
    hsl(var(--muted) / 0.5) 40%,
    hsl(var(--muted)) 80%
  );
  background-size: 200% 100%;
  animation: shimmer 1.8s ease-in-out infinite;
  border-radius: 12px;
}

/* ==========================================
   Fade-in Animation
   ========================================== */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.5s ease-out both;
}

/* ==========================================
   Drag & Drop Zone Highlight
   ========================================== */
.drag-over {
  border: 2px dashed hsl(var(--primary)) !important;
  background-color: hsl(var(--primary) / 0.08) !important;
  transition: all 0.2s ease;
}

/* ==========================================
   Syntax Highlighting Theme Override (dark-friendly)
   ========================================== */
.hljs {
  background: hsl(var(--muted)) !important;
  color: hsl(var(--foreground)) !important;
  border-radius: 12px;
  padding: 16px !important;
  font-size: 13px;
  line-height: 1.6;
}

/* ==========================================
   Scrollbar Styling
   ========================================== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { 
  background: hsl(var(--muted-foreground) / 0.3); 
  border-radius: 10px; 
}
::-webkit-scrollbar-thumb:hover { 
  background: hsl(var(--muted-foreground) / 0.5); 
}

/* ==========================================
   Template Card Hover Effect
   ========================================== */
.template-card {
  cursor: pointer;
  transition: all 0.2s ease;
}
.template-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px hsl(var(--primary) / 0.15);
  border-color: hsl(var(--primary) / 0.5);
}

/* ==========================================
   Social Share Button Styles
   ========================================== */
.social-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

/* ==========================================
   Cross-Device & Context Adaptation
   ========================================== */

/* Touch Target Optimization (Mobile & Tablets) */
@media (max-width: 767px), (pointer: coarse) {
  button, a, input[type="submit"], select, .touch-target {
    min-height: 44px;
    touch-action: manipulation;
  }
  
  /* Prevent text zoom on input focus in iOS Safari */
  input[type="text"],
  input[type="password"],
  input[type="email"],
  textarea,
  select {
    font-size: 16px !important;
  }
  
  /* Horizontal scrollable toolbar on small screens */
  .editor-toolbar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    scrollbar-width: none;
  }
  .editor-toolbar::-webkit-scrollbar {
    display: none;
  }
}

/* Safe area padding for notch devices (iPhone/Android) */
body {
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* ==========================================
   Print Adaptation (@media print)
   ========================================== */
@media print {
  /* Hide non-essential UI elements */
  #header-mount,
  footer,
  button,
  .no-print,
  #comment-form,
  .social-btn,
  #password-modal,
  #global-qr-modal {
    display: none !important;
  }

  body {
    background: #ffffff !important;
    color: #000000 !important;
    font-size: 12pt;
    line-height: 1.5;
    padding: 0 !important;
    margin: 0 !important;
  }

  .p-6, .p-8, .rounded-3xl, .rounded-2xl {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    background: transparent !important;
  }

  /* Expand hidden contents for print */
  #note-rendered-body {
    display: block !important;
    color: #000000 !important;
  }

  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 90%;
    color: #555;
  }
}