/* ========================================================
   YHC THEME - Modern Document & Cloud Management
   Mobile-Optimized & Responsive Design System
   ======================================================== */

:root {
  --yhc-primary: #0f766e;
  --yhc-primary-light: #14b8a6;
  --yhc-primary-dark: #115e59;
  --yhc-accent: #0284c7;
  --yhc-accent-light: #38bdf8;
  --yhc-bg: #f8fafc;
  --yhc-surface: #ffffff;
  --yhc-surface-hover: #f1f5f9;
  --yhc-border: #e2e8f0;
  --yhc-text: #0f172a;
  --yhc-text-muted: #64748b;
  --yhc-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --yhc-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --yhc-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --yhc-glow: 0 0 20px rgba(15, 118, 110, 0.25);
  
  /* Mobile Safe Area Inset Defaults */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

.dark {
  --yhc-bg: #090d16;
  --yhc-surface: #111827;
  --yhc-surface-hover: #1f2937;
  --yhc-border: #1f293d;
  --yhc-text: #f8fafc;
  --yhc-text-muted: #94a3b8;
  --yhc-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --yhc-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4);
  --yhc-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5);
  --yhc-glow: 0 0 25px rgba(20, 184, 166, 0.2);
}

/* Base ergonomics for mobile touch */
* {
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: var(--yhc-bg);
  color: var(--yhc-text);
  transition: background-color 0.25s ease, color 0.25s ease;
  min-height: 100vh;
  min-height: 100dvh; /* Dynamic viewport height for mobile browsers */
}

/* Prevent auto-zoom on iOS when tapping inputs */
@media (max-width: 768px) {
  input[type="text"],
  input[type="password"],
  input[type="search"],
  input[type="email"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Glassmorphism Top Navigation */
.yhc-navbar {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background-color: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--yhc-border);
}

.dark .yhc-navbar {
  background-color: rgba(17, 24, 39, 0.92);
}


/* Brand Gradients */
.yhc-gradient-text {
  background: linear-gradient(135deg, #0d9488 0%, #0284c7 60%, #4338ca 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.yhc-gradient-bg {
  background: linear-gradient(135deg, #0f766e 0%, #0369a1 100%);
}

.yhc-card {
  background-color: var(--yhc-surface);
  border: 1px solid var(--yhc-border);
  box-shadow: var(--yhc-shadow-sm);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
}

/* Touch active state for cards on mobile */
.yhc-card:active {
  transform: scale(0.99);
}

@media (min-width: 768px) {
  .yhc-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--yhc-shadow-md);
    border-color: rgba(15, 118, 110, 0.3);
  }
}

/* Drag and Drop / Touch Upload Zone */
.yhc-dropzone {
  border: 2px dashed #94a3b8;
  background-color: var(--yhc-surface);
  transition: all 0.2s ease;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.yhc-dropzone:active,
.yhc-dropzone.dragover {
  border-color: var(--yhc-primary-light);
  background-color: rgba(20, 184, 166, 0.08);
  box-shadow: var(--yhc-glow);
  transform: scale(0.995);
}

/* Mobile Scrollbar hiding & smooth scroll */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

/* Custom Scrollbars for desktop */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb {
  background: #334155;
}

/* Badges */
.badge-pdf { background-color: #fee2e2; color: #b91c1c; }
.badge-doc { background-color: #dbeafe; color: #1d4ed8; }
.badge-xls { background-color: #dcfce7; color: #15803d; }
.badge-ppt { background-color: #ffedd5; color: #c2410c; }
.badge-img { background-color: #e0e7ff; color: #4338ca; }
.badge-vid { background-color: #f3e8ff; color: #7e22ce; }
.badge-zip { background-color: #fef3c7; color: #b45309; }
.badge-code { background-color: #cffafe; color: #0e7490; }

.dark .badge-pdf { background-color: rgba(239, 68, 68, 0.2); color: #fca5a5; }
.dark .badge-doc { background-color: rgba(59, 130, 246, 0.2); color: #93c5fd; }
.dark .badge-xls { background-color: rgba(34, 197, 94, 0.2); color: #86efac; }
.dark .badge-ppt { background-color: rgba(249, 115, 22, 0.2); color: #fdba74; }
.dark .badge-img { background-color: rgba(99, 102, 241, 0.2); color: #a5b4fc; }
.dark .badge-vid { background-color: rgba(168, 85, 247, 0.2); color: #d8b4fe; }
.dark .badge-zip { background-color: rgba(245, 158, 11, 0.2); color: #fcd34d; }
.dark .badge-code { background-color: rgba(6, 182, 212, 0.2); color: #67e8f9; }

/* Modal overlay */
.yhc-modal-overlay {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background-color: rgba(15, 23, 42, 0.65);
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

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

.animate-fade-in {
  animation: fadeIn 0.25s ease-out forwards;
}

.animate-slide-up-mobile {
  animation: slideUpMobile 0.25s ease-out forwards;
}

/* Minimum touch targets for mobile accessibility */
.touch-target {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}