/* ==========================================================================
   SPPIS — Custom Styles (Tailwind CDN handles utility classes)
   Only styles Tailwind cannot produce go here.
   ========================================================================== */

/* ----- 1. Custom Scrollbar ---------------------------------------------- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #94a3b8;           /* slate-400 */
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #64748b;           /* slate-500 */
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 transparent;
}

/* ----- 2. Signature Canvas ---------------------------------------------- */
.signature-canvas {
  cursor: crosshair;
  border: 2px dashed #cbd5e1;    /* slate-300 */
  border-radius: 0.5rem;
  touch-action: none;            /* prevent scroll while signing */
}

/* ----- 3. Quill Editor Overrides ---------------------------------------- */
.ql-toolbar.ql-snow {
  border-color: #e2e8f0 !important;      /* slate-200 */
  border-radius: 0.5rem 0.5rem 0 0 !important;
  background: #f8fafc;                    /* slate-50 */
}
.ql-container.ql-snow {
  border-color: #e2e8f0 !important;
  border-radius: 0 0 0.5rem 0.5rem !important;
  min-height: 400px;
  font-family: inherit;
  font-size: 1rem;
  padding: 1rem 1.25rem;
}
.ql-editor.ql-blank::before {
  font-style: normal;
  color: #94a3b8;
}
/* Match blue accent on active toolbar button */
.ql-snow .ql-stroke {
  stroke: #475569;
}
.ql-snow .ql-fill {
  fill: #475569;
}
.ql-snow .ql-picker-label:hover .ql-stroke,
.ql-snow .ql-picker-label:hover .ql-fill {
  stroke: #1e40af;              /* blue-800 */
  fill: #1e40af;
}
.ql-snow .ql-active .ql-stroke {
  stroke: #1e40af;
}
.ql-snow .ql-active .ql-fill {
  fill: #1e40af;
}

/* ----- 4. SweetAlert2 Theme --------------------------------------------- */
.swal2-popup {
  border-radius: 0.75rem !important;
  font-family: inherit !important;
}
.swal2-popup.swal2-modal {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
}
.swal2-confirm {
  background-color: #1e40af !important;   /* blue-800 */
  border-radius: 0.5rem !important;
  padding: 0.625rem 1.75rem !important;
  font-weight: 600 !important;
}
.swal2-confirm:focus {
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.3) !important;
}
.swal2-cancel {
  border-radius: 0.5rem !important;
  padding: 0.625rem 1.75rem !important;
  font-weight: 600 !important;
}
.swal2-title {
  font-size: 1.25rem !important;
  color: #1e293b !important;              /* slate-800 */
}
.swal2-html-container {
  color: #475569 !important;              /* slate-600 */
}
.swal2-icon.swal2-success {
  border-color: #22c55e !important;
  color: #22c55e !important;
}
.swal2-icon.swal2-error {
  border-color: #ef4444 !important;
  color: #ef4444 !important;
}
.swal2-icon.swal2-warning {
  border-color: #f59e0b !important;
  color: #f59e0b !important;
}

/* ----- 5. Page Transition Animations ------------------------------------ */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
  animation: fadeIn 0.4s ease-out both;
}
.animate-slide-up {
  animation: slideUp 0.5s ease-out both;
}
/* Staggered delay helpers (used via JS IntersectionObserver) */
.stagger-1 { animation-delay: 0.05s; }
.stagger-2 { animation-delay: 0.10s; }
.stagger-3 { animation-delay: 0.15s; }
.stagger-4 { animation-delay: 0.20s; }
.stagger-5 { animation-delay: 0.25s; }

/* ----- 6. Loading Skeleton Shimmer -------------------------------------- */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 0.375rem;
}

/* ----- 7. Table Scroll Container ---------------------------------------- */
.table-scroll {
  max-height: 420px;
  overflow-y: auto;
  overflow-x: auto;
}

/* ----- 8. Prose / Article Content Typography --------------------------- */
.prose-article {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: #334155;                          /* slate-700 */
}
.prose-article h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0f172a;                          /* slate-900 */
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
.prose-article h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1e293b;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.prose-article p {
  margin-bottom: 1rem;
}
.prose-article img {
  border-radius: 0.5rem;
  margin: 1.5rem 0;
  max-width: 100%;
  height: auto;
}
.prose-article a {
  color: #1e40af;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.prose-article a:hover {
  color: #1e3a8a;
}
.prose-article ul,
.prose-article ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}
.prose-article li {
  margin-bottom: 0.25rem;
}
.prose-article blockquote {
  border-left: 4px solid #1e40af;
  padding-left: 1rem;
  color: #64748b;
  font-style: italic;
  margin: 1.25rem 0;
}
.prose-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
}
.prose-article th,
.prose-article td {
  border: 1px solid #e2e8f0;
  padding: 0.5rem 0.75rem;
  text-align: left;
}
.prose-article th {
  background: #f1f5f9;
  font-weight: 600;
  color: #1e293b;
}

/* ----- 9. Responsive Tweaks --------------------------------------------- */
@media (max-width: 640px) {
  .ql-container.ql-snow {
    min-height: 250px;
    padding: 0.75rem;
  }
  .table-scroll {
    max-height: 320px;
  }
  .prose-article {
    font-size: 1rem;
    line-height: 1.7;
  }
  .prose-article img {
    margin: 1rem 0;
  }
}

/* ----- 10. Floating Image Widget (Mobile) ------------------------------ */
@keyframes bounceIn {
  0%   { opacity: 0; transform: scale(0.3) translateY(20px); }
  50%  { opacity: 1; transform: scale(1.05) translateY(-5px); }
  70%  { transform: scale(0.95) translateY(2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.animate-bounce-in {
  animation: bounceIn 0.6s ease-out both;
}

/* ----- 10b. Hidden Scrollbar Utility ---------------------------------- */
.scroll-hide {
  overflow-y: auto;
  -ms-overflow-style: none;       /* IE / Edge */
  scrollbar-width: none;          /* Firefox */
}
.scroll-hide::-webkit-scrollbar {
  display: none;                   /* Chrome / Safari */
}

/* ----- 11. Logo Marquee (Seamless Infinite Scroll) -------------------- */
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-33.3333%); }
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll var(--marquee-duration, 30s) linear infinite;
  will-change: transform;
}
.marquee-track:hover {
  animation-play-state: paused;
}
.marquee-track img {
  filter: none !important;
  opacity: 1 !important;
}

/* ----- 12. Print Styles ------------------------------------------------- */
@media print {
  /* Hide non-content elements */
  aside,
  nav,
  .sidebar,
  .no-print,
  .btn,
  button,
  .swal2-container {
    display: none !important;
  }

  /* Reset layout to single column */
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 12pt;
  }
  main,
  .content-area {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: none !important;
    border: none !important;
  }

  /* Ensure links show URLs */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
  }
  a[href^="#"]::after {
    content: "";
  }

  /* Avoid page-break inside elements */
  table, figure, img {
    page-break-inside: avoid;
  }
  h2, h3 {
    page-break-after: avoid;
  }

  /* Remove backgrounds and shadows for clean print */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}