/* Sight Solutions Group  supplemental styles (Tailwind does most of the work) */

:root { color-scheme: light; }
html.dark { color-scheme: dark; }

/* Cloak Alpine before it initializes */
[x-cloak] { display: none !important; }

/* Base surfaces */
body { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }

/* Custom scrollbars for data-dense panes */
.thin-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.thin-scroll::-webkit-scrollbar-thumb { background: rgba(100,116,139,.35); border-radius: 8px; }
.thin-scroll::-webkit-scrollbar-track { background: transparent; }

/* Kanban card drag affordance */
.kanban-card { cursor: grab; }
.kanban-card:active { cursor: grabbing; }
.kanban-col.drag-over { outline: 2px dashed #0891b2; outline-offset: -4px; }

/* Drawer + modal transitions handled by Alpine x-transition; add a soft slide for the drawer */
.drawer-panel { box-shadow: -16px 0 40px -12px rgba(15, 23, 42, .35); }

/* Subtle card lift */
.lift { transition: box-shadow .15s ease, transform .15s ease; }
.lift:hover { box-shadow: 0 10px 24px -12px rgba(15,23,42,.28); transform: translateY(-1px); }

/* Score dial */
.score-ring {
  background: conic-gradient(var(--ring-color) calc(var(--pct) * 1%), rgba(148,163,184,.25) 0);
}

/* Focus ring for accessibility */
:focus-visible { outline: 2px solid #0891b2; outline-offset: 2px; }

/* Nice number tabular alignment in tables */
.tabular { font-variant-numeric: tabular-nums; }

/* Truncate helper */
.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   UI/UX polish  global refinements (v4)
   ============================================================ */

/* Softer, layered card shadow + smoother lift */
.shadow-soft { box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 16px -8px rgba(15,23,42,.12); }
.lift { transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
.lift:hover { box-shadow: 0 12px 30px -14px rgba(15,23,42,.30); transform: translateY(-2px); }

/* Buttons & interactive elements get a consistent, snappy transition */
button { transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .08s ease; }
button:active:not(:disabled) { transform: translateY(.5px); }

/* Inputs: consistent, calmer focus */
input, select, textarea { transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }

/* Login hero: layered radial glows + dot grid over the navy gradient */
.auth-hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(600px circle at 15% 15%, rgba(20,184,166,.18), transparent 45%),
    radial-gradient(500px circle at 85% 80%, rgba(6,182,212,.14), transparent 45%);
  pointer-events: none;
}
.auth-hero::after {
  content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 90%);
          mask-image: linear-gradient(to bottom, black, transparent 90%);
}

/* Sidebar nav: rounded active pill hover feel */
.nav-link { border-radius: 10px; }

/* Subtle fade-in for view sections */
@keyframes ssgFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
main > section { animation: ssgFade .22s ease; }

/* Chip/badge crispness */
.badge { letter-spacing: .02em; }

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---- Print: show only the report (.print-area), hide app chrome ---- */
@media print {
  @page { margin: 12mm; }
  html, body { background: #fff !important; }
  body * { visibility: hidden !important; }
  .print-area, .print-area * { visibility: visible !important; }
  .print-area { position: absolute; left: 0; top: 0; width: 100%; max-width: none !important; margin: 0 !important; box-shadow: none !important; border: none !important; }
  .no-print { display: none !important; }
  /* keep the navy letterhead ink when printing */
  .print-area .bg-navy-900 { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}