@import "tailwindcss";

@layer components {
  .main-container {@apply bg-slate-100; }

  .container {@apply mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8; }
  .row {@apply -mx-3 flex flex-wrap gap-y-6; }

  .col-12, .col-md-12 {@apply w-full px-3; }
  .col-9 {@apply w-full px-3 sm:w-3/4; }
  .col-3 {@apply w-full px-3 sm:w-1/4; }
  .col-md-6 {@apply w-full px-3 md:w-1/2; }
  .col-md-5 {@apply w-full px-3 md:w-5/12; }
  .col-md-4 {@apply w-full px-3 md:w-1/3; }
  .col-md-3 {@apply w-full px-3 md:w-1/4; }
  .col-md-2 {@apply w-full px-3 md:w-1/6; }
  .col-lg-5 {@apply w-full px-3 lg:w-5/12; }
  .col-lg-6 {@apply w-full px-3 lg:w-1/2; }
  .col-lg-7 {@apply w-full px-3 lg:w-7/12; }
  .col-lg-3 {@apply w-full px-3 lg:w-1/4; }
  .col-lg-2 {@apply w-full px-3 lg:w-1/6; }

  .bg--secondary {@apply bg-slate-50; }

  .feature {@apply flex flex-col items-center gap-2 rounded-2xl border border-slate-200 bg-white p-6 text-slate-800 shadow-sm transition hover:-translate-y-1 hover:shadow-lg; }
  .feature-3 {@apply text-center; }
  .boxed {@apply p-4; }
  .boxed--lg {@apply md:p-6; }
  .boxed--border {@apply border border-slate-200; }

  .cta {@apply rounded-2xl border border-slate-200 bg-white shadow-sm; }
  .cta-1 {@apply px-4 py-3; }
  .cta--horizontal {@apply flex flex-col gap-3; }
  .text-center-xs {@apply text-center sm:text-left; }

  .pricing {@apply rounded-2xl border border-slate-200 bg-white p-6 text-center shadow-sm; }
  .pricing-1 {@apply space-y-2; }
  .h1 {@apply text-3xl font-semibold text-slate-900; }

  .label {@apply inline-flex items-center rounded-full bg-slate-900 px-3 py-1 text-xs font-semibold text-white; }
  .bg-danger {@apply bg-rose-500 text-white; }
  .bg-info {@apply bg-sky-500 text-white; }
  .bg-success {@apply bg-emerald-500 text-white; }
  .bg-warning {@apply bg-amber-500 text-white; }

  .card {@apply flex h-full flex-col overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm; }
  .card-body {@apply flex-1 space-y-2 p-4 text-left text-sm text-slate-700; }
  .card-img-top {@apply h-48 w-full object-cover; }
  .border--round {@apply rounded-2xl border border-slate-200; }

  .alert {@apply rounded-xl border px-4 py-3 text-sm; }
  .alert-warning {@apply border-amber-200 bg-amber-50 text-amber-700; }

  .process-3 {@apply space-y-4; }
  .process_item {@apply flex items-start gap-4 rounded-xl border border-slate-200 bg-white p-4 shadow-sm; }
  .process__number {@apply flex h-10 w-10 items-center justify-center rounded-full bg-slate-900 text-sm font-semibold text-white; }
  .process__body {@apply text-left text-sm text-slate-700; }

  .masonry {@apply grid gap-4 md:grid-cols-2 lg:grid-cols-3; }
  .masonry-filter-container {@apply flex justify-center; }
  .masonry__filters ul {@apply flex flex-wrap items-center gap-2 rounded-full bg-white/60 px-3 py-2 text-xs font-semibold text-slate-600 shadow-sm; }
  .masonry__filters li {@apply cursor-pointer rounded-full px-3 py-1 transition hover:bg-slate-900 hover:text-white; }
  .masonry__filters li.active {@apply bg-slate-900 text-white; }

  .btn {@apply inline-flex items-center justify-center rounded-full px-4 py-2 text-sm font-semibold transition; }
  .btn-sm {@apply px-3 py-1 text-xs; }
  .btn-lg {@apply px-5 py-3 text-base; }
  .btn-primary, .btn--primary {@apply bg-slate-900 text-white shadow-sm hover:bg-slate-800; }
  .btn-danger {@apply bg-rose-500 text-white hover:bg-rose-600; }
  .btn-warning {@apply bg-amber-500 text-white hover:bg-amber-600; }
  .btn-outline-primary {@apply border border-slate-900 text-slate-900 hover:bg-slate-900 hover:text-white; }
  .btn-outline-secondary {@apply border border-slate-300 text-slate-600 hover:bg-slate-100; }
  .btn-group {@apply inline-flex gap-2; }

  .form-control {@apply w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm focus:border-slate-500 focus:outline-none focus:ring-2 focus:ring-slate-200; }
  .form-control-lg {@apply h-12 text-base; }
  .form-control-sm {@apply h-10 px-3 py-1.5 text-xs; }
  .form-select {@apply w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 focus:border-slate-500 focus:outline-none focus:ring-2 focus:ring-slate-200; }
  .form-select-sm {@apply h-10 text-xs; }
  .form-label {@apply mb-1 block text-xs font-semibold uppercase tracking-wider text-slate-600; }
  .form-label-sm {@apply text-[0.65rem] font-semibold uppercase tracking-wider text-slate-500; }
  .input-group {@apply flex items-stretch overflow-hidden rounded-lg border border-slate-300; }
  .input-group .form-control {@apply border-0; }

  .field {@apply space-y-2; }
  .actions {@apply mt-6; }

  .editor-surface {@apply min-h-[18rem] rounded-2xl border border-slate-200 bg-white p-4 shadow-inner; }

  .d-flex {@apply flex; }
  .flex-column {@apply flex-col; }
  .flex-row {@apply flex-row; }
  .align-items-center {@apply items-center; }
  .align-items-end {@apply items-end; }
  .justify-content-center {@apply justify-center; }
  .justify-content-between {@apply justify-between; }
  .justify-content-end {@apply justify-end; }
  .ml-2 {@apply ml-2; }
  .ml-3 {@apply ml-3; }
  .mr-3 {@apply mr-3; }
  .mb-3 {@apply mb-3; }
  .mt-2 {@apply mt-2; }
  .mt-4 {@apply mt-4; }
  .mt-5 {@apply mt-5; }
  .pb-5 {@apply pb-5; }
  .py-4 {@apply py-4; }

  .text-dark {@apply text-slate-900; }
  .text-muted {@apply text-slate-500; }
  .lead {@apply text-base text-slate-600; }
  .font-weight-bold {@apply font-semibold; }
  .w-100 {@apply w-full; }
  .rounded-start-3 {@apply rounded-l-full; }
  .rounded-end-0 {@apply rounded-r-none; }
  .rounded-end-3 {@apply rounded-r-full; }

  .switchable {@apply bg-white; }
  .switchable--switch {@apply md:flex md:flex-row-reverse md:items-start md:gap-12; }

  .card h5 {@apply text-base font-semibold text-slate-900; }
  .card small {@apply text-xs text-slate-500; }
}

@layer utilities {
  .d-none {@apply hidden; }
  .offset-md-4 {@apply md:ml-auto md:w-1/3 px-3; }
}

.unified-ranking-carousel {
  align-items: stretch;
}

.unified-ranking-card {
  flex-basis: 86%;
  min-height: 26rem;
}

.unified-ranking-card-selected {
  border-color: #0f172a;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.14);
}

@media (min-width: 640px) {
  .unified-ranking-card {
    flex-basis: 48%;
  }
}

@media (min-width: 1280px) {
  .unified-ranking-card {
    flex-basis: calc((100% - 2rem) / 3);
  }
}

html.theme-dark {
  color-scheme: dark;
}

html.theme-dark body {
  background-color: #020617;
  color: #e2e8f0;
}

html.theme-dark .bg-white {
  background-color: #0f172a !important;
}

html.theme-dark .bg-slate-50 {
  background-color: #0b1220 !important;
}

html.theme-dark .bg-slate-100 {
  background-color: #020617 !important;
}

html.theme-dark .bg-slate-200 {
  background-color: #1e293b !important;
}

html.theme-dark .bg-slate-900\/10 {
  background-color: rgba(148, 163, 184, 0.2) !important;
}

html.theme-dark .bg-slate-900\/5 {
  background-color: rgba(148, 163, 184, 0.15) !important;
}

/* Solid slate-900 buttons/chips (Finish this article, Start reviewing,
   Apply filters, .label…) vanish against the dark card surface, which is
   itself #0f172a — lift them to a visible slate with a subtle edge. */
html.theme-dark .bg-slate-900 {
  background-color: #334155 !important;
  box-shadow: inset 0 0 0 1px #64748b;
}

html.theme-dark .hover\:bg-slate-700:hover,
html.theme-dark .hover\:bg-slate-800:hover {
  background-color: #475569 !important;
}

html.theme-dark .disabled\:bg-slate-300:disabled {
  background-color: #1e293b !important;
  color: #64748b !important;
  box-shadow: none;
}

html.theme-dark .border-slate-900 {
  border-color: #94a3b8 !important;
}

html.theme-dark .unified-ranking-card-selected {
  border-color: rgba(52, 211, 153, 0.82) !important;
  box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.35), 0 14px 28px rgba(2, 6, 23, 0.65) !important;
}

html.theme-dark .unified-ranking-card-selected.ring-slate-900 {
  --tw-ring-color: rgba(52, 211, 153, 0.6) !important;
}

html.theme-dark .unified-ranking-action-button:not(:disabled) {
  background-color: #334155 !important;
  border: 1px solid #64748b;
  color: #f8fafc;
}

html.theme-dark .unified-ranking-action-button:not(:disabled):hover {
  background-color: #475569 !important;
  border-color: #94a3b8;
}

html.theme-dark .bg-white\/70,
html.theme-dark .bg-white\/90,
html.theme-dark .bg-white\/95 {
  background-color: rgba(15, 23, 42, 0.88) !important;
}

html.theme-dark .bg-slate-50\/70,
html.theme-dark .bg-slate-50\/80 {
  background-color: rgba(15, 23, 42, 0.9) !important;
}

html.theme-dark .text-slate-900 {
  color: #f8fafc !important;
}

html.theme-dark .text-slate-800 {
  color: #e2e8f0 !important;
}

html.theme-dark .text-slate-700 {
  color: #cbd5e1 !important;
}

html.theme-dark .text-slate-600,
html.theme-dark .text-slate-500 {
  color: #94a3b8 !important;
}

html.theme-dark .text-slate-400 {
  color: #64748b !important;
}

html.theme-dark .published-counts-report .text-slate-400 {
  color: #94a3b8 !important;
}

html.theme-dark .published-counts-report .text-indigo-700,
html.theme-dark .published-counts-report .text-indigo-500 {
  color: #c7d2fe !important;
}

html.theme-dark .published-counts-report .bg-indigo-50 {
  background-color: #1e1b4b !important;
}

html.theme-dark .published-counts-report .divide-y > :not(:last-child) {
  border-color: #334155 !important;
}

html.theme-dark .text-emerald-700 {
  color: #6ee7b7 !important;
}

html.theme-dark .text-emerald-900 {
  color: #a7f3d0 !important;
}

html.theme-dark .bg-emerald-50 {
  background-color: rgba(16, 185, 129, 0.14) !important;
}

html.theme-dark .bg-emerald-100 {
  background-color: rgba(16, 185, 129, 0.18) !important;
}

html.theme-dark .border-emerald-200 {
  border-color: rgba(52, 211, 153, 0.45) !important;
}

html.theme-dark .border-emerald-300 {
  border-color: rgba(52, 211, 153, 0.55) !important;
}

html.theme-dark .ring-emerald-200 {
  --tw-ring-color: rgba(52, 211, 153, 0.45) !important;
}

/* Sky-tinted info boxes (e.g. "What this address represents") keep their
   light backgrounds without these, leaving light dark-mode text invisible. */
html.theme-dark .bg-sky-50,
html.theme-dark .bg-sky-50\/70,
html.theme-dark .bg-sky-100 {
  background-color: rgba(14, 165, 233, 0.14) !important;
}

html.theme-dark .text-sky-600,
html.theme-dark .text-sky-700,
html.theme-dark .text-sky-800 {
  color: #7dd3fc !important;
}

html.theme-dark .border-sky-100,
html.theme-dark .border-sky-200,
html.theme-dark .border-sky-300 {
  border-color: rgba(56, 189, 248, 0.4) !important;
}

html.theme-dark .hover\:bg-sky-50:hover {
  background-color: rgba(14, 165, 233, 0.22) !important;
}

html.theme-dark .text-rose-600 {
  color: #fb7185 !important;
}

html.theme-dark .text-amber-600 {
  color: #fbbf24 !important;
}

html.theme-dark .border-slate-100,
html.theme-dark .border-slate-200,
html.theme-dark .border-slate-300 {
  border-color: #334155 !important;
}

html.theme-dark .shadow-sm,
html.theme-dark .shadow,
html.theme-dark .shadow-lg,
html.theme-dark .shadow-2xl {
  --tw-shadow-color: rgb(2 6 23 / 0.75);
}

html.theme-dark a {
  color: #38bdf8;
}

html.theme-dark a:hover {
  color: #7dd3fc;
}

html.theme-dark input,
html.theme-dark textarea,
html.theme-dark select {
  background-color: #0f172a;
  color: #e2e8f0;
  border-color: #334155;
}

html.theme-dark input::placeholder,
html.theme-dark textarea::placeholder {
  color: #64748b;
}

html.theme-dark nav.bg-white {
  background-color: #020617 !important;
  border-bottom: 1px solid #1e293b;
}

html.theme-dark footer.bg-slate-100 {
  background-color: #020617 !important;
  border-top: 1px solid #1e293b;
}

html.theme-dark .prose,
html.theme-dark .prose p,
html.theme-dark .prose li,
html.theme-dark .prose h1,
html.theme-dark .prose h2,
html.theme-dark .prose h3,
html.theme-dark .prose h4 {
  color: #e2e8f0 !important;
}

html.theme-dark .prose strong {
  color: #f8fafc !important;
}

html.theme-dark .prose blockquote {
  border-left-color: #334155 !important;
  color: #cbd5e1 !important;
}

html.theme-dark .bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, #0f172a, #0b1220, #020617) !important;
}

html.theme-dark .hover\:bg-slate-50:hover {
  background-color: #1e293b !important;
}

html.theme-dark .hover\:bg-slate-100:hover {
  background-color: #1e293b !important;
}

html.theme-dark .hover\:bg-emerald-100:hover {
  background-color: rgba(16, 185, 129, 0.24) !important;
}

html.theme-dark .hover\:border-slate-300:hover,
html.theme-dark .hover\:border-slate-400:hover {
  border-color: #64748b !important;
}

html.theme-dark .hover\:text-slate-700:hover {
  color: #e2e8f0 !important;
}

html.theme-dark .focus\:border-slate-900:focus,
html.theme-dark .focus\:ring-slate-900:focus {
  border-color: #64748b !important;
  --tw-ring-color: rgb(100 116 139 / 0.45) !important;
}

.theme-toggle-button {
  user-select: none;
  cursor: pointer;
  color: #64748b;
}

.theme-toggle-button:focus-visible {
  outline: 2px solid #0ea5e9;
  outline-offset: 2px;
}

.theme-toggle-track {
  position: relative;
  display: inline-flex;
  height: 1.15rem;
  width: 2.1rem;
  border-radius: 9999px;
  background-color: #cbd5e1;
  transition: background-color 0.2s ease;
}

.theme-toggle-thumb {
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  height: 0.85rem;
  width: 0.85rem;
  border-radius: 9999px;
  background-color: #ffffff;
  transition: transform 0.2s ease;
}

.theme-toggle-button.is-active .theme-toggle-track {
  background-color: #38bdf8;
}

.theme-toggle-button.is-active .theme-toggle-thumb {
  transform: translateX(0.95rem);
}

html.theme-dark .theme-toggle-track {
  background-color: #334155;
}

html.theme-dark .theme-toggle-button {
  color: #94a3b8;
}

html.theme-dark .theme-toggle-button.is-active .theme-toggle-track {
  background-color: #0ea5e9;
}

/* Review-times charts: data marks carry explicit per-theme colors so the
   dark palette is chosen for the dark surface, not an automatic flip. */
.chart-fill-accent {
  background-color: #0284c7;
}

.chart-fill-muted {
  background-color: #cbd5e1;
}

/* Hairline vertical gridlines every 3 hours across a 24h track. */
.chart-grid-24h {
  background-image: linear-gradient(to right, #e2e8f0 1px, transparent 1px);
  background-size: 12.5% 100%;
}

html.theme-dark .chart-fill-accent {
  background-color: #38bdf8;
}

html.theme-dark .chart-fill-muted {
  background-color: #334155;
}

html.theme-dark .chart-grid-24h {
  background-image: linear-gradient(to right, #1e293b 1px, transparent 1px);
}

/* Event ticks on the working-hours timeline: publish/queue vs save. */
.chart-tick-publish {
  background-color: #059669;
}

.chart-tick-save {
  background-color: #64748b;
}

html.theme-dark .chart-tick-publish {
  background-color: #34d399;
}

html.theme-dark .chart-tick-save {
  background-color: #94a3b8;
}

/* Working-hours timeline split mode: bars become gray wall time with the
   active stretches filled in accent at each session's real position in the
   day (placement is proportional only within a single short session). */
.wh-bar-active {
  display: none;
  position: absolute;
  top: 0;
  height: 100%;
}

.wh-split .wh-bar {
  background-color: #cbd5e1;
}

.wh-split .wh-bar-active {
  display: block;
  background-color: #0284c7;
}

html.theme-dark .wh-split .wh-bar {
  background-color: #334155;
}

html.theme-dark .wh-split .wh-bar-active {
  background-color: #38bdf8;
}

/* Logged-out gaps (>30m breaks inside the clocked day): striped so absence
   reads differently from idle-with-topic-open. */
.chart-fill-gap {
  background-image: repeating-linear-gradient(45deg, #cbd5e1 0, #cbd5e1 3px, transparent 3px, transparent 7px);
}

html.theme-dark .chart-fill-gap {
  background-image: repeating-linear-gradient(45deg, #475569 0, #475569 3px, transparent 3px, transparent 7px);
}