/* Hidden class for modal visibility control */
    .hidden {
      display: none !important;
    }
    /* Edit modal Quill dark theme */
    #editQuillContainer .ql-toolbar { background: #374151; border-color: #4b5563; }
    #editQuillContainer .ql-container { background: #374151; border-color: #4b5563; color: #e5e7eb; }
    #editQuillContainer .ql-editor { min-height: 100px; }
    /* URL History: compact columns for mobile */
    #urlHistoryTableWrap .url-col { max-width: 5rem; min-width: 4rem; overflow: hidden; }
    #urlHistoryTableWrap .url-col a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* Shrink Views / RPM to content; RPM sits flush after Views */
    #urlHistoryTableWrap .views-col {
      width: 0.01%;
      min-width: 0;
      max-width: max-content;
      white-space: nowrap;
      vertical-align: top;
    }
    #urlHistoryTableWrap .rpm-col {
      width: 0.01%;
      min-width: 0;
      max-width: max-content;
      white-space: nowrap;
      text-align: left;
      vertical-align: top;
    }
    /* Sort headers: !important beats Tailwind CDN stylesheet when it injects after this file */
    #urlHistoryTableWrap th.url-history-sort-head,
    #urlHistoryTableWrap th.url-history-sort-head span {
      color: #9ca3af !important;
      font-weight: 500;
    }
    #urlHistoryTableWrap th.url-history-sort-head svg {
      color: inherit !important;
    }
    #urlHistoryTableWrap th.url-history-sort-head:hover:not(.url-history-sort-active),
    #urlHistoryTableWrap th.url-history-sort-head:hover:not(.url-history-sort-active) span {
      color: #d1d5db !important;
    }
    #urlHistoryTableWrap th.url-history-sort-head.url-history-sort-active,
    #urlHistoryTableWrap th.url-history-sort-head.url-history-sort-active span {
      color: #4ade80 !important;
      font-weight: 600;
    }
    #urlHistoryTableWrap th.url-history-sort-head.url-history-sort-active:hover,
    #urlHistoryTableWrap th.url-history-sort-head.url-history-sort-active:hover span {
      color: #86efac !important;
    }
    /* Premium black - same as index/startpaste */
    .premium-black-gradient {
      background:
        radial-gradient(ellipse 80% 50% at 20% 30%, rgba(255, 255, 255, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 10%, rgba(255, 255, 255, 0.02) 0%, transparent 45%),
        linear-gradient(180deg, #020202 0%, #060608 30%, #08080c 60%, #030305 100%);
      background-attachment: fixed;
    }
    .tile-premium-border { border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04); }
    .premium-dashboard-tile {
      background: linear-gradient(135deg, rgba(13, 13, 20, 0.9) 0%, rgba(10, 10, 15, 0.95) 100%);
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
    }
    .nav-translucent {
      background:
        radial-gradient(ellipse 80% 50% at 20% 30%, rgba(255, 255, 255, 0.06) 0%, transparent 50%),
        linear-gradient(180deg, rgba(2, 2, 2, 0.5) 0%, rgba(6, 6, 8, 0.45) 50%, rgba(3, 3, 5, 0.5) 100%);
    }
    .nav-enhanced-desktop {
      position: relative;
      box-shadow:
        0 4px 30px rgba(0, 0, 0, 0.4),
        0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 40px -10px rgba(74, 222, 128, 0.15);
      border-bottom: 1px solid rgba(75, 85, 99, 0.3);
    }
    .nav-enhanced-desktop::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent 0%, rgba(74, 222, 128, 0.4) 50%, transparent 100%);
      opacity: 0.8;
    }#analyticsChart {
            height: 520px !important;
            max-height: 520px !important;
        }
        .chart-container {
            height: 600px;
            position: relative;
            width: 100%;
            
        }

        /* --- URL-history scrollbar (WebKit + Firefox) ------------------ */
.url-scroll{
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: #10B981 #374151;      /* thumb  track */
}
/* Chrome / Edge / Safari */
.url-scroll::-webkit-scrollbar{
  width:8px;
}
.url-scroll::-webkit-scrollbar-track{
  background:#374151;                    /* gray-700 */
  border-radius:4px;
}
.url-scroll::-webkit-scrollbar-thumb{
  background:#10B981;                    /* green-500 */
  border-radius:4px;
}
.url-scroll::-webkit-scrollbar-thumb:hover{
  background:#059669;                    /* green-600 */
}

/* ===== full-screen loader ================================================= */
@keyframes dots {
  0%, 20%   { content:"";   }
  40%       { content:".";  }
  60%       { content:".."; }
  80%,100%  { content:"...";}
}
.loading-spinner {
  background:
    radial-gradient(ellipse 80% 50% at 20% 30%, rgba(255, 255, 255, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 10%, rgba(255, 255, 255, 0.02) 0%, transparent 45%),
    linear-gradient(180deg, #020202 0%, #060608 30%, #08080c 60%, #030305 100%);
  background-attachment: fixed;
  pointer-events: auto;
  touch-action: none;
  overflow: hidden;
  box-sizing: border-box;
}
body.loading-active {
  pointer-events: none;
  overflow-x: hidden;
}
body.loading-active #loading-spinner {
  pointer-events: auto;
}
@media (max-width: 768px) {
  .loading-spinner {
    padding-left: 0;
    padding-right: 0;
    padding-top: min(2rem, 8vh);
    padding-bottom: 5rem;
    align-items: flex-start;
  }
  .loading-spinner .loading-content {
    max-height: calc(100dvh - 6rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

#loading-status, #loading-details {
  opacity: 1;
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Enhanced glow for progress bar */
#loading-progress {
  box-shadow: 
    0 0 15px rgba(34, 197, 94, 0.4),
    0 0 30px rgba(34, 197, 94, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Smoother bounce animation */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0.7;
  }
  40% {
    transform: translateY(-8px) scale(1.1);
    opacity: 1;
  }
  60% {
    transform: translateY(-4px) scale(1.05);
    opacity: 0.9;
  }
}

/* Entrance animation */
.loading-spinner > div {
  animation: fadeInScale 0.8s ease-out;
}

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

/* Enhanced Navigation Styles */
.nav-link {
  position: relative;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgb(209 213 219);
  transition-property: color, transform, border-color;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-link:hover {
  color: rgb(134 239 172);
}

.nav-link:hover {
  transform: translateY(-1px);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #10b981, #34d399);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.nav-link:hover::after {
  width: 100%;
}

.mobile-nav-link {
  display: block;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  color: rgb(209 213 219);
  transition-property: color, background-color;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-nav-link:hover {
  color: rgb(134 239 172);
  background-color: rgba(13, 13, 20, 0.5);
}

/* Mobile Nav Animation */
#mobileNav {
  transform: translateY(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#mobileNav:not(.hidden) {
  transform: translateY(0);
}

/* Hamburger Animation */
#hamburgerIcon {
  transition: transform 0.3s ease;
}

.hamburger-open #hamburgerIcon {
  transform: rotate(90deg);
}

/* Enhanced Dropdown */
#userDropdown {
  transform: translateY(-10px) scale(0.95);
  opacity: 0;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

#userDropdown:not(.hidden) {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* Body padding for fixed nav */
body {
  padding-top: 4rem;
  min-width: 580px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .nav-link span {
    display: none;
  }
  
  .nav-link svg {
    width: 1.25rem;
    height: 1.25rem;
  }
}