/* =========================================================
   TotalDeal — UI Pizazz Layer
   Micro-interactions, depth, and polish (loads last)
========================================================= */

/* ===========================================
   🌊 APP SHELL & BACKGROUND
=========================================== */
.app-shell {
  background: linear-gradient(165deg, #f8fafc 0%, #f1f5f9 45%, #eef2ff 100%) !important;
  transition: background 0.4s ease;
}

/* ===========================================
   📌 HEADER
=========================================== */
.app-header.compactHeader {
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
  transition: box-shadow 0.2s ease;
}

/* Optional: subtle frosted feel on scroll (if you add .scrolled via JS later) */
.app-header.compactHeader.scrolled {
  backdrop-filter: saturate(180%) blur(12px);
  background: rgba(255, 255, 255, 0.85) !important;
}

/* ===========================================
   🏷️ LOGO / BRAND
=========================================== */
.app-header .title-block h1 {
  letter-spacing: -0.025em;
  font-weight: 700 !important;
  color: #0f172a;
}

.app-header .app-brand-logo {
  filter: drop-shadow(0 6px 16px rgba(15, 23, 42, 0.08));
}

/* ===========================================
   🧭 NAV TABS — HOVER & ACTIVE PIZAZZ
=========================================== */
.header-nav .menuBtn {
  border-radius: 10px !important;
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.15s ease,
              color 0.15s ease,
              box-shadow 0.15s ease !important;
}

.header-nav .menuBtn:hover {
  transform: translateY(-1px) !important;
  background: var(--gray-100) !important;
}

.header-nav .menuBtn.active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  position: relative;
}

/* Subtle bottom accent on active tab */
.header-nav .menuBtn.active::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 4px;
  height: 2px;
  background: var(--primary-500);
  border-radius: 1px;
  opacity: 0.85;
}

.header-nav .menuBtn:active {
  transform: translateY(0) !important;
}

/* ===========================================
   🔘 BUTTONS — LIFT & SHADOW
=========================================== */
.btn:not(.ghost):hover:not(:disabled),
button.btn:not(.ghost):hover:not(:disabled) {
  transform: translateY(-1px);
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.15s ease, border-color 0.15s ease !important;
}

.btn.primary:hover:not(:disabled),
button.btn.primary:hover:not(:disabled) {
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.28) !important;
}

.btn:active:not(:disabled),
button.btn:active:not(:disabled) {
  transform: translateY(0);
}

/* ===========================================
   📋 LIST PANE & CARDS — DEPTH
=========================================== */
.listPane,
.detailPane,
.mainSplit > [class*="Pane"],
.mainSplit > #detailPanel {
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}

/* Row hover in list views */
.listPane .row:hover,
.listPane [role="row"]:hover,
.pipelinePane .deal-card:hover {
  background: linear-gradient(180deg, #fafbfd 0%, #f8fafc 100%) !important;
  transition: background 0.15s ease;
}

/* ===========================================
   ✨ FOCUS RINGS — ACCESSIBLE & PRETTY
=========================================== */
.menuBtn:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex="0"]:focus-visible {
  outline: 2px solid var(--primary-500) !important;
  outline-offset: 2px !important;
  transition: outline-offset 0.1s ease, box-shadow 0.15s ease !important;
}

/* ===========================================
   📭 EMPTY STATE — GENTLE MOTION
=========================================== */
.td-empty-btn {
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.15s ease !important;
}

.td-empty-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08) !important;
}

.td-empty-btn--primary:hover {
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.25) !important;
}

/* ===========================================
   🎯 PILLS & BADGES — SUBTLE POP
=========================================== */
.menu-badge,
.folderCountPill,
[class*="badge"],
[class*="pill"] {
  transition: transform 0.12s ease, box-shadow 0.12s ease !important;
}

.menuBtn:hover .menu-badge {
  transform: scale(1.05);
}

/* ===========================================
   ⚡ REDUCE MOTION (ACCESSIBILITY)
=========================================== */
@media (prefers-reduced-motion: reduce) {
  .app-shell,
  .app-header.compactHeader,
  .header-nav .menuBtn,
  .btn,
  .listPane .row,
  .td-empty-btn,
  .menu-badge {
    transition: none !important;
  }

  .header-nav .menuBtn:hover,
  .btn:hover:not(:disabled),
  .td-empty-btn:hover {
    transform: none !important;
  }

  .menuBtn:hover .menu-badge {
    transform: none;
  }
}