/* ═══ Utility classes (replaces Tailwind CDN) ═══ */

/* Flexbox */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 0%; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.shrink-0 { flex-shrink: 0; }

/* Grid */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.gap-1 { gap: 0.25rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Spacing */
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; }
.my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.ml-1 { margin-left: 0.25rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }

/* Sizing */
.w-full { width: 100%; }
.max-w-sm { max-width: 24rem; }
.min-h-screen { min-height: 100vh; }
.overflow-auto { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }

/* Typography */
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.tracking-tight { letter-spacing: -0.025em; }
.tracking-wider { letter-spacing: 0.05em; }
.uppercase { text-transform: uppercase; }
.text-center { text-align: center; }
.whitespace-pre-wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Dark scrollbars */
* { scrollbar-color: #333 #09090b; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #09090b; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* Colors (using Basecoat CSS vars) */
.text-foreground { color: hsl(var(--foreground)); }
.text-muted-foreground { color: hsl(var(--muted-foreground)); }
.text-destructive { color: hsl(var(--destructive)); }
.bg-background { background-color: hsl(var(--background)); }

/* ═══ Compact cards ═══ */
.card { padding-block: 0 !important; gap: 0 !important; }
.card > section { padding: 0.75rem 1rem !important; }
.card > header { padding: 0.75rem 1rem !important; }
.card > footer { padding: 0.75rem 1rem !important; }

/* ═══ Main content padding ═══ */
main {
  padding: 10px 14px;
  transition: padding 0.3s ease-in-out;
}

/* ═══ Form elements ═══ */
input[type="date"], input[type="number"], input[type="text"], select {
  color-scheme: dark;
  background-color: #09090b !important;
  color: #e4e4e7 !important;
  border-color: #27272a !important;
}
select option {
  background-color: #18181b;
  color: #e4e4e7;
}

/* ═══ Checkbox-dropdown multi-select (Esios filters) ═══ */
.ms { position: relative; display: inline-block; }
.ms-btn {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 8px; min-width: 160px; cursor: pointer; text-align: left;
}
.ms-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-caret { opacity: 0.6; font-size: 10px; flex-shrink: 0; }
.ms-menu {
  position: absolute; z-index: 50; margin-top: 2px; min-width: 100%;
  max-height: 280px; overflow-y: auto;
  background: #18181b; border: 1px solid #27272a; border-radius: 0.375rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5); padding: 4px;
}
.ms-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px; border-radius: 4px; cursor: pointer;
  font-size: 0.8rem; color: #e4e4e7; white-space: nowrap;
}
.ms-opt:hover { background: #27272a; }
.ms-opt input { accent-color: #c084fc; cursor: pointer; }

/* ═══ Period stepper ═══ */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--radius, 0.375rem);
  border: 1px solid hsl(var(--border)); background: transparent;
  color: hsl(var(--foreground)); cursor: pointer; transition: background 150ms;
}
.icon-btn:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ═══ Sidebar = daisyUI drawer (scoped) ═══════════════════════════════════
   The sidebar is a daisyUI `drawer` + `menu`. Only those two component CSS
   files are loaded (no daisyUI theme), so daisyUI never recolours the rest of
   the app. The few menu variables it needs are defined locally on .drawer-side
   so they can't leak — in particular daisyUI's `--border` (a width) must not
   reach <main>, where basecoat reads `--border` as a colour. */
:root { --inargy-side-w: 16rem; }

.inargy-drawer .drawer-side {
  --color-base-100: #18181b;
  --color-base-200: #1f1f23;
  --color-base-content: #e4e4e7;
  --color-neutral: #27272a;
  --color-neutral-content: #fafafa;
  --border: 1px;
  --radius-box: 0.5rem;
  --radius-field: 0.375rem;
}
.inargy-side-inner {
  width: var(--inargy-side-w); height: 100dvh;
  display: flex; flex-direction: column;
  background: #18181b; border-right: 1px solid #27272a;
}
.inargy-side-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.55rem 0.7rem;
}
.inargy-brand { font-size: 1.125rem; font-weight: 700; color: #fafafa; }
.inargy-nav { flex: 1; min-height: 0; overflow-y: auto; }
.inargy-menu { flex-wrap: nowrap; gap: 0.125rem; }
.inargy-menu .menu-title { color: #a1a1aa; }
/* Small gap before each section heading (not the first) to separate groups. */
.inargy-menu .menu-title:not(:first-child) { margin-top: 0.6rem; }
.inargy-side-foot { padding: 0.7rem; border-top: 1px solid #27272a; }

/* Collapse (‹, in the header) and expand (›, floating) controls. */
.inargy-toggle-btn, .inargy-expand {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: 0.375rem; border: 1px solid #27272a;
  color: #e4e4e7; background: transparent; cursor: pointer;
  transition: background 150ms;
}
.inargy-toggle-btn:hover, .inargy-expand:hover { background: #27272a; }
.inargy-expand {
  position: fixed; left: 8px; top: 8px; z-index: 50;
  width: 32px; height: 32px; display: none;
  background: #18181b; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
/* Floating expand button + content nudge appear only while collapsed. */
.inargy-drawer:has(> .drawer-toggle:not(:checked)) ~ .inargy-expand {
  display: inline-flex;
}
/* main keeps its own padding (below); nudge it right while collapsed so the
   floating expand button never covers a page heading in the top-left. */
.inargy-drawer:has(> .drawer-toggle:not(:checked)) main {
  padding-left: 48px;
}
/* Desktop: an open drawer pushes content (sidebar in-flow) with no dim
   overlay; collapsed slides it off-canvas (daisyUI default). Mobile keeps
   daisyUI's native overlay behaviour. */
@media (min-width: 768px) {
  .inargy-drawer > .drawer-toggle:checked ~ .drawer-side {
    position: sticky; top: 0; height: 100dvh;
    visibility: visible; opacity: 1; pointer-events: auto; width: auto;
  }
  .inargy-drawer > .drawer-toggle:checked ~ .drawer-side > .drawer-overlay {
    background: transparent; cursor: default;
  }
}

/* ═══ Flatpickr overrides ═══ */
.flatpickr-input,
input.flatpickr-input,
.input.flatpickr-mobile,
input[type="text"].input + .flatpickr-input {
  color-scheme: dark;
  background-color: #09090b !important;
  color: #e4e4e7 !important;
  border-color: #27272a !important;
}
.flatpickr-calendar {
  background: #18181b !important;
  border-color: #27272a !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5) !important;
}
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-weekdays,
span.flatpickr-weekday {
  background: #18181b !important;
  color: #a1a1aa !important;
}
.flatpickr-current-month input.cur-year,
.flatpickr-current-month .numInputWrapper {
  color: #e4e4e7 !important;
}
.flatpickr-day {
  color: #e4e4e7 !important;
  border-color: transparent !important;
}
.flatpickr-day:hover {
  background: #27272a !important;
  border-color: #27272a !important;
}
.flatpickr-day.selected {
  background: #3b82f6 !important;
  border-color: #3b82f6 !important;
  color: #fff !important;
}
.flatpickr-day.today {
  border-color: #3b82f6 !important;
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: #52525b !important;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  fill: #a1a1aa !important;
  color: #a1a1aa !important;
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  fill: #e4e4e7 !important;
  color: #e4e4e7 !important;
}

/* ═══ Skeleton loading ═══ */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.skeleton {
  background-color: #27272a;
  border-radius: var(--radius, 0.375rem);
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.skeleton-text { height: 0.875rem; width: 60%; }
.skeleton-title { height: 1.5rem; width: 40%; }
.skeleton-metric { height: 4.5rem; }
.skeleton-chart { height: 350px; }
.skeleton-table { height: 200px; }

/* ═══ OMIE messages ═══ */
/* Home-page notification: a compact bell + count, details on hover. */
.omie-bell-wrap { display: flex; justify-content: flex-end; margin-bottom: 1rem; }
.omie-bell {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px; border-radius: 9999px;
  border: 1px solid hsl(var(--border)); background: #131316;
  color: hsl(var(--foreground)); text-decoration: none; cursor: pointer;
  transition: border-color 150ms, background 150ms;
}
.omie-bell:hover, .omie-bell:focus-visible { border-color: #3b82f6; background: rgba(59,130,246,0.10); }
.omie-bell-icon { font-size: 15px; line-height: 1; }
.omie-bell-badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9999px;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  background: #3b82f6; color: #fff;
}
.omie-bell-badge.is-new { background: #f59e0b; color: #1a1300; }
.omie-bell-tip {
  display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 50;
  width: 340px; max-width: 80vw; padding: 10px 12px; text-align: left; cursor: default;
  background: #18181b; border: 1px solid hsl(var(--border));
  border-radius: var(--radius, 0.5rem); box-shadow: 0 10px 28px rgba(0,0,0,0.55);
}
.omie-bell:hover .omie-bell-tip, .omie-bell:focus-within .omie-bell-tip { display: block; }
.omie-bell-tip-head {
  font-size: 12px; font-weight: 600; color: #e4e4e7; margin-bottom: 6px;
  display: flex; align-items: center; gap: 6px;
}
.omie-bell-tip-item { padding: 7px 0; border-top: 1px solid rgba(255,255,255,0.06); }
.omie-bell-tip-date { font-size: 10px; color: #a1a1aa; margin-bottom: 2px; font-variant-numeric: tabular-nums; }
.omie-bell-tip-text {
  font-size: 12px; color: #d4d4d8; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.omie-bell-tip-more { font-size: 11px; color: #a1a1aa; padding-top: 7px; }
.omie-bell-tip-cta { font-size: 11px; color: #60a5fa; font-weight: 600; padding-top: 9px; }

/* Messages page: notice list */
.omie-notices-header { display: flex; align-items: center; gap: 10px; margin-bottom: 1rem; }
.omie-notices-bell { font-size: 20px; line-height: 1; }
.omie-notices-count { font-size: 1.5rem; font-weight: 700; color: #e4e4e7; line-height: 1; }
.omie-notices-label { font-size: 0.875rem; color: #a1a1aa; }
.omie-notices-header .omie-notices-spacer { flex: 1; }

/* ═══ Item component (https://basecoatui.com/components/item/) ═══ */
/* A bordered row: optional media (icon/avatar) + content (title/description)
   + optional actions. Reusable beyond OMIE messages. */
.item-group { display: flex; flex-direction: column; gap: 0.5rem; }
.item {
  display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap;
  border: 1px solid #27272a; border-radius: var(--radius, 0.5rem);
  background: #18181b; padding: 1rem; font-size: 0.875rem;
  transition: border-color 150ms, background 150ms;
}
.item:hover { border-color: #3f3f46; }
.item-media {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; width: 2.25rem; height: 2.25rem; border-radius: var(--radius, 0.5rem);
  background: #27272a; color: #d4d4d8; font-size: 16px; line-height: 1;
}
.item-content { display: flex; flex: 1 1 0%; flex-direction: column; gap: 0.25rem; min-width: 0; }
.item-title {
  display: flex; align-items: center; gap: 0.5rem;
  font-weight: 600; line-height: 1.375; color: #e4e4e7; font-variant-numeric: tabular-nums;
}
.item-description { color: #d4d4d8; line-height: 1.55; }
.item-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

/* Self-contained soft/outline button — Basecoat's btn-outline renders a near
   black label in this CDN build, so use explicit (visible) literal colors. */
.btn-soft {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--radius, 0.375rem);
  border: 1px solid #3f3f46; background: transparent;
  color: #e4e4e7; font-size: 0.8125rem; font-weight: 500; line-height: 1.2;
  cursor: pointer; transition: background 150ms, border-color 150ms;
}
.btn-soft:hover { background: #27272a; border-color: #52525b; }
.btn-soft.is-active { background: #27272a; border-color: #71717a; color: #fafafa; }
.item-muted { border-color: transparent; background: #1c1c1f; }
.item-empty { justify-content: center; color: #71717a; padding: 2rem 1rem; }