/* Global stylesheet — full port of v2's src/index.css, plus the shims this server-rendered
   version needs because it loads Tailwind v3 from the Play CDN while the React source is
   built against Tailwind v4. */

/* ---------------------------------------------------------------------------
   Utilities (ported verbatim from v2 src/index.css @layer utilities)
   --------------------------------------------------------------------------- */

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Sleek custom horizontal scrollbar so buttons and tabs are easily scrollable */
.custom-scrollbar::-webkit-scrollbar {
  height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: #e2e8f0;
  border-radius: 9999px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #94a3b8;
  border-radius: 9999px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 #e2e8f0;
}

/* ---------------------------------------------------------------------------
   Tailwind v4 utilities the v3 Play CDN does not ship, but which the ported
   markup uses. Without these the elements render completely unstyled for that
   property, so they are reproduced by hand.
   --------------------------------------------------------------------------- */
.shadow-xs { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.shadow-2xs { box-shadow: 0 1px rgb(0 0 0 / 0.05); }
.rounded-4xl { border-radius: 2rem; }
.blur-xs { --tw-blur: blur(4px); filter: var(--tw-blur); }
.backdrop-blur-xs { --tw-backdrop-blur: blur(4px); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.outline-hidden { outline: 2px solid transparent; outline-offset: 2px; }

/* Variant-prefixed forms of the same v4-only utilities. The v3 CDN cannot generate a variant for
   a utility it does not know, so `focus:outline-hidden` and `hover:shadow-*` silently did nothing
   until these were written out by hand. */
.focus\:outline-hidden:focus { outline: 2px solid transparent; outline-offset: 2px; }
.focus-within\:outline-hidden:focus-within { outline: 2px solid transparent; outline-offset: 2px; }
.hover\:shadow-xs:hover { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.hover\:shadow-2xs:hover { box-shadow: 0 1px rgb(0 0 0 / 0.05); }

/* v4 renamed the gradient utilities; support both spellings. */
.bg-linear-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
.bg-linear-to-l { background-image: linear-gradient(to left, var(--tw-gradient-stops)); }
.bg-linear-to-t { background-image: linear-gradient(to top, var(--tw-gradient-stops)); }
.bg-linear-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); }
.bg-linear-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); }
.bg-linear-to-tr { background-image: linear-gradient(to top right, var(--tw-gradient-stops)); }

/* Approximation of tailwindcss-animate's "animate-in fade-in slide-in-from-top-2" entrance,
   which the React build gets from a plugin the CDN build has no equivalent for. */
@keyframes apa-enter {
  from { opacity: 0; transform: translateY(-0.5rem); }
  to { opacity: 1; transform: none; }
}
.animate-in { animation: apa-enter 150ms ease-out; }

/* Signature pad canvas (no React equivalent — this port draws it server-side). */
.sig-canvas { touch-action: none; cursor: crosshair; }

/* ---------------------------------------------------------------------------
   Print rules (ported verbatim from v2 src/index.css @media print)
   --------------------------------------------------------------------------- */
@media print {
  /* Hide non-printable elements */
  header,
  nav,
  .no-print,
  button,
  .notification-center,
  .toast-container,
  input,
  select,
  textarea {
    display: none !important;
  }

  /* Reset layout & overflow constraints for clean printing */
  html, body, #root, main, div {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    background: #ffffff !important;
    color: #000000 !important;
    box-shadow: none !important;
  }

  /* Flatten modals and backdrops during print */
  .fixed, .absolute, [class*="fixed"], [class*="backdrop"] {
    position: static !important;
    background: #ffffff !important;
    backdrop-filter: none !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    inset: auto !important;
    overflow: visible !important;
  }

  /* Retain accurate colors and borders for cards and tables */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    box-shadow: none !important;
  }

  .printable-card {
    border: 1px solid #cbd5e1 !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin-bottom: 20px !important;
    background: #ffffff !important;
    page-break-inside: avoid;
  }

  table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-top: 10px !important;
  }

  th, td {
    border: 1px solid #cbd5e1 !important;
    padding: 8px 10px !important;
  }

  thead {
    background-color: #f1f5f9 !important;
  }

  /* Page setup */
  @page {
    size: A4 portrait;
    margin: 12mm;
  }
}