/* === Material 3 Core Styles - Complete Responsive Redesign === */
:root {
  --m3-primary: #00004c;
  --m3-on-primary: #ffffff;
  --m3-primary-container: #00008b;
  --m3-on-primary-container: #7981f5;
  --m3-secondary: #006c49;
  --m3-on-secondary: #ffffff;
  --m3-secondary-container: #6cf8bb;
  --m3-surface: #f8f9ff;
  --m3-on-surface: #0b1c30;
  --m3-surface-dim: #cbdbf5;
  --m3-surface-bright: #f8f9ff;
  --m3-surface-container-lowest: #ffffff;
  --m3-surface-container-low: #eff4ff;
  --m3-surface-container: #e5eeff;
  --m3-surface-container-high: #dce9ff;
  --m3-surface-container-highest: #d3e4fe;
  --m3-on-surface-variant: #454653;
  --m3-outline: #767684;
  --m3-outline-variant: #c6c5d5;
  --m3-error: #ba1a1a;
  --m3-on-error: #ffffff;
  --m3-error-container: #ffdad6;
  --m3-on-error-container: #93000a;
  --m3-background: #f8f9ff;
  --m3-on-background: #0b1c30;
  --m3-inverse-surface: #213145;
  --m3-inverse-on-surface: #eaf1ff;
  --m3-inverse-primary: #bfc2ff;

  /* Content width constraints */
  --content-max-width: 1200px;
  --content-padding-sm: 16px;
  --content-padding-md: 24px;
  --content-padding-lg: 32px;
  --content-padding-xl: 40px;
}

body {
  background: var(--m3-background);
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
  min-height: 100dvh;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--m3-on-surface);
}

/* ========== CONTENT CONTAINERS ========== */
.content-container {
  width: 100%;
  max-width: var(--content-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--content-padding-sm);
  padding-right: var(--content-padding-sm);
}

.content-container-narrow {
  width: 100%;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--content-padding-sm);
  padding-right: var(--content-padding-sm);
}

/* Tablet */
@media (min-width: 640px) {
  :root {
    --content-padding-sm: 24px;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  :root {
    --content-padding-sm: 32px;
  }
  .content-container {
    padding-left: var(--content-padding-lg);
    padding-right: var(--content-padding-lg);
  }
}

/* Ultrawide */
@media (min-width: 1600px) {
  .content-container {
    max-width: 1400px;
  }
  .content-container-narrow {
    max-width: 1000px;
  }
}

/* ========== GRID SYSTEMS ========== */
.doc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (min-width: 480px) {
  .doc-grid {
    gap: 16px;
  }
}

@media (min-width: 640px) {
  .doc-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

@media (min-width: 1024px) {
  .doc-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
}

@media (min-width: 1280px) {
  .doc-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (min-width: 1600px) {
  .doc-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* Category grid */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (min-width: 480px) {
  .cat-grid { gap: 16px; }
}

@media (min-width: 768px) {
  .cat-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

@media (min-width: 1024px) {
  .cat-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
}

/* ========== SECTION LAYOUTS ========== */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(0, 0, 139, 0.08);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(240, 243, 255, 0.92));
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  animation: sectionSlideIn 0.5s cubic-bezier(0.16,1,0.3,1) both;
}

.section-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
  transform: translateX(-120%);
  animation: headerShimmer 3.2s ease-in-out infinite;
}

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

@keyframes headerShimmer {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

@media (min-width: 640px) {
  .section-header {
    margin-bottom: 20px;
    padding: 14px 16px;
  }
}

.section-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 1;
}

@media (max-width: 639px) {
  .section-title-group {
    gap: 8px;
  }
}

.section-title-icon {
  width: 26px;
  height: 26px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
  animation: iconFloat 3s ease-in-out infinite alternate;
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s ease;
}

.section-title-icon:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}

.section-title-icon svg {
  width: 13px;
  height: 13px;
  display: block;
}

@media (min-width: 640px) {
  .section-title-icon {
    width: 30px;
    height: 30px;
  }
  .section-title-icon svg {
    width: 15px;
    height: 15px;
  }
}

@media (min-width: 768px) {
  .section-title-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
  }
  .section-title-icon svg {
    width: 18px;
    height: 18px;
  }
}

@keyframes iconFloat {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-3px) scale(1.02); }
}

.section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--m3-on-surface);
  letter-spacing: -0.3px;
  position: relative;
  z-index: 1;
}

@media (min-width: 640px) {
  .section-title {
    font-size: 18px;
  }
}

@media (min-width: 768px) {
  .section-title {
    font-size: 22px;
  }
}

@media (min-width: 1024px) {
  .section-title {
    font-size: 24px;
  }
}

.section-link {
  font-size: 12px;
  color: var(--m3-primary);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16,1,0.3,1);
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,139,0.06);
  border: 1px solid rgba(0,0,139,0.08);
  position: relative;
  z-index: 1;
}
.section-link:hover { background: rgba(0,0,139,0.12); transform: translateX(2px); }
.section-link .arrow-icon {
  width: 12px;
  height: 12px;
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1);
}
.section-link:hover .arrow-icon { transform: translateX(3px); }

@media (min-width: 640px) {
  .section-link { font-size: 13px; gap: 4px; padding: 6px 14px; }
  .section-link .arrow-icon { width: 14px; height: 14px; }
}
@media (min-width: 768px) {
  .section-link { font-size: 14px; }
  .section-link .arrow-icon { width: 16px; height: 16px; }
}

/* ========== CARD STYLES ========== */
.doc-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

.doc-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.doc-card:active {
  transform: scale(0.97);
}

@media (min-width: 1024px) {
  .doc-card {
    border-radius: 20px;
  }
}

/* Category cards */
.cat-card {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
  text-align: center;
}

.cat-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

@media (min-width: 1024px) {
  .cat-card {
    border-radius: 20px;
    padding: 28px 24px;
  }
}

/* ========== HERO SECTION ========== */
.hero-section {
  border-radius: 20px;
  overflow: hidden;
  min-height: 180px;
}

@media (min-width: 640px) {
  .hero-section {
    border-radius: 24px;
    min-height: 220px;
  }
}

@media (min-width: 1024px) {
  .hero-section {
    border-radius: 28px;
    min-height: 280px;
  }
}

@media (min-width: 1280px) {
  .hero-section {
    min-height: 320px;
  }
}

/* ========== TOP APP BAR ========== */
.app-bar {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,0,0.05);
  position: sticky;
  top: 0;
  z-index: 50;
}

@media (min-width: 1024px) {
  .app-bar {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

/* ========== BOTTOM NAVIGATION ========== */
.bottom-nav {
  background: #ffffff;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
  padding: 4px 8px calc(4px + env(safe-area-inset-bottom, 0px));
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  min-height: 68px;
}

.bottom-nav .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 2px;
  padding: 4px 4px 6px;
  border-radius: 16px;
  min-width: 48px;
  max-width: 80px;
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
  color: #767684;
  text-decoration: none;
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

@media (min-width: 640px) {
  .bottom-nav .nav-item {
    max-width: 100px;
    padding: 4px 12px 6px;
  }
}

@media (min-width: 768px) {
  .bottom-nav {
    max-width: 480px;
    margin: 0 auto;
    border-radius: 20px 20px 0 0;
  }
}

.bottom-nav .nav-item .nav-icon {
  font-size: 26px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
}

.bottom-nav .nav-item .nav-label {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.3px;
  transition: color 0.2s ease;
  margin-top: 1px;
}

.bottom-nav .nav-item.active {
  color: #00008b;
}

.bottom-nav .nav-item.active .nav-icon {
  font-variation-settings: 'FILL' 1;
  background: rgba(0,0,139,0.12);
  color: #00008b;
  width: 40px;
  height: 28px;
  border-radius: 14px;
}

.bottom-nav .nav-item.active .nav-label {
  color: #00008b;
  font-weight: 600;
}

.bottom-nav .nav-item:not(.active):active .nav-icon {
  background: rgba(0,0,0,0.06);
  transform: scale(0.92);
}

/* ========== MATERIAL ICONS ========== */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.filled-icon {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ========== GLASS EFFECTS ========== */
.glass-header {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(248,249,255,0.7);
}

.glass-overlay {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ========== ANIMATIONS ========== */
@keyframes slideUpFade { from { opacity:0; transform:translateY(20px) } to { opacity:1; transform:translateY(0) } }
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
@keyframes scaleIn { from { opacity:0; transform:scale(0.9) } to { opacity:1; transform:scale(1) } }
@keyframes slideUp { from { transform:translateY(100%) } to { transform:translateY(0) } }
@keyframes slideDown { from { transform:translateY(0) } to { transform:translateY(100%) } }
@keyframes float { 0%,100% { transform:translateY(0px) } 50% { transform:translateY(-16px) } }
@keyframes shimmer { 0% { background-position:-200% 0 } 100% { background-position:200% 0 } }
@keyframes bounceIn { 0% { transform:scale(0.3);opacity:0 } 50% { transform:scale(1.1) } 70% { transform:scale(0.9) } 100% { transform:scale(1);opacity:1 } }
@keyframes spin { from { transform:rotate(0deg) } to { transform:rotate(360deg) } }
@keyframes rippleAnim { to { transform:scale(4); opacity:0 } }

.slide-up { animation: slideUpFade 0.35s cubic-bezier(0.4,0,0.2,1) both; }
.fade-in { animation: fadeIn 0.25s ease both; }
.scale-in { animation: scaleIn 0.3s cubic-bezier(0.34,1.56,0.64,1) both; }
.bounce-in { animation: bounceIn 0.6s cubic-bezier(0.34,1.56,0.64,1) both; }
.floating { animation: float 6s ease-in-out infinite; }

.active-scale:active { transform: scale(0.95); }
.btn-active:active { transform: scale(0.96); }
.card-hover { transition: transform 0.2s, box-shadow 0.2s; }
.card-hover:active { transform: scale(0.97); }

.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ========== INPUT M3 ========== */
.input-m3 {
  background: var(--m3-surface-container-low);
  border-bottom: 2px solid var(--m3-outline-variant);
  border-radius: 24px 24px 0 0;
  transition: all 0.2s ease;
}

.input-m3:focus-within {
  border-bottom-color: var(--m3-primary-container);
  background: var(--m3-surface-container);
}

/* ========== SKELETON SHIMMER ========== */
.shimmer-bg {
  background: linear-gradient(90deg, #eff4ff 25%, #e5eeff 50%, #eff4ff 75%);
  background-size: 200% 100%;
  animation: shimmer 2s linear infinite;
}
.shimmer {
  background: linear-gradient(90deg, #e8e8ee 25%, #f0f0f5 50%, #e8e8ee 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 12px;
}

.premium-shimmer {
  background: linear-gradient(90deg, #00008b 0%, #3037aa 50%, #00008b 100%);
  background-size: 200% auto;
  animation: shimmer 3s linear infinite;
}

/* ========== AVATAR ========== */
.avatar-glow { box-shadow: 0 0 0 4px rgba(0,0,139,0.15); }

/* ========== SCROLLBAR ========== */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--m3-outline-variant); border-radius: 4px; }

/* ========== BOTTOM SHEETS ========== */
.bottom-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}

@media (min-width: 768px) {
  .bottom-sheet-overlay {
    align-items: center;
  }
}

.bottom-sheet-panel {
  background: #ffffff;
  border-radius: 28px 28px 0 0;
  width: 100%;
  max-width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  animation: slideUp 0.35s cubic-bezier(0.2, 0, 0, 1);
  will-change: transform;
  touch-action: none;
}

.bottom-sheet-panel.closing {
  animation: slideDown 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@media (min-width: 768px) {
  .bottom-sheet-panel {
    border-radius: 28px;
    max-width: 480px;
    max-height: 80vh;
    animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .bottom-sheet-panel.closing {
    animation: fadeIn 0.15s ease reverse;
  }
}

.sheet-handle {
  width: 40px;
  height: 4px;
  background: #c6c5d5;
  border-radius: 2px;
  margin: 10px auto 4px;
  flex-shrink: 0;
}

.bottom-sheet-in {
  animation: slideUp 0.4s cubic-bezier(0.2, 0, 0, 1) forwards;
}

@media (min-width: 1024px) {
  .bottom-sheet-desktop {
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 32px !important;
    max-height: 90vh;
  }
}

/* ========== RESPONSIVE HELPERS ========== */
@media (min-width: 1024px) {
  .desktop-only { display: block; }
  .mobile-only { display: none; }
}

@media (max-width: 1023px) {
  .desktop-only { display: none; }
  .mobile-only { display: block; }
}

/* ========== EXPIRY / LIMIT BADGES ========== */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.status-badge.active { background: #ecfdf5; color: #065f46; }
.status-badge.expired { background: #fef2f2; color: #991b1b; }
.status-badge.limited { background: #fffbeb; color: #92400e; }
.status-badge.pending { background: #eff6ff; color: #1e40af; }

/* ========== RESPONSIVE TYPOGRAPHY ========== */
@media (min-width: 640px) {
  .text-responsive-sm { font-size: 14px; }
  .text-responsive-base { font-size: 16px; }
  .text-responsive-lg { font-size: 20px; }
  .text-responsive-xl { font-size: 28px; }
  .text-responsive-2xl { font-size: 36px; }
}

@media (min-width: 1024px) {
  .text-responsive-sm { font-size: 15px; }
  .text-responsive-base { font-size: 17px; }
  .text-responsive-lg { font-size: 22px; }
  .text-responsive-xl { font-size: 32px; }
  .text-responsive-2xl { font-size: 44px; }
}

/* ========== STAGGERED ANIMATION ========== */
.stagger > * { animation: fadeUp 0.4s cubic-bezier(0.16,1,0.3,1) both; }
.stagger > *:nth-child(1) { animation-delay: 0.02s; }
.stagger > *:nth-child(2) { animation-delay: 0.05s; }
.stagger > *:nth-child(3) { animation-delay: 0.08s; }
.stagger > *:nth-child(4) { animation-delay: 0.11s; }
.stagger > *:nth-child(5) { animation-delay: 0.14s; }
.stagger > *:nth-child(6) { animation-delay: 0.17s; }
.stagger > *:nth-child(7) { animation-delay: 0.20s; }
.stagger > *:nth-child(8) { animation-delay: 0.23s; }
.stagger > *:nth-child(9) { animation-delay: 0.26s; }
.stagger > *:nth-child(10) { animation-delay: 0.29s; }

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

/* ========== RIPPLE EFFECT ========== */
.ripple {
  position: relative;
  overflow: hidden;
}

.ripple::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--x,50%) var(--y,50%), rgba(0,0,139,0.12) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.ripple:active::after { opacity: 1; }

/* ========== RESPONSIVE TABLES ========== */
@media (max-width: 640px) {
  .table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ========== RESPONSIVE MARGINS ========== */
@media (min-width: 640px) {
  .section-margin { margin-top: 32px; margin-bottom: 32px; }
}

@media (min-width: 1024px) {
  .section-margin { margin-top: 48px; margin-bottom: 48px; }
}

/* ========== PAGE TRANSITIONS ========== */
.page-view { animation: pageIn 0.35s cubic-bezier(0.16,1,0.3,1); }
@keyframes pageIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }

/* ========== CHIP COMPONENT ========== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 100px;
  border: 1.5px solid #c6c5d5;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16,1,0.3,1);
  font-size: 14px;
  font-weight: 500;
  background: white;
  user-select: none;
}

.chip:active { transform: scale(0.95); }
.chip.active { background: var(--m3-primary-container); color: #fff; border-color: var(--m3-primary-container); }

/* ========== PAGE SPECIFIC ========== */
.home-content {
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
}

@media (min-width: 768px) {
  .home-content { padding: 0 24px; }
}

@media (min-width: 1280px) {
  .home-content { padding: 0 32px; }
}

/* Card 3D effect */
.card-3d {
  transition: all 0.2s cubic-bezier(0.16,1,0.3,1);
}
.card-3d:active {
  transform: scale(0.97);
}