/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
@import "https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css";
@import "https://cdn.jsdelivr.net/npm/swiper@11.2.6/swiper-bundle.min.css";
@import "https://unpkg.com/tippy.js@6/dist/tippy.css";
@import "admin.css";

/* Layout variables for responsive sidebar - matches layout values */
:root {
  --sidebar-collapsed-width: 72px;
  --sidebar-expanded-width: 220px;
  --sidebar-total-offset: calc(var(--sidebar-collapsed-width) + var(--sidebar-expanded-width));
}

 /* Notification link styles */
 .notification a {
   color: inherit;
   text-decoration: underline;
   text-decoration-thickness: 1px;
   text-underline-offset: 2px;
   transition: opacity 0.2s ease-in-out;
 }

 .notification a:hover {
   opacity: 0.8;
 }

 /* Success notification links */
 .bg-green-50 .notification a {
   color: var(--tw-text-green-800); /* text-green-800 */
 }

 /* Error notification links */
 .bg-red-50 .notification a {
   color: var(--tw-text-red-800); /* text-red-800 */
 }

 /* Filter reminder tooltip styles */
 .filter-reminder-tooltip {
   box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
   width: 320px !important;
   min-width: 320px !important;
   max-width: 320px !important;
 }

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .filter-reminder-tooltip {
    left: 0;
    right: 0;
    min-width: auto;
    max-width: none;
  }
}

.account-service-login--highlight {
  animation: account-service-login-glow 2s ease-out forwards;
}

@keyframes account-service-login-glow {
  0% {
    box-shadow: 0 0 0 4px rgba(106, 99, 255, 0.2);
    background-color: rgba(106, 99, 255, 0.05);
  }
  100% {
    box-shadow: none;
    background-color: transparent;
  }
}

.account-service-login__tips {
  border: 1px dashed rgba(106, 99, 255, 0.4);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  background-color: rgba(106, 99, 255, 0.04);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.account-service-login__tips-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6A63FF;
}

.account-service-login__tips-message {
  font-size: 0.9rem;
  color: #2E3132;
}

.account-service-login-tips__message--enter {
  animation: account-service-login-tip-fade 0.2s ease-out forwards;
}

@keyframes account-service-login-tip-fade {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Audit dashboard-only: fix bg scroll + modal scroll issue */
body:has([data-audit-dashboard]) {
  padding-bottom: 0 !important;
  overflow-y: hidden;
}

body:has([data-audit-dashboard]):has(turbo-frame#modal:not(:empty)) main > div.overflow-y-auto {
  overflow-y: hidden;
}

body:has([data-audit-dashboard]) section[data-audit-discrepancies] > div[data-controller="accordion"]:last-of-type {
  margin-bottom: 40px;
}