@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --shell-bg: #f3f4f6;
  --shell-sidebar: #fffaf9;
  --shell-surface: rgba(255, 255, 255, 0.92);
  --shell-surface-alt: #fff3f1;
  --shell-card: #ffffff;
  --shell-border: #ead7d3;
  --shell-text: #111827;
  --shell-muted: #6b7280;
  --shell-accent: #dc2626;
  --shell-accent-strong: #b91c1c;
  --shell-accent-soft: #fee2e2;
}

:root[data-theme="dark"] {
  --shell-bg: #0b1120;
  --shell-sidebar: #111827;
  --shell-surface: rgba(17, 24, 39, 0.92);
  --shell-surface-alt: #182133;
  --shell-card: #111827;
  --shell-border: #273244;
  --shell-text: #f3f4f6;
  --shell-muted: #9ca3af;
  --shell-accent: #ef4444;
  --shell-accent-strong: #f87171;
  --shell-accent-soft: rgba(220, 38, 38, 0.18);
}

.private-shell-body {
  overflow-x: hidden;
}

.private-shell-body main > .relative.isolate {
  background: transparent;
}

.private-shell-body main > .relative.isolate > .absolute {
  display: none;
}

.private-shell .private-shell-panel {
  background: var(--shell-card);
  border: 1px solid var(--shell-border);
  color: var(--shell-text);
  min-width: 0;
}

.private-shell .app-section-card,
.private-shell .app-stat-card,
.private-shell .app-mobile-card {
  min-width: 0;
}

.private-shell .break-anywhere {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.private-shell .private-shell-content {
  width: 100%;
  min-width: 0;
  max-width: none;
}

.private-shell .private-shell-content > [class*="max-w-"],
.private-shell .private-shell-content > [class*="container"] {
  width: 100%;
  max-width: none !important;
  margin-left: 0;
  margin-right: 0;
}

.private-shell .private-shell-content > *:not(.fixed) > [class*="max-w-"],
.private-shell .private-shell-content > *:not(.fixed) > [class*="container"] {
  width: 100%;
  max-width: none !important;
  margin-left: 0;
  margin-right: 0;
}

.private-shell-nav-item {
  @apply flex items-center gap-3 rounded-2xl px-3 py-3 text-sm font-semibold transition;
  color: var(--shell-text);
}

.private-shell-nav-item:hover {
  background: var(--shell-surface-alt);
  color: var(--shell-accent);
}

.private-shell-nav-item-active {
  background: linear-gradient(135deg, var(--shell-accent-soft), rgba(255,255,255,0));
  color: var(--shell-accent);
  box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.18);
}

.private-shell-signout {
  @apply w-full rounded-2xl px-4 py-3 text-sm font-semibold transition;
  background: var(--shell-surface-alt);
  color: var(--shell-accent);
}

.private-shell-signout:hover {
  background: var(--shell-accent-soft);
}

.private-dashboard-hero {
  background:
    radial-gradient(circle at top right, rgba(220, 38, 38, 0.16), transparent 35%),
    linear-gradient(135deg, var(--shell-card), color-mix(in srgb, var(--shell-card) 84%, #dc2626 16%));
}

.app-page-hero {
  background:
    radial-gradient(circle at top right, rgba(220, 38, 38, 0.18), transparent 32%),
    linear-gradient(145deg, color-mix(in srgb, var(--shell-card) 86%, #dc2626 14%), var(--shell-card));
  border: 1px solid var(--shell-border);
  color: var(--shell-text);
}

.app-page-grid {
  @apply grid gap-6;
}

.app-page-stats {
  @apply grid gap-4 sm:grid-cols-2 xl:grid-cols-4;
}

.app-stat-card {
  @apply rounded-3xl p-5 shadow-sm;
  background: var(--shell-card);
  border: 1px solid var(--shell-border);
  color: var(--shell-text);
}

.app-section-card {
  @apply rounded-3xl p-5 shadow-sm;
  background: var(--shell-card);
  border: 1px solid var(--shell-border);
}

.app-mobile-card {
  @apply rounded-3xl p-5 shadow-sm;
  background: var(--shell-card);
  border: 1px solid var(--shell-border);
}

.app-kicker {
  @apply text-[11px] font-semibold uppercase tracking-[0.24em];
  color: var(--shell-muted);
}

.app-link {
  color: var(--shell-accent);
}

.app-link:hover {
  color: var(--shell-accent-strong);
}

.private-shell .api-documentation-page {
  min-width: 0;
}

.private-shell .api-documentation-page .api-doc-card {
  background: var(--shell-card);
  border-color: var(--shell-border);
  color: var(--shell-text);
}

.private-shell .api-documentation-page .bg-gray-50,
.private-shell .api-documentation-page .bg-gray-100 {
  background-color: var(--shell-surface-alt) !important;
}

.private-shell .api-documentation-page .border-gray-200,
.private-shell .api-documentation-page .border-gray-300 {
  border-color: var(--shell-border) !important;
}

.private-shell .api-documentation-page .text-gray-900,
.private-shell .api-documentation-page .text-gray-800,
.private-shell .api-documentation-page .text-gray-700 {
  color: var(--shell-text) !important;
}

.private-shell .api-documentation-page .text-gray-600,
.private-shell .api-documentation-page .text-gray-500,
.private-shell .api-documentation-page .text-gray-400 {
  color: var(--shell-muted) !important;
}

:root[data-theme="dark"] .private-shell .bg-white,
:root[data-theme="dark"] .private-shell .bg-gray-50,
:root[data-theme="dark"] .private-shell .bg-gray-100 {
  background-color: var(--shell-card) !important;
}

:root[data-theme="dark"] .private-shell .border-gray-200,
:root[data-theme="dark"] .private-shell .border-gray-300 {
  border-color: var(--shell-border) !important;
}

:root[data-theme="dark"] .private-shell .text-gray-900,
:root[data-theme="dark"] .private-shell .text-gray-800,
:root[data-theme="dark"] .private-shell .text-gray-700 {
  color: var(--shell-text) !important;
}

:root[data-theme="dark"] .private-shell .text-gray-600,
:root[data-theme="dark"] .private-shell .text-gray-500,
:root[data-theme="dark"] .private-shell .text-gray-400 {
  color: var(--shell-muted) !important;
}

:root[data-theme="dark"] .private-shell .bg-slate-50,
:root[data-theme="dark"] .private-shell .bg-slate-100 {
  background-color: var(--shell-surface-alt) !important;
}

:root[data-theme="dark"] .private-shell .border-slate-100,
:root[data-theme="dark"] .private-shell .border-slate-200,
:root[data-theme="dark"] .private-shell .border-slate-300 {
  border-color: var(--shell-border) !important;
}

:root[data-theme="dark"] .private-shell .text-slate-950,
:root[data-theme="dark"] .private-shell .text-slate-900,
:root[data-theme="dark"] .private-shell .text-slate-800,
:root[data-theme="dark"] .private-shell .text-slate-700 {
  color: var(--shell-text) !important;
}

:root[data-theme="dark"] .private-shell .text-slate-600,
:root[data-theme="dark"] .private-shell .text-slate-500,
:root[data-theme="dark"] .private-shell .text-slate-400 {
  color: var(--shell-muted) !important;
}

:root[data-theme="dark"] .private-shell .bg-primary-50,
:root[data-theme="dark"] .private-shell .bg-primary-100 {
  background-color: rgba(220, 38, 38, 0.16) !important;
}

:root[data-theme="dark"] .private-shell .border-primary-100,
:root[data-theme="dark"] .private-shell .border-primary-200,
:root[data-theme="dark"] .private-shell .border-primary-300 {
  border-color: rgba(248, 113, 113, 0.32) !important;
}

:root[data-theme="dark"] .private-shell .text-primary-900,
:root[data-theme="dark"] .private-shell .text-primary-800,
:root[data-theme="dark"] .private-shell .text-primary-700 {
  color: #fecaca !important;
}

:root[data-theme="dark"] .private-shell .text-primary-600,
:root[data-theme="dark"] .private-shell .text-primary-500 {
  color: #fca5a5 !important;
}

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-primary-200;
  }
}

*/

.pagination {
  @apply max-w-max mt-5 px-3 py-2 rounded-lg shadow-md bg-white;
}