/* Rhema Pulse — additions to the prototype's compiled stylesheet (app.css)
   for the plain-HTML equivalents of its React components. */

[hidden] { display: none !important; }
body { font-family: var(--font-sans); }

/* Theme toggle icon: show sun in dark mode, moon in light mode */
.rp-icon-dark { display: none; }
.dark .rp-icon-dark { display: inline-flex; }
.dark .rp-icon-light { display: none; }

/* Native <select> styled like the Radix trigger */
select.rp-select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' 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 .6rem center; background-size: 1rem;
  padding-right: 2rem; cursor: pointer; color: hsl(var(--foreground));
}
select.rp-select option { background: hsl(var(--popover)); color: hsl(var(--popover-foreground)); }
input[type="date"] { color-scheme: light; }
.dark input[type="date"] { color-scheme: dark; }

.rp-check, .rp-radio, .rp-range { accent-color: hsl(var(--primary)); }
.rp-check, .rp-radio { width: 1rem; height: 1rem; cursor: pointer; }
.rp-range { height: 1.25rem; cursor: pointer; }

/* Switch (prototype Radix switch) */
.rp-switch {
  position: relative; display: inline-flex; height: 1.5rem; width: 2.75rem; flex-shrink: 0; cursor: pointer;
  align-items: center; border-radius: 9999px; border: 2px solid transparent; transition: background-color .15s;
  background: hsl(var(--input));
}
.rp-switch[data-state="checked"] { background: hsl(var(--primary)); }
.rp-switch:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.rp-switch-thumb {
  pointer-events: none; display: block; height: 1.25rem; width: 1.25rem; border-radius: 9999px;
  background: hsl(var(--background)); box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: transform .15s; transform: translateX(0);
}
.rp-switch[data-state="checked"] .rp-switch-thumb { transform: translateX(1.25rem); }
.rp-switch[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* Dropdown panels */
.rp-pop { animation: rp-pop-in .12s ease-out; max-height: 70vh; overflow-y: auto; }
@keyframes rp-pop-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }

/* Sheet & dialog entrance */
.rp-sheet > div:last-child { animation: rp-slide-in .25s ease-out; }
@keyframes rp-slide-in { from { transform: translateX(-100%); } to { transform: none; } }
.rp-dialog [role="dialog"] { animation: rp-fade .15s ease-out; max-height: 92vh; overflow-y: auto; }
@keyframes rp-fade { from { opacity: 0; } to { opacity: 1; } }

/* Toasts */
.rp-toasts { pointer-events: none; }
.rp-toast {
  pointer-events: auto; position: relative; display: flex; width: 100%; align-items: center; justify-content: space-between;
  gap: 1rem; overflow: hidden; border-radius: calc(var(--radius) - 2px); border: 1px solid hsl(var(--border));
  padding: 1rem 2rem 1rem 1.25rem; margin-top: .5rem; box-shadow: 0 10px 30px rgba(0,0,0,.18);
  background: hsl(var(--background)); color: hsl(var(--foreground)); animation: rp-toast-in .2s ease-out;
}
.rp-toast.destructive { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); border-color: hsl(var(--destructive)); }
.rp-toast-title { font-size: .875rem; font-weight: 600; }
.rp-toast-desc { font-size: .8125rem; opacity: .9; margin-top: .125rem; }
.rp-toast-x { position: absolute; right: .5rem; top: .5rem; opacity: .6; cursor: pointer; background: none; border: 0; color: inherit; }
@keyframes rp-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Charts */
.rp-chart svg { display: block; overflow: visible; }
.rp-chart text { font-family: var(--font-sans); }
.rp-tip {
  position: fixed; z-index: 60; pointer-events: none; background: hsl(var(--popover)); color: hsl(var(--popover-foreground));
  border: 1px solid hsl(var(--popover-border)); border-radius: 8px; font-size: 12px; padding: 8px 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); max-width: 280px;
}
.rp-tip b { display: block; color: hsl(var(--foreground)); font-weight: 600; margin-bottom: 2px; }
.rp-tip i { display: inline-block; width: 8px; height: 8px; border-radius: 9999px; margin-right: 6px; }

.rp-code { font-family: var(--font-mono); white-space: pre; tab-size: 4; }
details > summary::-webkit-details-marker { display: none; }

/* Wizard step pills */
[data-step-btn][data-active="true"] { border-color: hsl(var(--primary)); background: hsl(var(--primary) / .1); color: hsl(var(--primary)); font-weight: 500; }
[data-step-btn][data-done="true"] [data-step-num] { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }

button[disabled], a[aria-disabled="true"] { cursor: not-allowed; }
.rp-busy { opacity: .6; pointer-events: none; }

@media print {
  .print-hide-sidebar { display: block !important; }
  .rp-chart { break-inside: avoid; }
  .shadcn-card { box-shadow: none !important; }
}

/* Utilities used by the PHP build that the prototype's compiled CSS didn't include */
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.font-sans { font-family: var(--font-sans); }
.text-sky-600 { color: rgb(2 132 199); }
.dark .dark\:text-sky-400 { color: rgb(56 189 248); }
.max-w-\[260px\] { max-width: 260px; }
.p-2\.5 { padding: .625rem; }
.w-16 { width: 4rem; }
.w-\[60px\] { width: 60px; }
.w-\[70px\] { width: 70px; }
.w-\[90px\] { width: 90px; }
.w-\[170px\] { width: 170px; }
@media (min-width: 640px) {
  .sm\:grid-cols-\[1fr_150px_1fr_auto\] { grid-template-columns: 1fr 150px 1fr auto; }
  .sm\:grid-cols-\[1fr_170px_auto\] { grid-template-columns: 1fr 170px auto; }
}