/* Hunara demo — small custom styles on top of Tailwind (Play CDN).
   Everything visual is Tailwind; this file only holds things utilities
   can't express cleanly. */

:root { color-scheme: light; }

html, body { background: #F1F1F5; }
body {
  font-feature-settings: 'cv11', 'ss01', 'ss03'; /* Inter stylistic alternates */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Slim, unobtrusive scrollbars (sidebar, tables, drawers) */
.scrollthin { scrollbar-width: thin; scrollbar-color: #cbd2e0 transparent; }
.scrollthin::-webkit-scrollbar { width: 8px; height: 8px; }
.scrollthin::-webkit-scrollbar-thumb { background: #cbd2e0; border-radius: 999px; }
.scrollthin::-webkit-scrollbar-track { background: transparent; }

/* Native selects — custom chevron with breathing room from the right edge */
.app-select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}

/* Sortable data tables — row hover + clickable header carets */
table[data-sortable] tbody tr { transition: background-color .12s ease; }
table[data-sortable] tbody tr:hover { background-color: #f8fafc; }
table[data-sortable] thead th { cursor: pointer; user-select: none; white-space: nowrap; }
table[data-sortable] thead th .sort-caret { opacity: .4; font-size: .85em; margin-left: 2px; }
table[data-sortable] thead th[data-dir] .sort-caret { opacity: 1; color: #4558A3; }

/* Charts — line-chart hover crosshair + tooltip, and bar hover */
.tc-wrap { cursor: crosshair; }
.tc-tip {
  position: absolute; z-index: 20; left: 0; top: 0;
  transform: translate(-50%, calc(-100% - 14px));
  background: #1f2937; color: #fff; font-size: 12px; font-weight: 700; line-height: 1.25;
  padding: 6px 9px; border-radius: 8px; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(15,23,42,.22);
  opacity: 0; pointer-events: none; transition: opacity .12s ease;
}
.tc-tip.tc-on { opacity: 1; }
.tc-tip.tc-below { transform: translate(-50%, 14px); }
.tc-tip .tc-tip-m { display: block; color: #cbd5e1; font-weight: 500; font-size: 10px; margin-bottom: 1px; }
.chart-hover { transition: filter .15s ease; }
.chart-hover:hover { filter: brightness(.93); }
.donut-seg { transition: stroke-width .14s ease, opacity .14s ease; cursor: pointer; }
.donut-seg.donut-on { stroke-width: 18; }
.donut-seg.donut-dim { opacity: .4; }

/* Hero card bars — subtle breathing (ported from the app globals.css) */
@keyframes hero-bar-breathe {
  0%, 100% { transform: scaleY(0.96); opacity: 0.9; }
  50%      { transform: scaleY(1.02); opacity: 1; }
}
.hero-bar-breathe { transform-origin: bottom; animation: hero-bar-breathe 4.5s ease-in-out infinite; will-change: transform, opacity; }

/* Toast + modal entrances */
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.animate-toast { animation: toast-in .25s cubic-bezier(.2,.7,.2,1) both; }
.animate-overlay { animation: overlay-in .18s ease both; }
.animate-sheet { animation: sheet-in .24s cubic-bezier(.2,.7,.2,1) both; }

/* Reveal-less: demo content should always be visible (no JS-gated hiding) */

@media (prefers-reduced-motion: reduce) {
  .hero-bar-breathe, .animate-toast, .animate-overlay, .animate-sheet { animation: none; }
}

/* Site plan grid backdrop */
.siteplan-grid {
  background-image:
    linear-gradient(transparent calc(100% - 1px), rgba(69,88,163,.08) calc(100% - 1px)),
    linear-gradient(90deg, transparent calc(100% - 1px), rgba(69,88,163,.08) calc(100% - 1px));
  background-size: 28px 28px;
}