/*
 * OGS design system — hand-written CSS to complement the Tailwind Play CDN.
 *
 * This file only contains what Tailwind's utility classes cannot express
 * without a build step (custom shadows, keyframe animation, focus-visible
 * refinements, print rules). It is loaded as a static <link>, so it works
 * unmodified on shared hosting with zero build tooling. Keep it small and
 * framework-agnostic; all layout/spacing/color still comes from Tailwind
 * utility classes in the templates.
 */

:root {
  --ogs-shadow-surface: 0 1px 2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.06);
  --ogs-shadow-raised: 0 4px 10px -2px rgba(15, 23, 42, 0.12), 0 2px 4px -2px rgba(15, 23, 42, 0.08);
  --ogs-shadow-nav: 1px 0 0 rgba(15, 23, 42, 0.06), 4px 0 16px -8px rgba(2, 6, 23, 0.35);
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Tabular numerals for logs/reports/timestamps so columns of digits align. */
.ogs-tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* Controlled, intentional elevation — deliberately distinct from Tailwind's
   generic shadow-sm/shadow utilities so surfaces read as "lifted" without
   looking like decorative glow. */
.ogs-surface {
  box-shadow: var(--ogs-shadow-surface);
}

.ogs-surface-raised {
  box-shadow: var(--ogs-shadow-raised);
}

.ogs-sidebar {
  box-shadow: var(--ogs-shadow-nav);
}

/* Keep the sidebar usable when navigation exceeds the viewport without
   adding a bright browser scrollbar to the dark navigation chrome. */
#ogs-sidebar,
#ogs-sidebar * {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#ogs-sidebar::-webkit-scrollbar,
#ogs-sidebar *::-webkit-scrollbar {
  display: none;
}

/* Visible keyboard focus everywhere, including elements Tailwind's
   focus-visible variant doesn't reach by default (e.g. <summary>, <a>). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #0f766e;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Scanning screen: a calm pulse on the "waiting for card" state so security
   staff can tell at a glance that the reader is live, without an animated
   gimmick once a result has been produced. */
@keyframes ogs-pulse-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(15, 23, 42, 0.10); }
  50% { box-shadow: 0 0 0 14px rgba(15, 23, 42, 0); }
}

.ogs-scan-idle {
  animation: ogs-pulse-ring 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ogs-scan-idle {
    animation: none;
  }
  html {
    scroll-behavior: auto;
  }
}

/* Off-canvas mobile sidebar transition (desktop sidebar is always visible
   via md: utility classes; this only affects the small-screen drawer). */
#ogs-sidebar {
  transition: transform 0.2s ease-in-out;
}

@media print {
  #ogs-sidebar, #ogs-topbar, .ogs-no-print {
    display: none !important;
  }
}