/* 
 * Button Component Styles
 * Uses theme variables for consistent styling
 */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  border: none;
  border-radius: 0.375rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Primary button */
.button-primary {
  background-color: var(--theme-primary);
  color: white;
}

.button-primary:hover {
  background-color: var(--theme-primary-hover);
}

.button-primary:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--theme-primary), 0.4);
}

/* Secondary button */
.button-secondary {
  background-color: var(--theme-secondary);
  color: white;
}

.button-secondary:hover {
  background-color: var(--theme-secondary-hover);
}

.button-secondary:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--theme-secondary), 0.4);
}

/* Outline button */
.button-outline {
  background-color: transparent;
  color: var(--theme-primary);
  border: 1px solid var(--theme-primary);
}

.button-outline:hover {
  background-color: var(--theme-primary);
  color: white;
}

.button-outline:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--theme-primary), 0.4);
}

/* Ghost button */
.button-ghost {
  background-color: transparent;
  color: var(--theme-text);
}

.button-ghost:hover {
  background-color: rgba(var(--theme-border), 0.2);
}

.button-ghost:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--theme-border), 0.4);
}

/* Danger button */
.button-danger {
  background-color: var(--theme-error-bg);
  color: var(--theme-error-text);
}

.button-danger:hover {
  background-color: var(--theme-error-text);
  color: white;
}

.button-danger:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--theme-error-text), 0.4);
}

/* Button sizes */
.button-sm {
  font-size: 0.875rem;
  padding: 0.375rem 0.75rem;
}

.button-lg {
  font-size: 1.125rem;
  padding: 0.625rem 1.25rem;
}

/* Icon button */
.button-icon {
  padding: 0.5rem;
  border-radius: 50%;
}

.button-icon-sm {
  padding: 0.375rem;
}

.button-icon-lg {
  padding: 0.625rem;
}

/* Disabled state */
.button:disabled,
.button[disabled] {
  opacity: 0.65;
  cursor: not-allowed;
}

/* 
 * Card Component Styles
 * Uses theme variables for consistent styling
 */

.card {
  background-color: rgb(var(--theme-card));
  border-radius: 0.5rem;
  border: 1px solid rgb(var(--theme-border));
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Card variants */
.card-default {
  box-shadow: var(--theme-shadow);
  padding: 1.5rem;
}

.card-flat {
  padding: 1.5rem;
}

.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--theme-shadow-lg);
}

.card-interactive {
  cursor: pointer;
}

.card-interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--theme-shadow-lg);
}

/* Card layout elements */
.card-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgb(var(--theme-border));
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-body {
  padding: 1.5rem;
}

.card-footer {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid rgb(var(--theme-border));
}

/* Card with image */
.card-image {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}

.card-image-top {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.card-image-bottom {
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

/* Card sizes */
.card-sm {
  padding: 1rem;
}

.card-lg {
  padding: 2rem;
}

/* Card with gradient header */
.card-gradient-header .card-header {
  background: linear-gradient(
    135deg,
    var(--theme-primary),
    var(--theme-secondary)
  );
  color: white;
  border-bottom: none;
}

/* Card themes */
.card-primary {
  border-color: var(--theme-primary);
}

.card-primary .card-header {
  background-color: var(--theme-primary);
  color: white;
}

.card-secondary {
  border-color: var(--theme-secondary);
}

.card-secondary .card-header {
  background-color: var(--theme-secondary);
  color: white;
}

/* Status cards */
.card-success {
  border-color: var(--theme-success-text);
}

.card-success .card-header {
  background-color: var(--theme-success-bg);
  color: var(--theme-success-text);
}

.card-warning {
  border-color: var(--theme-warning-text);
}

.card-warning .card-header {
  background-color: var(--theme-warning-bg);
  color: var(--theme-warning-text);
}

.card-error {
  border-color: var(--theme-error-text);
}

.card-error .card-header {
  background-color: var(--theme-error-bg);
  color: var(--theme-error-text);
}

.card-info {
  border-color: var(--theme-info-text);
}

.card-info .card-header {
  background-color: var(--theme-info-bg);
  color: var(--theme-info-text);
}

/* Status Badges and Connection Indicators */

/* Status badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500
}

.pending-badge {
    --tw-bg-opacity: 1;
    background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(133 77 14 / var(--tw-text-opacity, 1));
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500
}

.pending-badge:is(.dark *) {
    background-color: rgb(113 63 18 / 0.5);
    --tw-text-opacity: 1;
    color: rgb(254 240 138 / var(--tw-text-opacity, 1))
}

.approved-badge {
    --tw-bg-opacity: 1;
    background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(22 101 52 / var(--tw-text-opacity, 1));
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500
}

.approved-badge:is(.dark *) {
    background-color: rgb(20 83 45 / 0.5);
    --tw-text-opacity: 1;
    color: rgb(187 247 208 / var(--tw-text-opacity, 1))
}

.rejected-badge {
    --tw-bg-opacity: 1;
    background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(153 27 27 / var(--tw-text-opacity, 1));
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500
}

.rejected-badge:is(.dark *) {
    background-color: rgb(127 29 29 / 0.5);
    --tw-text-opacity: 1;
    color: rgb(254 202 202 / var(--tw-text-opacity, 1))
}

/* DB Connection indicators */
.db-connection-indicator {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500
}

.db-connection-indicator.connected {
    --tw-bg-opacity: 1;
    background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(22 101 52 / var(--tw-text-opacity, 1))
}

.db-connection-indicator.connected:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(20 83 45 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(134 239 172 / var(--tw-text-opacity, 1))
}

.db-connection-indicator.disconnected {
    --tw-bg-opacity: 1;
    background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(153 27 27 / var(--tw-text-opacity, 1))
}

.db-connection-indicator.disconnected:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(127 29 29 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(252 165 165 / var(--tw-text-opacity, 1))
}

/* Form Input Styles */

/* Form inputs */
.apple-input,
.apple-textarea {
    width: 100%;
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}
.apple-input:focus,
.apple-textarea:focus {
    --tw-border-opacity: 1;
    border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity, 1))
}
.apple-input:is(.dark *),
.apple-textarea:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}
.apple-input:focus:is(.dark *),
.apple-textarea:focus:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(37 99 235 / var(--tw-ring-opacity, 1))
}

/* Navigation Styles */

/* Navigation styles */
.nav-link {
    border-radius: var(--radius);
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    animation-duration: 200ms
}
.nav-link:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1))
}
.nav-link:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1))
}
.nav-link:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1))
}

.nav-link.active {
    --tw-bg-opacity: 1;
    background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(67 56 202 / var(--tw-text-opacity, 1))
}

.nav-link.active:is(.dark *) {
    background-color: rgb(49 46 129 / 0.2);
    --tw-text-opacity: 1;
    color: rgb(129 140 248 / var(--tw-text-opacity, 1))
}

/* Mobile nav */
.mobile-nav {
    position: fixed;
    inset: 0px;
    z-index: 50;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    transition-property: transform;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    animation-duration: 300ms;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}
.mobile-nav:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1))
}

.mobile-nav.closed {
    --tw-translate-y: -100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.mobile-nav.open {
    --tw-translate-y: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

/* Feature section */
.feature-item {
    display: flex;
    align-items: flex-start;
    border-radius: var(--radius);
    padding: 1rem
}

.feature-icon {
    margin-right: 1rem;
    flex-shrink: 0;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
    padding: 0.5rem;
    --tw-text-opacity: 1;
    color: rgb(79 70 229 / var(--tw-text-opacity, 1))
}

.feature-icon:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(49 46 129 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(165 180 252 / var(--tw-text-opacity, 1))
}

/* Layout Components - Containers, Headers, Footers, Grids, Song Components */

/* Layout utilities */
.container-centered {
  width: 100%;
}
@media (min-width: 640px) {
  .container-centered {
    max-width: 640px;
  }
}
@media (min-width: 768px) {
  .container-centered {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {
  .container-centered {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {
  .container-centered {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {
  .container-centered {
    max-width: 1536px;
  }
}
.container-centered {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 80rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px) {
  .container-centered {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .container-centered {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media (min-width: 640px) {
  .container-centered {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

.container {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 80rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.section-spacing {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

@media (min-width: 768px) {
  .section-spacing {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

@media (min-width: 1024px) {
  .section-spacing {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

/* Header & Footer */
.app-header {
  position: sticky;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.app-header:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(31 41 55 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}
.app-header {
  box-shadow: var(--card-shadow);
}

.bg-gradient-header {
  background: linear-gradient(
    135deg,
    rgb(var(--header-gradient-from)),
    rgb(var(--header-gradient-to))
  );
}

.footer-bg {
  background-color: rgb(var(--footer-bg));
}

/* Dashboard & grid components */
.dashboard-card {
  border-radius: 0.75rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1.5rem;
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.dashboard-card:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}

.two-column-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .two-column-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Song components */
.song-card {
  width: calc(50vw - 3rem);
  min-width: 140px;
  flex-shrink: 0;
  border-radius: 0.75rem;
  border-width: 1px;
  padding: 0.75rem;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.song-card:hover {
  --tw-translate-y: -2px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
@media (min-width: 640px) {
  .song-card {
    width: 12rem;
  }
}

.song-card-content {
  display: flex;
  height: 100%;
  flex-direction: column;
}

.song-card-title {
  margin-bottom: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 0.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}

.song-card-title:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}

.song-card-artist {
  margin-bottom: 0.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.song-card-artist:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.song-card-meta {
  margin-top: auto;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.song-card-meta:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

/* Horizontal scroll */
.horizontal-scroll {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding-bottom: 16px;
}

.horizontal-scroll > * {
  scroll-snap-align: start;
}

/* Request item */
.request-item {
  margin-bottom: 0.75rem;
  border-radius: 1rem;
  padding: 1rem;
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.request-item:hover {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.request-item {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.request-item:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.request-item {
  border: 1px solid rgba(229, 231, 235, 0.8);
}

.dark .request-item {
  border-color: rgba(55, 65, 81, 0.8);
}

/* WebSocket connection status */
.connection-status {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  border-width: 1px;
}

.connection-status.connected {
  background-color: rgba(16, 185, 129, 0.1);
  color: rgb(16, 185, 129);
  border-color: rgba(16, 185, 129, 0.2);
}

.connection-status.disconnected {
  background-color: rgba(239, 68, 68, 0.1);
  color: rgb(239, 68, 68);
  border-color: rgba(239, 68, 68, 0.2);
}

.status-dot {
  margin-right: 0.375rem;
  height: 0.5rem;
  width: 0.5rem;
  border-radius: 9999px;
}

.status-text {
  line-height: 1;
}

/* AG Grid Base Styles - Container, Root Wrapper, Base Theme, Headers, Cells, Rows */

/* AG Grid container height */
.ag-grid-container {
  height: 750px;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: white;
}

.ag-grid-container > .ag-theme-alpine {
  height: 100%;
}

.dark .ag-grid-container {
  background: #1f2937;
}

/* Fix AG Grid root to allow pagination */
.ag-theme-alpine .ag-root-wrapper {
  height: 100%;
  display: flex !important;
  flex-direction: column !important;
}

/* Make body scrollable but keep pagination visible */
.ag-theme-alpine .ag-body {
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

.ag-theme-alpine .ag-body-viewport {
  overflow-y: auto;
}

/* Ensure pagination panel is visible and not cut off */
.ag-theme-alpine .ag-paging-panel {
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  margin-top: 0 !important;
  min-height: 60px;
}

/* Modern AG Grid Styling */
.ag-theme-alpine {
  --ag-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, sans-serif;
  --ag-font-size: 14px;
  --ag-header-background-color: #f9fafb;
  --ag-header-foreground-color: #374151;
  --ag-header-cell-hover-background-color: #f3f4f6;
  --ag-odd-row-background-color: transparent;
  --ag-row-hover-color: #f9fafb;
  --ag-selected-row-background-color: #ede9fe;
  --ag-foreground-color: #111827;
  --ag-background-color: #ffffff;
  --ag-border-color: #e5e7eb;
  --ag-header-cell-text-transform: capitalize;
  --ag-header-height: 56px;
  --ag-row-height: 72px;
  --ag-header-font-weight: 600;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  border-radius: 12px;
  overflow: hidden;
}

/* Modern AG Grid header styling */
.ag-theme-alpine .ag-header {
  border-bottom: 2px solid #e5e7eb;
  background: #f9fafb;
}

/* Fix header cell text color */
.ag-theme-alpine .ag-header-cell-text {
  color: #374151;
  font-weight: 600;
}

/* Fix header cell label text color */
.ag-theme-alpine .ag-header-cell-label {
  color: #374151;
}

/* Fix header sort icons */
.ag-theme-alpine .ag-header-cell-menu-button .ag-icon,
.ag-theme-alpine .ag-sort-ascending-icon,
.ag-theme-alpine .ag-sort-descending-icon,
.ag-theme-alpine .ag-sort-indicator-icon {
  color: #374151;
  fill: #374151;
}

/* Modern AG Grid cell styling */
.ag-theme-alpine .ag-cell {
  display: flex;
  align-items: center;
  padding: 0 16px;
  line-height: 1.5;
  color: #111827;
  overflow: hidden !important;
}

/* Force text overflow handling in AG Grid cells */
.ag-theme-alpine .ag-cell-wrapper {
  overflow: hidden !important;
  width: 100%;
}

/* Prevent AG Grid cells from overflowing */
.ag-theme-alpine .ag-cell-value,
.ag-theme-alpine .ag-cell-content {
  overflow: hidden !important;
  max-width: 100% !important;
}

.ag-theme-alpine .ag-header-cell {
  padding: 0 16px;
}

/* Fix AG Grid main container background */
.ag-theme-alpine .ag-root-wrapper {
  background: #ffffff !important;
}

/* Fix AG Grid body background */
.ag-theme-alpine .ag-center-cols-viewport,
.ag-theme-alpine .ag-body-viewport {
  background: #ffffff !important;
}

/* Fix AG Grid rows background */
.ag-theme-alpine .ag-row {
  background: #ffffff !important;
}

/* Rounded corners for grid */
.ag-theme-alpine .ag-root-wrapper {
  border-radius: 12px;
}

/* Hover effects */
.ag-theme-alpine .ag-row {
  transition: background-color 0.15s ease;
}

.ag-theme-alpine .ag-header-cell {
  transition: background-color 0.15s ease;
}

/* Modern input styling in filters */
.ag-theme-alpine .ag-floating-filter-input {
  border-radius: 6px;
  border: 1px solid #d1d5db;
  padding: 4px 8px;
}

/* AG Grid Pagination Styles */

/* Modern pagination styling */
.ag-theme-alpine .ag-paging-panel {
  border-top: 1px solid #e5e7eb;
  background: #ffffff;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.dark .ag-theme-alpine .ag-paging-panel {
  border-top-color: #374151;
  background: #1f2937 !important;
}

/* Pagination panel layout spacing */
.ag-theme-alpine .ag-paging-row-summary-panel,
.ag-theme-alpine .ag-paging-page-size-base,
.ag-theme-alpine .ag-paging-page-summary-panel {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Fix pagination text colors */
.ag-theme-alpine .ag-paging-panel span,
.ag-theme-alpine .ag-paging-panel div,
.ag-theme-alpine .ag-paging-panel button,
.ag-theme-alpine .ag-paging-panel * {
  color: #374151;
}

.dark .ag-theme-alpine .ag-paging-panel span,
.dark .ag-theme-alpine .ag-paging-panel div,
.dark .ag-theme-alpine .ag-paging-panel button,
.dark .ag-theme-alpine .ag-paging-panel * {
  color: #f9fafb !important;
}

/* Fix pagination number row selector */
.ag-theme-alpine .ag-paging-row-summary-panel-number {
  color: #374151;
}

.dark .ag-theme-alpine .ag-paging-row-summary-panel-number {
  color: #f9fafb !important;
}

/* Fix pagination drop down - Modern styling */
.ag-theme-alpine select,
.ag-theme-alpine .ag-paging-page-size-base select {
  color: #374151 !important;
  background: #ffffff !important;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 6px 32px 6px 12px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23737480' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

.ag-theme-alpine select:hover,
.ag-theme-alpine .ag-paging-page-size-base select:hover {
  border-color: #9ca3af;
}

.ag-theme-alpine select:focus,
.ag-theme-alpine .ag-paging-page-size-base select:focus {
  outline: none;
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.dark .ag-theme-alpine select,
.dark .ag-theme-alpine .ag-paging-page-size-base select {
  color: #f9fafb !important;
  background: #374151 !important;
  border-color: #4b5563 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%9CA3AF' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

.dark .ag-theme-alpine select:hover,
.dark .ag-theme-alpine .ag-paging-page-size-base select:hover {
  border-color: #6b7280;
  background: #4b5563 !important;
}

.dark .ag-theme-alpine select:focus,
.dark .ag-theme-alpine .ag-paging-page-size-base select:focus {
  border-color: #9333ea;
  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.2);
}

/* Modern styling for AG Grid picker field (Page Size dropdown) */
.ag-theme-alpine .ag-picker-field-wrapper {
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  padding: 4px 32px 4px 12px !important;
  color: #374151 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.ag-theme-alpine .ag-picker-field-wrapper:hover {
  border-color: #9ca3af !important;
}

.ag-theme-alpine .ag-picker-field-wrapper:focus {
  outline: none !important;
  border-color: #7c3aed !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1) !important;
}

.ag-theme-alpine .ag-picker-field-display {
  color: #374151 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.ag-theme-alpine .ag-label {
  color: #374151 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.dark .ag-theme-alpine .ag-picker-field-wrapper {
  background: #374151 !important;
  border-color: #4b5563 !important;
}

.dark .ag-theme-alpine .ag-picker-field-wrapper:hover {
  border-color: #6b7280 !important;
  background: #4b5563 !important;
}

.dark .ag-theme-alpine .ag-picker-field-wrapper:focus {
  border-color: #9333ea !important;
  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.2) !important;
}

.dark .ag-theme-alpine .ag-picker-field-display {
  color: #f9fafb !important;
}

.dark .ag-theme-alpine .ag-label {
  color: #f9fafb !important;
}

/* Modern pagination buttons */
.ag-theme-alpine .ag-paging-button {
  padding: 6px 12px !important;
  border-radius: 6px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #374151 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
  cursor: pointer;
}

.ag-theme-alpine .ag-paging-button:hover:not(:disabled) {
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
}

.ag-theme-alpine .ag-paging-button:active:not(:disabled) {
  background: #e5e7eb !important;
}

.ag-theme-alpine .ag-paging-button:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

.dark .ag-theme-alpine .ag-paging-button {
  color: #f9fafb !important;
  background: transparent !important;
}

.dark .ag-theme-alpine .ag-paging-button:hover:not(:disabled) {
  background: #374151 !important;
  border-color: #4b5563 !important;
}

.dark .ag-theme-alpine .ag-paging-button:active:not(:disabled) {
  background: #4b5563 !important;
}

/* Pagination text labels */
.ag-theme-alpine .ag-paging-page-summary-panel span {
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
}

.dark .ag-theme-alpine .ag-paging-page-summary-panel span {
  color: #9ca3af !important;
}

/* Pagination input fields */
.ag-theme-alpine .ag-paging-row-summary-panel-number {
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  color: #374151 !important;
  font-size: 14px !important;
  width: 60px !important;
}

.dark .ag-theme-alpine .ag-paging-row-summary-panel-number {
  background: #374151 !important;
  border-color: #4b5563 !important;
  color: #f9fafb !important;
}

.ag-theme-alpine .ag-paging-row-summary-panel-number:focus {
  outline: none;
  border-color: #7c3aed !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1) !important;
}

.dark .ag-theme-alpine .ag-paging-row-summary-panel-number:focus {
  border-color: #9333ea !important;
  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.2) !important;
}

/* AG Grid Dark Mode Overrides */

/* Dark mode AG Grid styling */
.dark .ag-theme-alpine {
  --ag-header-background-color: #1f2937;
  --ag-header-foreground-color: #f9fafb;
  --ag-header-cell-hover-background-color: #374151;
  --ag-odd-row-background-color: transparent;
  --ag-row-hover-color: #1f2937;
  --ag-selected-row-background-color: #4c1d95;
  --ag-foreground-color: #f9fafb;
  --ag-background-color: #1f2937;
  --ag-border-color: #374151;
}

.dark .ag-theme-alpine .ag-header {
  border-bottom-color: #374151;
  background: #1f2937;
}

.dark .ag-theme-alpine .ag-header-cell-text {
  color: #f9fafb !important;
}

.dark .ag-theme-alpine .ag-header-cell-label {
  color: #f9fafb !important;
}

.dark .ag-theme-alpine .ag-header-cell-menu-button .ag-icon,
.dark .ag-theme-alpine .ag-sort-ascending-icon,
.dark .ag-theme-alpine .ag-sort-descending-icon,
.dark .ag-theme-alpine .ag-sort-indicator-icon {
  color: #f9fafb !important;
  fill: #f9fafb !important;
}

/* Fix all text in header */
.dark .ag-theme-alpine .ag-header * {
  color: #f9fafb !important;
}

.dark .ag-theme-alpine .ag-header svg {
  fill: #f9fafb !important;
}

.dark .ag-theme-alpine .ag-cell {
  color: #f9fafb !important;
}

.dark .ag-theme-alpine .ag-root-wrapper {
  background: #1f2937 !important;
}

.dark .ag-theme-alpine .ag-center-cols-viewport,
.dark .ag-theme-alpine .ag-body-viewport {
  background: #1f2937 !important;
}

.dark .ag-theme-alpine .ag-row {
  background: #1f2937 !important;
}

/* Dark mode row hover */
.dark .ag-theme-alpine .ag-row:hover {
  background: #374151 !important;
}

.dark .ag-theme-alpine .ag-floating-filter-input {
  border-color: #4b5563;
  background: #374151;
  color: #f9fafb;
}

/* Dark mode overlay/no-rows styling */
.dark .ag-theme-alpine .ag-overlay-no-rows-wrapper,
.dark .ag-theme-requests-normal .ag-overlay-no-rows-wrapper {
  color: #f9fafb !important;
}

.dark .ag-theme-alpine .ag-overlay-wrapper,
.dark .ag-theme-requests-normal .ag-overlay-wrapper {
  color: #f9fafb !important;
}

/* AG Grid Modern Scrollbar Styling */

.ag-theme-alpine ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.ag-theme-alpine ::-webkit-scrollbar-track {
  background: #f9fafb;
}

.dark .ag-theme-alpine ::-webkit-scrollbar-track {
  background: #1f2937;
}

.ag-theme-alpine ::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 4px;
}

.ag-theme-alpine ::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

.dark .ag-theme-alpine ::-webkit-scrollbar-thumb {
  background: #4b5563;
}

.dark .ag-theme-alpine ::-webkit-scrollbar-thumb:hover {
  background: #6b7280;
}

/* AG Grid Live View Mode Styling */

.ag-grid-container-live {
  height: 600px;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
}

/* Live View AG Grid Theme */
.ag-theme-live-view.ag-theme-alpine {
  --ag-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, sans-serif;
  --ag-font-size: 14px;
  --ag-header-background-color: rgba(255, 255, 255, 0.05);
  --ag-header-foreground-color: rgba(255, 255, 255, 0.7);
  --ag-header-cell-hover-background-color: rgba(255, 255, 255, 0.1);
  --ag-odd-row-background-color: transparent;
  --ag-row-hover-color: rgba(255, 255, 255, 0.05);
  --ag-selected-row-background-color: rgba(255, 255, 255, 0.1);
  --ag-foreground-color: #ffffff;
  --ag-background-color: transparent;
  --ag-border-color: rgba(255, 255, 255, 0.1);
  --ag-header-height: 48px;
  --ag-row-height: 80px;
  --ag-header-font-weight: 600;
  border-radius: 12px;
  overflow: hidden;
}

/* Fix Live View root wrapper */
.ag-theme-live-view .ag-root-wrapper {
  height: 100%;
  display: flex !important;
  flex-direction: column !important;
  background: transparent !important;
}

/* Fix Live View body backgrounds */
.ag-theme-live-view .ag-center-cols-viewport,
.ag-theme-live-view .ag-body-viewport {
  background: transparent !important;
}

.ag-theme-live-view .ag-body {
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

.ag-theme-live-view .ag-body-viewport {
  overflow-y: auto;
}

/* Fix Live View rows background */
.ag-theme-live-view .ag-row {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.ag-theme-live-view .ag-row:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Live View header styling */
.ag-theme-live-view .ag-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
}

.ag-theme-live-view .ag-header-cell-text,
.ag-theme-live-view .ag-header-cell-label {
  color: rgba(255, 255, 255, 0.7) !important;
  font-weight: 600;
}

/* Fix Live View header icons */
.ag-theme-live-view .ag-header-cell-menu-button .ag-icon,
.ag-theme-live-view .ag-sort-ascending-icon,
.ag-theme-live-view .ag-sort-descending-icon,
.ag-theme-live-view .ag-sort-indicator-icon {
  color: rgba(255, 255, 255, 0.7) !important;
  fill: rgba(255, 255, 255, 0.7) !important;
}

.ag-theme-live-view .ag-header * {
  color: rgba(255, 255, 255, 0.7) !important;
}

.ag-theme-live-view .ag-header svg {
  fill: rgba(255, 255, 255, 0.7) !important;
}

/* Live View cell styling */
.ag-theme-live-view .ag-cell {
  display: flex;
  align-items: center;
  padding: 0 16px;
  line-height: 1.5;
  color: #ffffff !important;
  overflow: hidden !important;
}

/* Force text overflow handling in Live View cells */
.ag-theme-live-view .ag-cell-wrapper {
  overflow: hidden !important;
  width: 100%;
}

.ag-theme-live-view .ag-cell-value,
.ag-theme-live-view .ag-cell-content {
  overflow: hidden !important;
  max-width: 100% !important;
}

/* Live View pagination styling */
.ag-theme-live-view .ag-paging-panel {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05) !important;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  margin-top: 0 !important;
}

.ag-theme-live-view .ag-paging-panel span,
.ag-theme-live-view .ag-paging-panel div,
.ag-theme-live-view .ag-paging-panel button,
.ag-theme-live-view .ag-paging-panel * {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Live View pagination dropdown */
.ag-theme-live-view select,
.ag-theme-live-view .ag-paging-page-size-base select {
  color: rgba(255, 255, 255, 0.7) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 6px 32px 6px 12px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' opacity='0.7' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

.ag-theme-live-view select:hover,
.ag-theme-live-view .ag-paging-page-size-base select:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.3);
}

/* Live View scrollbar styling */
.ag-theme-live-view .ag-body-viewport::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.ag-theme-live-view .ag-body-viewport::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.ag-theme-live-view .ag-body-viewport::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.ag-theme-live-view .ag-body-viewport::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* AG Grid Requests - Live Mode Styling */
.ag-theme-requests-live {
  --ag-background-color: transparent;
  --ag-header-background-color: rgba(255, 255, 255, 0.05);
  --ag-header-foreground-color: rgba(255, 255, 255, 0.7);
  --ag-foreground-color: #ffffff;
  --ag-border-color: rgba(255, 255, 255, 0.1);
  --ag-row-hover-color: rgba(255, 255, 255, 0.05);
  --ag-odd-row-background-color: rgba(255, 255, 255, 0.02);
  --ag-header-height: 45px;
  --ag-row-height: 60px;
  border-radius: 1rem;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
}

.ag-theme-requests-live .ag-header-cell-label {
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
}

.ag-theme-requests-live .ag-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Live View pagination dropdown */
.ag-theme-requests-live select,
.ag-theme-requests-live .ag-paging-page-size-base select {
  color: rgba(255, 255, 255, 0.7) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 6px 32px 6px 12px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' opacity='0.7' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

.ag-theme-requests-live select:focus,
.ag-theme-requests-live .ag-paging-page-size-base select:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.ag-theme-requests-live select:hover,
.ag-theme-requests-live .ag-paging-page-size-base select:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.3);
}

/* AG Grid Requests Page Themes - Normal Mode and Card Layout */

/* AG Grid Requests - Normal Mode Styling (Light) */
.ag-theme-requests-normal {
  --ag-background-color: #ffffff;
  --ag-header-background-color: #f9fafb;
  --ag-header-foreground-color: #374151;
  --ag-foreground-color: #111827;
  --ag-border-color: #e5e7eb;
  --ag-row-hover-color: #f3f4f6;
  --ag-odd-row-background-color: #f9fafb;
  --ag-header-height: 45px;
  --ag-row-height: 60px;
  border-radius: 0.5rem;
  overflow: hidden;
}

.ag-theme-requests-normal .ag-header-cell-label {
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
}

/* Normal Mode pagination dropdown - Light */
.ag-theme-requests-normal select,
.ag-theme-requests-normal .ag-paging-page-size-base select {
  color: #374151 !important;
  background: #ffffff !important;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 6px 32px 6px 12px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23737480' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

.ag-theme-requests-normal select:hover,
.ag-theme-requests-normal .ag-paging-page-size-base select:hover {
  border-color: #9ca3af;
}

.ag-theme-requests-normal select:focus,
.ag-theme-requests-normal .ag-paging-page-size-base select:focus {
  outline: none;
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

/* AG Grid Requests - Normal Mode Dark Theme */
.dark .ag-theme-requests-normal {
  --ag-background-color: #111827;
  --ag-header-background-color: #1f2937;
  --ag-header-foreground-color: #9ca3af;
  --ag-foreground-color: #f3f4f6;
  --ag-border-color: #374151;
  --ag-row-hover-color: #1f2937;
  --ag-odd-row-background-color: #0f172a;
}

.dark .ag-theme-requests-normal select,
.dark .ag-theme-requests-normal .ag-paging-page-size-base select {
  color: #f9fafb !important;
  background: #374151 !important;
  border-color: #4b5563 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%9CA3AF' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

.dark .ag-theme-requests-normal select:hover,
.dark .ag-theme-requests-normal .ag-paging-page-size-base select:hover {
  border-color: #6b7280;
  background: #4b5563 !important;
}

.dark .ag-theme-requests-normal select:focus,
.dark .ag-theme-requests-normal .ag-paging-page-size-base select:focus {
  border-color: #9333ea;
  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.2);
}

/* Status badges within AG Grid */
.ag-theme-requests-normal .approved-badge,
.ag-theme-requests-normal .rejected-badge,
.ag-theme-requests-normal .pending-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}

.ag-theme-requests-normal .approved-badge {
  background-color: #d1fae5;
  color: #065f46;
}

.dark .ag-theme-requests-normal .approved-badge {
  background-color: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
}

.ag-theme-requests-normal .rejected-badge {
  background-color: #fee2e2;
  color: #991b1b;
}

.dark .ag-theme-requests-normal .rejected-badge {
  background-color: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}

.ag-theme-requests-normal .pending-badge {
  background-color: #fef3c7;
  color: #92400e;
}

.dark .ag-theme-requests-normal .pending-badge {
  background-color: rgba(251, 191, 36, 0.2);
  color: #fcd34d;
}

/* AG Grid Card Layout Container */
.ag-grid-card-container {
  height: 800px;
  width: 100%;
  overflow: hidden;
}

.ag-grid-card-container > .ag-theme-alpine {
  height: 100%;
}

/* AG Grid Requests Card Layout - Live Mode */
.ag-theme-requests-card-live {
  --ag-background-color: transparent;
  --ag-header-background-color: rgba(255, 255, 255, 0.05);
  --ag-header-foreground-color: rgba(255, 255, 255, 0.7);
  --ag-foreground-color: #ffffff;
  --ag-border-color: rgba(255, 255, 255, 0.1);
  --ag-row-hover-color: transparent;
  --ag-odd-row-background-color: transparent;
  --ag-header-height: 50px;
  --ag-row-height: 180px;
  border-radius: 1rem;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
}

.ag-theme-requests-card-live .ag-header-cell-label {
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
}

.ag-theme-requests-card-live .ag-row {
  border-bottom: none;
  padding: 8px 0;
}

.ag-theme-requests-card-live .ag-cell {
  padding: 0 !important;
  overflow: visible !important;
}

/* Remove padding from card cells */
.no-padding-cell {
  padding: 0 !important;
}

/* Card pagination dropdown - Live Mode */
.ag-theme-requests-card-live select,
.ag-theme-requests-card-live .ag-paging-page-size-base select {
  color: rgba(255, 255, 255, 0.7) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 6px 32px 6px 12px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' opacity='0.7' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

.ag-theme-requests-card-live select:hover,
.ag-theme-requests-card-live .ag-paging-page-size-base select:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.3);
}

.ag-theme-requests-card-live select:focus,
.ag-theme-requests-card-live .ag-paging-page-size-base select:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

/* AG Grid Requests Card Layout - Normal Mode */
.ag-theme-requests-card-normal {
  --ag-background-color: #ffffff;
  --ag-header-background-color: #f9fafb;
  --ag-header-foreground-color: #374151;
  --ag-foreground-color: #111827;
  --ag-border-color: #e5e7eb;
  --ag-row-hover-color: transparent;
  --ag-odd-row-background-color: transparent;
  --ag-header-height: 50px;
  --ag-row-height: 180px;
  border-radius: 0.5rem;
  overflow: hidden;
}

.ag-theme-requests-card-normal .ag-header-cell-label {
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
}

.ag-theme-requests-card-normal .ag-row {
  border-bottom: none;
  padding: 8px 0;
}

.ag-theme-requests-card-normal .ag-cell {
  padding: 0 !important;
  overflow: visible !important;
}

/* Card pagination dropdown - Normal Mode Light */
.ag-theme-requests-card-normal select,
.ag-theme-requests-card-normal .ag-paging-page-size-base select {
  color: #374151 !important;
  background: #ffffff !important;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 6px 32px 6px 12px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23737480' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

.ag-theme-requests-card-normal select:hover,
.ag-theme-requests-card-normal .ag-paging-page-size-base select:hover {
  border-color: #9ca3af;
}

.ag-theme-requests-card-normal select:focus,
.ag-theme-requests-card-normal .ag-paging-page-size-base select:focus {
  outline: none;
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

/* AG Grid Requests Card Layout - Normal Mode Dark Theme */
.dark .ag-theme-requests-card-normal {
  --ag-background-color: #111827;
  --ag-header-background-color: #1f2937;
  --ag-header-foreground-color: #9ca3af;
  --ag-foreground-color: #f3f4f6;
  --ag-border-color: #374151;
  --ag-row-hover-color: transparent;
  --ag-odd-row-background-color: transparent;
}

.dark .ag-theme-requests-card-normal select,
.dark .ag-theme-requests-card-normal .ag-paging-page-size-base select {
  color: #f9fafb !important;
  background: #374151 !important;
  border-color: #4b5563 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239CA3AF' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

.dark .ag-theme-requests-card-normal select:hover,
.dark .ag-theme-requests-card-normal .ag-paging-page-size-base select:hover {
  border-color: #6b7280;
  background: #4b5563 !important;
}

.dark .ag-theme-requests-card-normal select:focus,
.dark .ag-theme-requests-card-normal .ag-paging-page-size-base select:focus {
  border-color: #9333ea;
  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.2);
}

/* AG Grid Dashboard Theme */

.ag-grid-dashboard-container {
  height: 690px;
  width: 100%;
  overflow: hidden;
}

.ag-grid-dashboard-container > .ag-theme-alpine {
  height: 100%;
}

.ag-theme-dashboard {
  --ag-background-color: transparent;
  --ag-header-background-color: #f9fafb;
  --ag-header-foreground-color: #374151;
  --ag-foreground-color: #111827;
  --ag-border-color: #e5e7eb;
  --ag-row-hover-color: #f3f4f6;
  --ag-odd-row-background-color: transparent;
  --ag-header-height: 45px;
  --ag-row-height: 60px;
  border-radius: 0.5rem;
  overflow: hidden;
}

.ag-theme-dashboard .ag-header-cell-label {
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
}

.ag-theme-dashboard .ag-row {
  border-bottom: 1px solid #e5e7eb;
}

/* Dark mode for dashboard AG Grid */
.dark .ag-theme-dashboard {
  --ag-background-color: transparent;
  --ag-header-background-color: #1f2937;
  --ag-header-foreground-color: #9ca3af;
  --ag-foreground-color: #f3f4f6;
  --ag-border-color: #374151;
  --ag-row-hover-color: #1f2937;
  --ag-odd-row-background-color: transparent;
}

.dark .ag-theme-dashboard .ag-row {
  border-bottom: 1px solid #374151;
}

/* Dashboard AG Grid pagination */
.ag-theme-dashboard .ag-paging-panel {
  border-top: 1px solid #e5e7eb;
  padding: 12px 20px;
  min-height: 50px;
}

.dark .ag-theme-dashboard .ag-paging-panel {
  border-top: 1px solid #374151;
}

/* Dashboard pagination dropdown - Light */
.ag-theme-dashboard select,
.ag-theme-dashboard .ag-paging-page-size-base select {
  color: #374151 !important;
  background: #ffffff !important;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 6px 32px 6px 12px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23737480' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

.ag-theme-dashboard select:hover,
.ag-theme-dashboard .ag-paging-page-size-base select:hover {
  border-color: #9ca3af;
}

.ag-theme-dashboard select:focus,
.ag-theme-dashboard .ag-paging-page-size-base select:focus {
  outline: none;
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

/* Dashboard pagination dropdown - Dark */
.dark .ag-theme-dashboard select,
.dark .ag-theme-dashboard .ag-paging-page-size-base select {
  color: #f9fafb !important;
  background: #374151 !important;
  border-color: #4b5563 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239CA3AF' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

.dark .ag-theme-dashboard select:hover,
.dark .ag-theme-dashboard .ag-paging-page-size-base select:hover {
  border-color: #6b7280;
  background: #4b5563 !important;
}

/* Animations and Keyframes */

/* Animation utilities */
.fade-in {
  animation: fadeIn 0.3s ease-out;
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Notification toast animations */
@keyframes slide-in {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slide-out {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}

/* Animated gradient background for auth pages */
@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.animated-gradient-bg {
  background: linear-gradient(
    -45deg,
    #6d28d9,
    #7c3aed,
    #2563eb,
    #3b82f6,
    #6366f1,
    #8b5cf6
  );
  background-size: 400% 400%;
  animation: gradient-shift 15s ease infinite;
}

/* Custom Scrollbar Utilities */

/* Hide scrollbar but allow scrolling */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

/* Helper Utilities - Icons, Text Styles, Focus Styles */

/* Icon styles */
.icon {
    height: 1.25rem;
    width: 1.25rem
}

.icon-sm {
    height: 1rem;
    width: 1rem
}

.icon-lg {
    height: 1.5rem;
    width: 1.5rem
}

/* Text styles */
.text-gradient {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    --tw-gradient-from: #4f46e5 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(79 70 229 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: #9333ea var(--tw-gradient-to-position);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent
}
.text-gradient:is(.dark *) {
    --tw-gradient-from: #818cf8 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(129 140 248 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: #c084fc var(--tw-gradient-to-position)
}

/* Focus styles */
.focus-visible:focus-visible,
*:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
    --tw-ring-offset-width: 2px
}
.focus-visible:focus-visible:is(.dark *),
*:focus-visible:is(.dark *) {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity, 1))
}