/* Postforge — base styles layered on top of Tailwind Play CDN */

:root {
  --pf-bg: 250 250 252;
  --pf-surface: 255 255 255;
  --pf-border: 226 232 240;
  --pf-fg: 15 23 42;
  --pf-muted: 100 116 139;
  --pf-primary: 99 102 241;
  --pf-primary-fg: 255 255 255;
  --pf-ring: 99 102 241;
}
.dark {
  --pf-bg: 2 6 23;
  --pf-surface: 15 23 42;
  --pf-border: 30 41 59;
  --pf-fg: 248 250 252;
  --pf-muted: 148 163 184;
  --pf-primary: 129 140 248;
  --pf-primary-fg: 15 23 42;
  --pf-ring: 129 140 248;
}

html, body { height: 100%; }
body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: 'cv11','ss01','ss03';
  background: rgb(var(--pf-bg));
  color: rgb(var(--pf-fg));
  -webkit-font-smoothing: antialiased;
}

/* Subtle background grid for the app shell */
.pf-grid-bg {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(15,23,42,0.06) 1px, transparent 0);
  background-size: 22px 22px;
}
.dark .pf-grid-bg {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0);
}

/* Aurora gradient used on hero cards and auth */
.pf-aurora {
  background:
    radial-gradient(60% 80% at 0% 0%, rgba(99,102,241,0.25), transparent 60%),
    radial-gradient(50% 70% at 100% 0%, rgba(236,72,153,0.18), transparent 60%),
    radial-gradient(60% 80% at 50% 100%, rgba(16,185,129,0.18), transparent 60%);
}

/* Glass surface */
.pf-glass {
  background: rgba(255,255,255,0.7);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border: 1px solid rgba(226,232,240,0.7);
}
.dark .pf-glass {
  background: rgba(15,23,42,0.55);
  border: 1px solid rgba(51,65,85,0.7);
}

/* Card */
.pf-card {
  background: rgb(var(--pf-surface));
  border: 1px solid rgb(var(--pf-border));
  border-radius: 1rem;
}

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .9rem; border-radius:.625rem; font-weight:500; font-size:.875rem; line-height:1; transition: all .15s ease; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-primary { background: linear-gradient(180deg, #6366f1, #4f46e5); color:#fff; box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 4px 14px -4px rgba(79,70,229,.45); }
.btn-primary:hover { background: linear-gradient(180deg, #7178ff, #5b54ec); }
.btn-secondary { background: rgb(var(--pf-surface)); color: rgb(var(--pf-fg)); border:1px solid rgb(var(--pf-border)); }
.btn-secondary:hover { background: rgba(15,23,42,0.04); }
.dark .btn-secondary:hover { background: rgba(255,255,255,0.04); }
.btn-ghost { background: transparent; color: rgb(var(--pf-fg)); }
.btn-ghost:hover { background: rgba(15,23,42,0.05); }
.dark .btn-ghost:hover { background: rgba(255,255,255,0.05); }
.btn-danger { background:#ef4444; color:#fff; }
.btn-danger:hover { background:#dc2626; }
.btn-sm { padding:.35rem .65rem; font-size:.8125rem; }

/* Input */
.input, .select, .textarea {
  width:100%;
  background: rgb(var(--pf-surface));
  border: 1px solid rgb(var(--pf-border));
  border-radius:.625rem;
  padding:.6rem .8rem;
  font-size:.875rem;
  color: rgb(var(--pf-fg));
  transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus, .textarea:focus { outline:none; border-color: rgb(var(--pf-ring)); box-shadow: 0 0 0 4px rgba(99,102,241,.15); }
.input::placeholder { color: rgb(var(--pf-muted)); }
.checkbox { width:1rem; height:1rem; border-radius:.25rem; border:1px solid rgb(var(--pf-border)); accent-color:#6366f1; }

/* Badge */
.badge { display:inline-flex; align-items:center; gap:.35rem; padding:.15rem .55rem; font-size:.7rem; font-weight:600; border-radius:9999px; }
.badge-slate  { background:#f1f5f9; color:#334155; }
.badge-indigo { background:#eef2ff; color:#4338ca; }
.badge-violet { background:#f5f3ff; color:#6d28d9; }
.badge-emerald{ background:#ecfdf5; color:#047857; }
.badge-amber  { background:#fffbeb; color:#b45309; }
.badge-rose   { background:#fff1f2; color:#be123c; }
.badge-sky    { background:#f0f9ff; color:#0369a1; }
.dark .badge-slate{background:rgba(148,163,184,.15); color:#cbd5e1;}
.dark .badge-indigo{background:rgba(99,102,241,.15); color:#a5b4fc;}
.dark .badge-violet{background:rgba(139,92,246,.15); color:#c4b5fd;}
.dark .badge-emerald{background:rgba(16,185,129,.15); color:#6ee7b7;}
.dark .badge-amber{background:rgba(245,158,11,.15); color:#fcd34d;}
.dark .badge-rose{background:rgba(244,63,94,.15); color:#fda4af;}
.dark .badge-sky{background:rgba(56,189,248,.15); color:#7dd3fc;}

/* Sidebar nav item */
.nav-item { display:flex; align-items:center; gap:.7rem; padding:.55rem .75rem; border-radius:.6rem; font-size:.875rem; color:#475569; font-weight:500; transition: all .12s; }
.nav-item:hover { background: rgba(99,102,241,.06); color:#1e293b; }
.nav-item.active { background: linear-gradient(180deg, rgba(99,102,241,.12), rgba(99,102,241,.06)); color:#4338ca; box-shadow: inset 0 0 0 1px rgba(99,102,241,.18); }
.nav-item .nav-icon { width:18px; height:18px; }
.dark .nav-item { color:#94a3b8; }
.dark .nav-item:hover { background: rgba(129,140,248,.10); color:#e2e8f0; }
.dark .nav-item.active { background: linear-gradient(180deg, rgba(129,140,248,.18), rgba(129,140,248,.08)); color:#c7d2fe; box-shadow: inset 0 0 0 1px rgba(129,140,248,.28); }

/* Tabs */
.tabs { display:inline-flex; padding:.25rem; background: rgba(241,245,249,.7); border-radius:.7rem; gap:.25rem; }
.tabs a, .tabs button { padding:.4rem .75rem; font-size:.8125rem; font-weight:500; color:#475569; border-radius:.5rem; }
.tabs a.active, .tabs button.active { background: rgb(var(--pf-surface)); color:#0f172a; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.dark .tabs { background: rgba(30,41,59,.7); }
.dark .tabs a, .dark .tabs button { color:#94a3b8; }
.dark .tabs a.active, .dark .tabs button.active { background:#0f172a; color:#f8fafc; }

/* Tooltip (tippy theme override) */
.tippy-box[data-theme~='pf'] {
  background: #0f172a;
  color: #e2e8f0;
  font-size: 12px;
  border-radius: 8px;
  padding: 2px 4px;
  box-shadow: 0 10px 30px -10px rgba(15,23,42,.45);
}
.tippy-box[data-theme~='pf'][data-placement^='top'] > .tippy-arrow::before { border-top-color: #0f172a; }
.tippy-box[data-theme~='pf'][data-placement^='bottom'] > .tippy-arrow::before { border-bottom-color: #0f172a; }
.tippy-box[data-theme~='pf'][data-placement^='left'] > .tippy-arrow::before { border-left-color: #0f172a; }
.tippy-box[data-theme~='pf'][data-placement^='right'] > .tippy-arrow::before { border-right-color: #0f172a; }

/* Scrollbar polish */
.pf-scroll::-webkit-scrollbar { width:10px; height:10px; }
.pf-scroll::-webkit-scrollbar-thumb { background: rgba(100,116,139,.25); border-radius:8px; }
.pf-scroll::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,.4); }

/* Avatar */
.avatar { display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem; border-radius:9999px; font-size:.75rem; font-weight:700; color:#fff; }

/* Progress */
.progress { height:6px; background: rgba(148,163,184,.2); border-radius:9999px; overflow:hidden; }
.progress > div { height:100%; background: linear-gradient(90deg, #6366f1, #8b5cf6); border-radius:9999px; }

/* Animated gradient ring around logo */
@keyframes pf-spin { to { transform: rotate(360deg); } }
.pf-ring-anim { background: conic-gradient(from 0deg, #6366f1, #ec4899, #10b981, #6366f1); animation: pf-spin 6s linear infinite; }

/* Lucide icon sizing helpers */
[data-lucide] { stroke-width: 1.75; }

/* Tighter table */
table.pf-table { width:100%; border-collapse: separate; border-spacing: 0; font-size:.875rem; }
table.pf-table th { text-align:left; font-weight:600; color:#64748b; font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; padding:.65rem .9rem; border-bottom:1px solid rgb(var(--pf-border)); }
table.pf-table td { padding:.85rem .9rem; border-bottom:1px solid rgb(var(--pf-border)); color: rgb(var(--pf-fg)); vertical-align: middle; }
table.pf-table tr:last-child td { border-bottom:none; }
table.pf-table tr:hover td { background: rgba(99,102,241,.04); }
.dark table.pf-table th { color:#94a3b8; }
.dark table.pf-table tr:hover td { background: rgba(129,140,248,.06); }

/* Section heading */
.section-title { font-size:.7rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#94a3b8; padding: 0 .75rem; margin: 1rem 0 .35rem; }

/* Kbd */
.kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.7rem; padding:.05rem .35rem; border:1px solid rgb(var(--pf-border)); border-bottom-width:2px; border-radius:.35rem; color:#475569; background: rgb(var(--pf-surface)); }
.dark .kbd { color:#cbd5e1; }