/* ═══════════════════════════════════════════════════
   TMD Level Up — Dark Solid Theme
   Background: #0d0c22 dark indigo + silver glow
   Cards: #0f1428 deep navy solid
   Accent: silver-gray gradient buttons
   ═══════════════════════════════════════════════════ */

/* ── Font ── */
*, body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter',
               'Helvetica Neue', Arial, sans-serif !important;
}

/* ── Page background ── */
body, .bg-gray-950 {
  background-color: #0d0c22 !important;
  background-image:
    radial-gradient(ellipse 100% 110% at -10% 55%, rgba(185,190,215,0.14) 0%, rgba(160,165,190,0.06) 50%, transparent 75%),
    radial-gradient(ellipse 70% 60% at -5% 5%,    rgba(175,180,205,0.09) 0%, transparent 68%) !important;
  background-attachment: fixed !important;
}

/* ── Cards ── */
.bg-gray-900 {
  background: #0f1428 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(185,190,215,0.1) !important;
  box-shadow: 0 4px 28px rgba(0,0,0,0.55) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, opacity 0.3s ease !important;
}
.rounded-xl.bg-gray-900:not(.card-focused):hover,
.rounded-2xl.bg-gray-900:not(.card-focused):hover {
  transform: translateY(-3px) !important;
  border-color: rgba(185,190,215,0.35) !important;
  box-shadow: 0 8px 36px rgba(0,0,0,0.65), 0 0 0 1px rgba(185,190,215,0.2) !important;
}
.bg-gray-800 {
  background: #131830 !important;
  border-color: rgba(185,190,215,0.07) !important;
}
.bg-gray-700 { background: #181e38 !important; }

/* ── Nav ── */
nav.bg-gray-900 {
  background: rgba(13,12,34,0.92) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 1px 20px rgba(0,0,0,0.4) !important;
}
nav .text-gray-300   { color: rgba(255,255,255,0.88) !important; }
nav .text-gray-400   { color: rgba(255,255,255,0.55) !important; }
nav .text-gray-500   { color: rgba(255,255,255,0.4)  !important; }
nav .hover\:bg-gray-800:hover { background-color: rgba(255,255,255,0.08) !important; }
nav .bg-gray-800     { background-color: rgba(255,255,255,0.08) !important; }
nav .bg-gray-400     { background-color: rgba(255,255,255,0.5) !important; }

/* Brand logo — silver-gray gradient text */
nav a.font-bold {
  color: #b4b8cc !important;
  background: linear-gradient(135deg, #d8dbe8 0%, #9ea2b8 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
nav a.font-bold:hover {
  color: #c8ccd8 !important;
  background: linear-gradient(135deg, #e8eaf4 0%, #b4b8cc 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Login page brand title — matches Sign In button */
.login-brand {
  background: linear-gradient(135deg, #c8cbd8 0%, #8c90a8 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Hamburger dropdown */
#hamburger-menu {
  background-color: #1a1e4a !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6) !important;
  border-radius: 14px !important;
}
#hamburger-menu .border-gray-800 { border-color: rgba(255,255,255,0.08) !important; }
#hamburger-menu a           { color: rgba(255,255,255,0.85) !important; }
#hamburger-menu a:hover     { background-color: rgba(255,255,255,0.07) !important; color: #fff !important; }
#hamburger-menu .text-gray-200  { color: rgba(255,255,255,0.9) !important; }
#hamburger-menu .text-gray-500  { color: rgba(255,255,255,0.4) !important; }
#hamburger-menu .hover\:text-red-400:hover { color: #f87171 !important; }
#hamburger-menu svg         { color: rgba(255,255,255,0.45) !important; }

/* ── Text ── */
.text-gray-100 { color: #ffffff !important; }
.text-gray-200 { color: rgba(255,255,255,0.9) !important; }
.text-gray-300 { color: rgba(255,255,255,0.78) !important; }
.text-gray-400 { color: rgba(255,255,255,0.5) !important; }
.text-gray-500 { color: rgba(255,255,255,0.35) !important; }
.text-gray-600 { color: rgba(255,255,255,0.22) !important; }
.text-gray-700 { color: rgba(255,255,255,0.14) !important; }

/* ── Borders ── */
.border-gray-800 { border-color: rgba(255,255,255,0.07) !important; }
.border-gray-700 { border-color: rgba(255,255,255,0.1) !important; }

/* ── Accent: purple ── */
.text-indigo-400            { color: #a78bfa !important; }
.text-indigo-300            { color: #c4b5fd !important; }
.text-indigo-200            { color: #ddd6fe !important; }
.hover\:text-indigo-400:hover { color: #a78bfa !important; }
.hover\:text-indigo-300:hover { color: #c4b5fd !important; }

/* Silver-gray gradient buttons */
.bg-indigo-600 {
  background: linear-gradient(135deg, #c8cbd8 0%, #8c90a8 100%) !important;
  color: #0d0c22 !important;
  box-shadow: 0 4px 15px rgba(185,190,215,0.25) !important;
  border: none !important;
}
.hover\:bg-indigo-500:hover {
  background: linear-gradient(135deg, #d8dbe8 0%, #9ea2b8 100%) !important;
  box-shadow: 0 4px 20px rgba(185,190,215,0.35) !important;
}
.bg-indigo-600\/20              { background-color: rgba(124,58,237,0.15) !important; }
.hover\:bg-indigo-600\/40:hover { background-color: rgba(124,58,237,0.28) !important; }
.border-indigo-600\/40          { border-color: rgba(124,58,237,0.45) !important; }
.border-indigo-500\/60          { border-color: rgba(124,58,237,0.65) !important; }
.hover\:border-indigo-500\/60:hover { border-color: rgba(124,58,237,0.8) !important; }
.focus\:ring-indigo-500:focus   { box-shadow: 0 0 0 3px rgba(124,58,237,0.35) !important; }

/* ── Vote buttons ── */
.bg-green-800\/40   { background-color: rgba(52,211,153,0.12) !important; }
.hover\:bg-green-700\/60:hover { background-color: rgba(52,211,153,0.22) !important; }
.border-green-700\/50 { border-color: rgba(52,211,153,0.3) !important; }
.bg-red-900\/30     { background-color: rgba(248,113,113,0.1) !important; }
.hover\:bg-red-800\/50:hover { background-color: rgba(248,113,113,0.2) !important; }
.border-red-800\/50 { border-color: rgba(248,113,113,0.3) !important; }

/* ── Category badges ── */
.bg-green-900\/40  { background-color: rgba(52,211,153,0.12) !important; }
.bg-blue-900\/40   { background-color: rgba(96,165,250,0.12) !important; }
.bg-purple-900\/40 { background-color: rgba(167,139,250,0.12) !important; }
.bg-orange-900\/30 { background-color: rgba(251,146,60,0.12) !important; }
.bg-orange-900\/40 { background-color: rgba(251,146,60,0.14) !important; }
.bg-red-950\/20    { background-color: rgba(248,113,113,0.08) !important; }
.bg-green-950\/30  { background-color: rgba(52,211,153,0.08) !important; }

/* ── Table row dividers ── */
.divide-y > * + * { border-top-color: rgba(139,92,246,0.15) !important; }

/* ── Progress bars ── */
.bg-green-500 { background-color: #34d399 !important; }
.bg-red-500   { background-color: #f87171 !important; }
.bg-gray-800.rounded-full { background-color: rgba(255,255,255,0.08) !important; }

/* ── File input "Choose File" button ── */
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
  background: linear-gradient(135deg, #c8cbd8 0%, #8c90a8 100%) !important;
  color: #0d0c22 !important;
  box-shadow: 0 4px 15px rgba(185,190,215,0.25) !important;
  border: none !important;
}
input[type="file"]:hover::file-selector-button,
input[type="file"]:hover::-webkit-file-upload-button {
  background: linear-gradient(135deg, #d8dbe8 0%, #9ea2b8 100%) !important;
  box-shadow: 0 4px 20px rgba(185,190,215,0.35) !important;
}

/* ── Inputs ── */
input, select, textarea {
  background-color: #0f1a35 !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
  border-radius: 10px !important;
}
input::placeholder, textarea::placeholder { color: rgba(255,255,255,0.3) !important; }
input:focus, select:focus, textarea:focus {
  border-color: rgba(124,58,237,0.7) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.2) !important;
  outline: none !important;
}

/* ── Rounded corners ── */
.rounded-xl  { border-radius: 16px !important; }
.rounded-lg  { border-radius: 12px !important; }

/* ── Habit grid cells ── */
[style*="background-color: rgb(15, 23, 42)"] { background-color: #0e1830 !important; }
[style*="background-color: rgb(10, 14, 26)"] { background-color: #0b1228 !important; }

/* ── Notification badge ── */
#notif-badge { background-color: #f87171 !important; }

/* ── Amber/yellow accents (ranks, streaks) ── */
.text-amber-400  { color: #fbbf24 !important; }
.text-yellow-400 { color: #fbbf24 !important; }

/* ── Audit / orange under-review ── */
.text-orange-400 { color: #fb923c !important; }

/* ── Home page grid tiles ── */
.home-tile {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}
.home-tile:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 36px rgba(0,0,0,0.65), 0 0 0 1px rgba(185,190,215,0.2) !important;
  border-color: rgba(185,190,215,0.35) !important;
}

/* ── Suppress card hover lift on pages that opt out ── */
.no-card-hover .rounded-xl.bg-gray-900:hover,
.no-card-hover .rounded-2xl.bg-gray-900:hover {
  transform: none !important;
  box-shadow: 0 4px 28px rgba(0,0,0,0.55) !important;
  border-color: rgba(185,190,215,0.1) !important;
}

/* ══════════════════════════════════════════
   Card focus / slide-away (dashboard only)
   ══════════════════════════════════════════ */
.card-item {
  cursor: pointer;
}
.card-item.card-focused {
  cursor: default;
  border-color: rgba(185,190,215,0.32) !important;
  box-shadow: 0 16px 56px rgba(0,0,0,0.7), 0 0 0 1px rgba(185,190,215,0.22) !important;
  position: relative;
  z-index: 40;
}
.card-item.card-dismissed {
  opacity: 0 !important;
  transform: translateY(28px) scale(0.96) !important;
  pointer-events: none !important;
}
.label-dismissed {
  opacity: 0 !important;
  transform: translateY(16px) !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
}
/* Extra rows hidden by default, revealed when card is focused */
.extra-row { display: none !important; }
.card-focused .extra-row { display: flex !important; }
/* Cap feed scroll height when focused so card stays within viewport */
.card-focused .feed-scroll { max-height: 62vh !important; }

/* ══════════════════════════════════════════
   Habit grid cell tooltip
   ══════════════════════════════════════════ */
#cell-tooltip {
  position: fixed;
  z-index: 200;
  background: #1a1e4a;
  border: 1px solid rgba(185,190,215,0.22);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 11px;
  line-height: 1.5;
  color: rgba(255,255,255,0.88);
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  opacity: 0;
  transition: opacity 0.15s ease;
}
#cell-tooltip.visible { opacity: 1; }

/* ══════════════════════════════════════════
   Click / Press animations
   ══════════════════════════════════════════ */

/* Scale-down on pointerdown (JS adds this class) */
.pressing {
  transform: scale(0.97) !important;
  transition: transform 0.08s ease !important;
}

/* Smooth return on pointerup — no overshoot */
@keyframes press-pop {
  0%   { transform: scale(0.97); }
  100% { transform: scale(1.00); }
}
.press-pop {
  animation: press-pop 0.15s ease-out forwards !important;
  transition: none !important;
}