/* Component classes. Colours come from the theme variables generated by tailwind.config.js (light + html.dark). */
body { font-feature-settings: "cv11", "ss01"; }
.card, .panel { background: rgb(var(--white)); border-radius: .875rem; border: 1px solid rgb(var(--slate-200)); }
.panel { box-shadow: 0 1px 2px rgb(15 23 42 / .04), 0 1px 12px -4px rgb(15 23 42 / .06); }
html.dark .panel { box-shadow: none; }
.input { border: 1px solid rgb(var(--slate-300)); border-radius: .5rem; padding: .375rem .5rem; font-size: .875rem; background: rgb(var(--white)); color: inherit; }
.input:focus { outline: 2px solid rgb(var(--indigo-500)); outline-offset: -1px; }
.btn { display: inline-flex; align-items: center; gap: .375rem; border-radius: .5rem; padding: .375rem .75rem; font-size: .875rem; font-weight: 500; background: rgb(var(--indigo-600)); color: #fff; transition: background-color .15s; }
.btn:hover { background: rgb(var(--indigo-700)); }
html.dark .btn:not(.btn-secondary):not(.btn-danger):hover { background: rgb(var(--indigo-400)); }
.btn-secondary { background: rgb(var(--white)); color: rgb(var(--slate-700)); border: 1px solid rgb(var(--slate-300)); }
.btn-secondary:hover { background: rgb(var(--slate-100)); }
.btn-danger { background: rgb(var(--white)); color: rgb(var(--red-700)); border: 1px solid rgb(var(--red-200)); }
.btn-danger:hover { background: rgb(var(--red-50)); }
.tbl { width: 100%; font-size: .875rem; }
.tbl th { text-align: left; font-weight: 600; color: rgb(var(--slate-600)); background: rgb(var(--slate-50)); padding: .5rem .75rem; border-bottom: 1px solid rgb(var(--slate-200)); white-space: nowrap; }
.tbl td { padding: .45rem .75rem; border-bottom: 1px solid rgb(var(--slate-100)); vertical-align: top; }
.tbl tr:hover td { background: rgb(var(--slate-50)); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pos { color: rgb(var(--emerald-700)); }
.neg { color: rgb(var(--red-700)); }
.badge { display: inline-block; border-radius: 9999px; padding: .1rem .55rem; font-size: .75rem; font-weight: 500; }
.icon { width: 1em; height: 1em; display: inline-block; vertical-align: -.125em; flex-shrink: 0; }
.htmx-request { opacity: .6; }
.chart { width: 100%; height: 100%; }
.cat-badge { background: color-mix(in srgb, var(--c) 13%, transparent); color: var(--c); }
html.dark .cat-badge { background: color-mix(in srgb, var(--c) 22%, transparent); color: color-mix(in srgb, var(--c) 45%, #fff); }
[data-theme-icon] { display: none; }
html[data-theme="auto"] [data-theme-icon="auto"], html[data-theme="light"] [data-theme-icon="light"], html[data-theme="dark"] [data-theme-icon="dark"] { display: inline; }