/* static/css/liquid_glass.css */

/* =========================================================
   Liquid Glass Component (Reusable)
   ========================================================= */
/* =========================================================
   Liquid Glass Component (Reusable)
   ========================================================= */
.apple-loupe-card {
  /* Clean Crisp White Glass */
  background: rgba(255, 255, 255, 0.85);

  /* Keep all the other properties the same! */
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1.5px solid rgba(255, 255, 255, 0.8) !important;
  box-shadow:
    inset 0 6px 12px rgba(255, 255, 255, 0.9),
    inset 0 -4px 8px rgba(0, 0, 0, 0.08),
    0 8px 24px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(0, 238, 255, 0.15) !important;
  border-radius: 22px;
  position: relative;
  overflow: hidden;
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out, background 0.2s, color 0.2s;
  cursor: pointer;
}

/* The Visible Moving Loupe Ring */
.apple-loupe-card::after {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  left: calc(var(--mx) - 20px);
  top: calc(var(--my) - 20px);
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  box-shadow:
    inset 0 4px 6px rgba(255, 255, 255, 0.8),
    inset 0 -2px 4px rgba(0, 0, 0, 0.08),
    0 4px 8px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(0, 238, 255, 0.15);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 5;
}

.apple-loupe-card:hover::after {
  opacity: 1;
}

/* Wrapper for text content to keep it above the glare */
.apple-loupe-card .card-body,
.apple-loupe-card .glass-content {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

/* SVG Text Distortion Filter */
.apple-loupe-card.is-hovering .card-body,
.apple-loupe-card.is-hovering .glass-content {
  filter: url('#apple-refraction');
}

/* =========================================================
   Component-Specific Tweaks
   ========================================================= */

/* --- Main Grid Cards Color Swap --- */
.card.apple-loupe-card .card-title,
.card.apple-loupe-card .icon-large {
  color: #000000 !important;
  font-weight: 500;
  transition: color 0s, font-weight 0s;
}

.card.apple-loupe-card:hover .card-title,
.card.apple-loupe-card:hover .icon-large {
  color: #0d6efd !important;
  font-weight: bold !important;
}

/* --- Sidebar Menu Links --- */
.sidebar .nav-link.apple-loupe-card {
  border-radius: 12px;
  color: #000000 !important; /* Pure black for unselected items */
  background: linear-gradient(135deg, rgba(240, 248, 255, 0.3) 0%, rgba(160, 215, 255, 0.05) 100%);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.sidebar .nav-link.apple-loupe-card .glass-content { justify-content: flex-start; }

.sidebar .nav-link.apple-loupe-card:hover {
  background: linear-gradient(135deg, rgba(160, 215, 255, 0.5) 0%, rgba(240, 248, 255, 0.2) 100%);
  color: #0d6efd !important;
  font-weight: bold;
}

.sidebar .nav-link.active.apple-loupe-card {
  background: linear-gradient(135deg, rgba(13, 110, 253, 0.65) 0%, rgba(160, 215, 255, 0.25) 100%);
  color: #0b2d5c !important;
  font-weight: 800;
  border-color: rgba(13, 110, 253, 0.5) !important;
}

/* --- Bottom Action Buttons --- */
.sidebar-actions .logout-button.apple-loupe-card {
  background: linear-gradient(135deg, rgba(52, 58, 64, 0.7) 0%, rgba(33, 37, 41, 0.4) 100%) !important;
  color: white !important;
  border-radius: 12px;
}

.sidebar-actions .exit-button.apple-loupe-card {
  background: linear-gradient(135deg, rgba(220, 53, 69, 0.7) 0%, rgba(180, 40, 50, 0.4) 100%) !important;
  color: white !important;
  border-radius: 12px;
}

.sidebar-actions .language-toggle-btn.apple-loupe-card {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.8) 0%, rgba(220, 160, 0, 0.4) 100%) !important;
  border-radius: 10px;
}