/* ==========================================================================
 * ModSeed — page-dashboard.css (dashboard page ONLY; loaded AFTER style.css)
 * ---------------------------------------------------------------------------
 * A faithful port of the workspace dashboard (src/components/platform/
 * dashboard.tsx): WorkshopHeader (pixel greeting + tier badge + storage and
 * download meter tiles), the shadcn-style segmented tab bar, project cards,
 * the templates gallery with filter pills, the empty-workshop illustration,
 * the notepad + locked idea lightbulb, the plan recap cards, the profile /
 * AI-assistant settings cards, and the New project + Delete dialogs.
 *
 * Structure:
 *   1. Small Tailwind utilities the shared subset in style.css doesn't define
 *      (same class names, so the markup ports 1:1 from the JSX).
 *   2. Fidelity overrides where the shared component classes diverge from the
 *      workspace's shadcn/ui rendering — scoped to the dashboard page only.
 *   3. Dashboard components (tiles, tabs, cards, pills, dialogs…).
 * ========================================================================== */

/* ── 1. Missing utilities used by the ported markup ───────────────────────── */
.py-8 { padding-top: 32px; padding-bottom: 32px; }
.py-12 { padding-top: 48px; padding-bottom: 48px; }
@media (min-width: 1024px) { .lg\:py-10 { padding-top: 40px; padding-bottom: 40px; } }
.flex-1 { flex: 1 1 0%; }
.break-words { overflow-wrap: break-word; }
@media (min-width: 1024px) { .lg\:justify-between { justify-content: space-between; } }
@media (min-width: 640px) { .sm\:w-auto { width: auto; } }
@media (min-width: 640px) { .sm\:self-start { align-self: flex-start; } }
@media (min-width: 1024px) { .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gap-0\.5 { gap: 2px; }
.gap-x-2 { column-gap: 8px; }
.gap-y-1 { row-gap: 4px; }
.justify-end { justify-content: flex-end; }
.w-fit { width: fit-content; }
.h-44 { height: 176px; }
.size-20 { width: 80px; height: 80px; }
.place-items-center { place-items: center; }

/* inline link that stays inside the site (workspace underline links) */
.text-link {
  font-weight: 500;
  color: var(--foreground);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.text-link:hover { color: var(--amber-600); }
.dark .text-link:hover { color: var(--amber-400); }

/* icon sizing — style.css's .icon (16px) wins over .size-* by source order,
   so re-assert the JSX icon sizes with higher specificity */
.icon.size-3 { width: 12px; height: 12px; }
.icon.size-3\.5 { width: 14px; height: 14px; }
.icon.size-4 { width: 16px; height: 16px; }
.icon.size-5 { width: 20px; height: 20px; }
.icon.size-9 { width: 36px; height: 36px; }

[hidden] { display: none !important; }

/* ── 2. Fidelity overrides (dashboard page only) ──────────────────────────── */

/* workspace Card = rounded-xl (radius + 4px); style.css .card uses --radius */
#main .card { border-radius: calc(var(--radius) + 4px); }

/* workspace Badge = rounded-md px-2 py-0.5 text-xs font-medium */
#main .badge {
  border-radius: calc(var(--radius) - 2px);
  padding: 2px 8px;
  font-weight: 500;
}
#main .badge .icon { width: 12px; height: 12px; }
.badge-lock { display: inline-flex; align-items: center; gap: 4px; }
.badge-soon {
  font-size: 10px;
  font-weight: 600;
  gap: 4px;
  color: var(--amber-700);
  border-color: color-mix(in oklab, var(--amber-500) 50%, transparent);
}
.dark .badge-soon { color: var(--amber-400); }

/* card transitions + hover borders (group hover:border-amber-500/50) */
#main .card.project-card,
#main .card.template-card { transition: border-color 0.15s ease; }
#main .card.project-card:hover { border-color: color-mix(in oklab, var(--amber-500) 50%, transparent); }
#main .card.template-card { border-style: dashed; }
#main .card.template-card:hover { border-color: color-mix(in oklab, var(--amber-500) 50%, transparent); }
#main .card.error-card { border-color: color-mix(in oklab, var(--destructive) 50%, transparent); }
#main .card.upgrade-pro { border-color: color-mix(in oklab, var(--amber-500) 50%, transparent); }
#main .card.upgrade-ultra { border-color: color-mix(in oklab, var(--violet-500) 40%, transparent); }
#main .card.empty-projects { border-style: dashed; background: color-mix(in oklab, var(--card) 50%, transparent); }

/* ── 3. Dashboard components ───────────────────────────────────────────────── */

/* gradient username in the pixel greeting (from-amber-500 to-orange-400) */
.dash-username {
  background-image: linear-gradient(to right, var(--amber-500), #fb923c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* meter / stat tiles (MeterTile + StatTile) */
.meter-tile, .stat-tile {
  display: flex;
  gap: 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card);
  padding: 12px 16px; /* py-3 px-4 */
}
.meter-tile { align-items: flex-start; }
.stat-tile { align-items: center; }
.meter-icon {
  display: grid;
  place-items: center;
  width: 36px; height: 36px; /* size-9 */
  flex-shrink: 0;
  border-radius: calc(var(--radius) - 2px);
  background: color-mix(in oklab, var(--amber-500) 15%, transparent);
  color: var(--amber-600);
}
.dark .meter-icon { color: var(--amber-400); }
.meter-label {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em; /* tracking-wide */
  color: var(--muted-foreground);
}

/* progress bars (shadcn Progress) */
.progress {
  display: block;
  height: 8px; /* h-2 */
  width: 100%;
  overflow: hidden;
  border-radius: 9999px;
  background: var(--secondary);
}
.progress-bar {
  display: block;
  height: 100%;
  border-radius: 9999px;
  background: var(--primary);
  transition: width 0.3s ease;
}

/* segmented tab bar (shadcn TabsList + workspace overrides) */
.dash-tabs {
  display: flex;
  width: 100%;
  gap: 4px;
  overflow-x: auto;
  padding: 4px;
  background: var(--muted);
  border-radius: var(--radius);
}
@media (min-width: 640px) {
  .dash-tabs { width: -moz-fit-content; width: fit-content; max-width: 100%; }
}
.dash-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px; /* min-h-11 */
  padding: 0 16px; /* px-4 */
  border-radius: calc(var(--radius) - 2px);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4285;
  color: var(--muted-foreground);
  white-space: nowrap;
  transition: color 0.15s ease;
}
.dash-tab:hover { color: var(--foreground); }
.dash-tab[aria-selected="true"] {
  background: var(--card);
  color: var(--foreground);
  box-shadow: 0 1px 2px 0 oklch(0 0 0 / 0.05);
}
.dash-tab:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* free-plan note (amber) */
.free-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in oklab, var(--amber-500) 40%, transparent);
  background: color-mix(in oklab, var(--amber-500) 10%, transparent);
  padding: 12px 16px;
  font-size: 14px;
  color: var(--amber-700);
}
.dark .free-note { color: var(--amber-400); }

/* filter pills (template gallery) */
.filter-pill {
  min-height: 44px;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: var(--card);
  padding: 0 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-foreground);
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.filter-pill:hover {
  border-color: color-mix(in oklab, var(--amber-500) 40%, transparent);
  color: var(--foreground);
}
.filter-pill.active {
  border-color: color-mix(in oklab, var(--amber-500) 70%, transparent);
  background: color-mix(in oklab, var(--amber-500) 15%, transparent);
  color: var(--amber-700);
}
.dark .filter-pill.active { color: var(--amber-300); }
.filter-pill:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* card action row (Open/Delete ghost buttons) */
.project-card-content {
  display: flex;
  flex-direction: column;
  gap: 12px; /* gap-3 */
  height: 100%;
  padding: 16px; /* p-4 (workspace CardContent override) */
}
.card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding-top: 4px;
  margin-top: auto;
}
.card-actions .btn { height: 44px; min-width: 0; flex: 1 1 0%; }
.card-actions .btn.btn-danger-ghost { color: var(--destructive); }
.card-actions .btn.btn-danger-ghost:hover { color: var(--destructive); background: color-mix(in oklab, var(--destructive) 10%, transparent); }

/* skeleton loaders */
.skeleton {
  border-radius: var(--radius);
  background: color-mix(in oklab, var(--muted) 60%, transparent);
  animation: dash-pulse 1.6s ease-in-out infinite;
}
.skeleton-inline {
  display: inline-block;
  min-width: 64px;
  height: 14px;
  border-radius: 4px;
  background: color-mix(in oklab, var(--muted) 60%, transparent);
  animation: dash-pulse 1.6s ease-in-out infinite;
}
@keyframes dash-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* empty-workshop illustration (pure CSS, from EmptyProjects) */
.empty-illustration {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 96px; /* h-24 */
  width: 176px; /* w-44 */
  margin: 0 auto;
}
.empty-block-side {
  width: 36px; height: 36px; /* size-9 */
  border-radius: 2px; /* rounded-sm */
  background: color-mix(in oklab, #92400e 60%, transparent); /* amber-800/60 */
}
.dark .empty-block-side { background: color-mix(in oklab, #78350f 70%, transparent); }
.empty-block-mid { position: relative; margin: 0 6px; /* mx-1.5 */ }
.empty-block-main {
  display: block;
  width: 56px; height: 56px; /* size-14 */
  border-radius: 2px;
  background: linear-gradient(to bottom, var(--amber-400), var(--amber-600));
  box-shadow: 0 4px 6px -1px oklch(0 0 0 / 0.1);
}
.empty-leaf {
  position: absolute;
  left: 50%;
  width: 16px; height: 16px; /* size-4 */
  border-radius: 9999px;
  box-shadow: 0 1px 2px 0 oklch(0 0 0 / 0.05);
}
.empty-leaf-1 { top: -16px; transform: translateX(-160%); background: var(--emerald-500); }
.empty-leaf-2 { top: -20px; transform: translateX(60%); background: var(--emerald-400); }

/* notepad textarea (Textarea min-h-44 leading-relaxed) */
.notepad-input { min-height: 176px; line-height: 1.625; }

/* locked idea lightbulb button (size-20 rounded-2xl, muted) */
.idea-bulb {
  display: grid;
  place-items: center;
  width: 80px; height: 80px;
  flex-shrink: 0;
  border-radius: calc(var(--radius) + 12px); /* rounded-2xl */
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--muted) 60%, transparent);
  color: color-mix(in oklab, var(--muted-foreground) 50%, transparent);
  cursor: not-allowed;
}

/* plan tab pieces */
.info-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.info-row > span { font-size: 14px; }
.info-row > span:first-child { color: var(--muted-foreground); }
.info-row > span:last-child { text-align: right; font-weight: 500; }
.billing-glow {
  position: absolute;
  right: -64px; top: -64px; /* -right-16 -top-16 */
  width: 192px; height: 192px; /* size-48 */
  border-radius: 9999px;
  background: color-mix(in oklab, var(--amber-500) 10%, transparent);
  filter: blur(64px); /* blur-3xl */
  pointer-events: none;
}
.price {
  font-family: "Press Start 2P", ui-monospace, "SFMono-Regular", monospace;
  letter-spacing: 0.02em;
  font-size: 14px;
  margin: 0;
}
.price-amber { color: var(--amber-600); }
.dark .price-amber { color: var(--amber-400); }
.price-violet { color: var(--violet-600); }
.dark .price-violet { color: var(--violet-400); }
.price-per {
  margin-left: 4px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 10px;
  font-weight: 400;
  color: var(--muted-foreground);
}
.price-tile {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card);
  padding: 16px; /* p-4 */
}

/* settings tab pieces */
.avatar {
  display: grid;
  place-items: center;
  width: 48px; height: 48px; /* size-12 */
  flex-shrink: 0;
  border-radius: 9999px;
  border: 1px solid color-mix(in oklab, var(--amber-500) 40%, transparent);
  background: color-mix(in oklab, var(--amber-500) 15%, transparent);
  color: var(--amber-600);
  font-size: 14px;
}
.dark .avatar { color: var(--amber-400); }
.profile-username-input { cursor: default; color: var(--muted-foreground); }

/* Security card — two-factor wizard (QR tile, manual secret, backup codes) */
.mfa-qr {
  display: grid;
  place-items: center;
  width: 224px;
  max-width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #ffffff; /* QR codes need a white tile in both themes */
  padding: 12px;
}
.mfa-qr svg { width: 100%; height: auto; display: block; }
.mfa-secret {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.02em;
  padding: 8px 10px;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--muted) 40%, transparent);
  word-break: break-all;
}
.mfa-code-input {
  letter-spacing: 0.35em;
  text-align: center;
}
.mfa-codes {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 8px;
}
.mfa-codes li {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 8px 6px;
  border-radius: calc(var(--radius) - 2px);
  border: 1px dashed var(--border);
  background: color-mix(in oklab, var(--muted) 30%, transparent);
}
/* "I saved the codes" confirm — same DNA as the auth page's agreement boxes
 * (page-auth.css owns .agreement; the dashboard gets its own scoped class). */
.security-check {
  display: flex;
  align-items: flex-start;
  gap: 12px; /* gap-3 */
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--muted) 40%, transparent);
  padding: 12px; /* p-3 */
}
.security-check .checkbox { margin-top: 2px; }
.security-check-label {
  flex: 1 1 0%;
  font-size: 12px; /* text-xs */
  font-weight: 400;
  line-height: 1.625; /* leading-relaxed */
  color: var(--muted-foreground);
  cursor: pointer;
}

/* ── Dialogs (shadcn Dialog / AlertDialog) ─────────────────────────────────── */
.dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: oklch(0 0 0 / 0.8);
  animation: dash-fade-in 0.15s ease;
}
.dialog {
  width: 100%;
  max-width: 28rem; /* sm:max-w-md */
  display: grid;
  gap: 16px; /* gap-4 */
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  border-radius: var(--radius); /* sm:rounded-lg */
  border: 1px solid var(--border);
  background: var(--background);
  padding: 24px; /* p-6 */
  box-shadow: 0 20px 25px -5px oklch(0 0 0 / 0.1), 0 8px 10px -6px oklch(0 0 0 / 0.1);
  animation: dash-fade-in 0.15s ease;
}
@keyframes dash-fade-in { from { opacity: 0; } to { opacity: 1; } }
.dialog-header { display: flex; flex-direction: column; gap: 6px; }
.dialog-title { font-size: 18px; font-weight: 600; letter-spacing: -0.025em; }
.dialog-title.font-pixel { font-size: 14px; font-weight: 400; letter-spacing: 0.02em; line-height: 1.625; }
.dialog-desc { font-size: 14px; color: var(--muted-foreground); }
.dialog-footer { display: flex; flex-direction: column-reverse; gap: 8px; }
@media (min-width: 640px) { .dialog-footer { flex-direction: row; justify-content: flex-end; } }

/* edition radios (RadioGroup in bordered label boxes) */
.radio {
  appearance: none;
  width: 16px; height: 16px; /* h-4 w-4 */
  flex-shrink: 0;
  margin: 2px 0 0; /* mt-0.5 */
  border-radius: 9999px;
  border: 1px solid var(--input);
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s ease;
}
.radio:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.radio:checked { border-color: var(--primary); }
.radio:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 9999px;
  background: var(--primary);
}
.radio:disabled { cursor: not-allowed; opacity: 0.5; }
.edition-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px; /* p-3 */
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.edition-option:hover {
  border-color: color-mix(in oklab, var(--amber-500) 60%, transparent);
  background: color-mix(in oklab, var(--amber-500) 5%, transparent);
}
.edition-option.checked {
  border-color: color-mix(in oklab, var(--amber-500) 70%, transparent);
  background: color-mix(in oklab, var(--amber-500) 10%, transparent);
}
.edition-option.edition-disabled { cursor: not-allowed; opacity: 0.5; }
.edition-option.edition-disabled:hover { border-color: var(--border); background: transparent; }