@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600;700&family=Roboto:wght@400;500;700&display=swap');

/* Styles for every dk-auth page — login, settings, Dashboard, and the
   admin panels alike, so all of them follow the user's selected theme.
   Reads the --dk-* custom properties published by /theme.css — each
   declaration below carries its own fallback (matching the "laser"
   default) in case that stylesheet ever fails to load, so nothing is
   redeclared at :root here (that would silently override the real values
   depending on link order). The two font tokens below are the one
   exception — they're the same on every theme, not per-theme colors. */
:root {
  --dk-font-display: 'Orbitron', sans-serif;
  --dk-font-body: 'Roboto', system-ui, sans-serif;
}

body {
  font-family: var(--dk-font-body);
  background: var(--dk-bg, #0a0a0c);
  color: var(--dk-text, #f5f4f2);
  margin: 0;
  padding: 2rem;
}

/* Logos, menus, buttons, and headings use the display face; everything
   else (body copy, table cells, hints, form values) inherits Roboto from
   body above. */
.dk-nav .brand,
.dk-nav .links a,
.dk-nav button.link-btn,
.dk-app-switcher > summary,
.dk-app-switcher .menu a,
.dk-submenu a,
.dk-theme-opt,
.btn-primary,
.google-btn,
.inline-form button,
.admin-page form button,
h1, h2, h3 {
  font-family: var(--dk-font-display);
}

a { color: var(--dk-accent, #ff3b66); }

/* ---- Card layout: login, forgot/reset password, request-access, maintenance ---- */
.auth-card {
  max-width: 380px;
  margin: 4rem auto;
  background: var(--dk-surface, #17171b);
  border: 1px solid var(--dk-border, #2a2a2f);
  border-radius: 10px;
  padding: 2rem;
}

.auth-card h1 {
  font-size: 1.3rem;
  margin: 0 0 1.5rem;
}

.auth-card label {
  display: block;
  font-size: 0.85rem;
  color: var(--dk-muted, #8c8b90);
  margin-top: 1rem;
  margin-bottom: 0.3rem;
}

.auth-card input {
  width: 100%;
  padding: 0.55rem 0.65rem;
  box-sizing: border-box;
  border: 1px solid var(--dk-border, #2a2a2f);
  border-radius: 6px;
  background: var(--dk-bg, #0a0a0c);
  color: var(--dk-text, #f5f4f2);
  font: inherit;
}

.auth-card button,
.btn-primary {
  width: 100%;
  margin-top: 1.5rem;
  padding: 0.65rem;
  border: none;
  border-radius: 6px;
  background: var(--dk-accent, #ff3b66);
  color: var(--dk-accent-ink, #200308);
  font-family: var(--dk-font-display);
  font-size: inherit;
  font-weight: 600;
  cursor: pointer;
}

.google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 1rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--dk-border, #2a2a2f);
  border-radius: 6px;
  background: var(--dk-surface, #17171b);
  color: var(--dk-text, #f5f4f2);
  text-decoration: none;
  font-weight: 600;
}
.google-btn:hover { border-color: var(--dk-accent, #ff3b66); }

/* The G stays on its own white chip regardless of theme — Google's logo
   is multi-color and only reads correctly on a light ground, same as
   every official "Sign in with Google" button treatment. */
.google-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 4px;
  background: #fff;
  flex-shrink: 0;
}
.google-btn-icon svg { display: block; width: 0.95rem; height: 0.95rem; }

.error {
  color: #ff6b6b;
  font-size: 0.9rem;
}

.notice {
  color: var(--dk-ok, #4cd97b);
  font-size: 0.9rem;
}

/* ---- Dashboard / Settings (nav + content shell) ---- */
.dk-page {
  max-width: 960px;
  margin: 0 auto;
  padding: 0;
}

.dk-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--dk-border, #2a2a2f);
  flex-wrap: wrap;
}
.dk-page > .dk-nav:first-child { margin-bottom: 1.75rem; }
/* Submenu immediately follows the main menu on app pages — pull them
   close together instead of leaving the same big gap main-menu-to-page-
   content pages (Dashboard, Settings, Admin) use. Higher specificity
   than the rule above so it wins for this case only. */
.dk-page > .dk-nav:first-child:has(+ .dk-submenu) { margin-bottom: 0.35rem; }

.dk-nav .brand {
  font-weight: 700;
  font-size: 1rem;
  color: var(--dk-text, #f5f4f2);
  text-decoration: none;
}
.dk-nav .brand span { color: var(--dk-accent, #ff3b66); }

.dk-nav .links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-size: 0.85rem;
}
.dk-nav .links a {
  display: inline-flex;
  align-items: center;
  color: var(--dk-text, #f5f4f2);
  text-decoration: none;
  font-weight: 600;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--dk-border, #2a2a2f);
  border-radius: 6px;
  background: var(--dk-surface, #17171b);
}
.dk-nav .links a:hover { border-color: var(--dk-accent, #ff3b66); }

/* App switcher: sits in the main menu (.dk-nav), only meaningful when a
   user has more than one app — see the integration package for the
   markup any app should render (its own JWT already lists `apps`). */
.dk-app-switcher {
  position: relative;
}
.dk-app-switcher > summary {
  list-style: none;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--dk-text, #f5f4f2);
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--dk-border, #2a2a2f);
  border-radius: 6px;
}
.dk-app-switcher > summary::-webkit-details-marker { display: none; }
.dk-app-switcher .menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  min-width: 180px;
  background: var(--dk-surface, #17171b);
  border: 1px solid var(--dk-border, #2a2a2f);
  border-radius: 8px;
  padding: 0.4rem;
  z-index: 20;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.dk-app-switcher .menu a {
  display: block;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--dk-text, #f5f4f2);
  text-decoration: none;
}
.dk-app-switcher .menu a:hover { background: var(--dk-bg, #0a0a0c); }
.dk-app-switcher .menu a.current { color: var(--dk-accent, #ff3b66); font-weight: 600; }

/* Submenu: each app's OWN internal navigation, rendered by that app
   directly below the shared main menu, styled to match it. */
.dk-submenu {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--dk-border, #2a2a2f);
  margin-bottom: 1.75rem;
  font-size: 0.85rem;
  overflow-x: auto;
}
.dk-submenu a {
  color: var(--dk-muted, #8c8b90);
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 0.2rem;
  border-bottom: 2px solid transparent;
}
.dk-submenu a.current {
  color: var(--dk-text, #f5f4f2);
  border-bottom-color: var(--dk-accent, #ff3b66);
  font-weight: 600;
}

.dk-nav form.inline-form { margin: 0; }
.dk-nav button.link-btn {
  display: inline-flex;
  align-items: center;
  /* Buttons don't inherit font-family/size like <a> does, so this needs
     an explicit font-size (matching .dk-nav .links' 0.85rem) — but not
     the `font` shorthand, which would also reset font-family and
     silently override the Orbitron rule this selector already matches
     above (that's the bug this replaced: buttons rendered in Roboto). */
  font-size: inherit;
  font-weight: 600;
  color: var(--dk-text, #f5f4f2);
  cursor: pointer;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--dk-border, #2a2a2f);
  border-radius: 6px;
  background: var(--dk-surface, #17171b);
}
.dk-nav button.link-btn:hover { border-color: var(--dk-accent, #ff3b66); }

.dk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.85rem;
}

.dk-card {
  position: relative;
  background: var(--dk-surface, #17171b);
  border: 1px solid var(--dk-border, #2a2a2f);
  border-radius: 10px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.dk-card:hover { border-color: var(--dk-accent, #ff3b66); }
/* Stretched-link pattern: the card's one real link (a.open) grows to
   cover the whole card via ::after, so clicking anywhere on the card —
   not just the "Open" text — activates it, while keyboard/screen-reader
   navigation still sees a single ordinary link. */
.dk-card a.open::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.dk-card .name { font-weight: 600; font-family: var(--dk-font-display); }
.dk-card .slug {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.72rem;
  color: var(--dk-muted, #8c8b90);
}
.dk-card a.open {
  font-size: 0.85rem;
  font-weight: 600;
  font-family: var(--dk-font-display);
  color: var(--dk-accent, #ff3b66);
  text-decoration: none;
  margin-top: auto;
}

/* Same look as .dk-card a.open (bold, accent-colored, no underline) for
   standalone "← back" links outside a card — breadcrumbs back to a list,
   "back to Dashboard", "back to login", etc. Arrow leads the text here
   since these point backward, where .open's trails since it points
   forward. */
.dk-back {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: var(--dk-font-display);
  color: var(--dk-accent, #ff3b66);
  text-decoration: none;
}

.dk-pill {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 700;
  font-family: var(--dk-font-display);
  letter-spacing: 0.02em;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}
.dk-pill.ok { background: color-mix(in srgb, var(--dk-ok, #4cd97b) 20%, var(--dk-surface, #17171b)); color: var(--dk-ok, #4cd97b); }
.dk-pill.warn { background: color-mix(in srgb, var(--dk-warn, #ffc93c) 22%, var(--dk-surface, #17171b)); color: var(--dk-warn, #ffc93c); }
.dk-pill.offline { background: color-mix(in srgb, var(--dk-danger, #ff4d4d) 22%, var(--dk-surface, #17171b)); color: var(--dk-danger, #ff4d4d); }

.dk-section {
  background: var(--dk-surface, #17171b);
  border: 1px solid var(--dk-border, #2a2a2f);
  border-radius: 10px;
  padding: 1.1rem;
  margin-bottom: 0.85rem;
}
.dk-section h3 {
  font-size: 0.9rem;
  margin: 0 0 0.9rem;
}

.dk-theme-picker {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.dk-theme-opt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.8rem;
  border-radius: 8px;
  border: 1px solid var(--dk-border, #2a2a2f);
  background: var(--dk-bg, #0a0a0c);
  color: var(--dk-text, #f5f4f2);
  font-family: var(--dk-font-display);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.dk-theme-opt[aria-pressed="true"] {
  border-color: var(--dk-accent, #ff3b66);
  box-shadow: 0 0 0 1px var(--dk-accent, #ff3b66);
}
.dk-theme-opt .dot {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
}

.dk-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--dk-border, #2a2a2f);
  font-size: 0.88rem;
}
.dk-field-row:last-child { border-bottom: none; }
.dk-field-row .hint {
  color: var(--dk-muted, #8c8b90);
  font-size: 0.75rem;
  margin-top: 0.15rem;
}
.dk-field-row input[type="text"],
.dk-field-row input[type="password"] {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  border: 1px solid var(--dk-border, #2a2a2f);
  background: var(--dk-bg, #0a0a0c);
  color: var(--dk-text, #f5f4f2);
  min-width: 180px;
}

@media (max-width: 640px) {
  body { padding: 1rem; }
  .dk-grid { grid-template-columns: 1fr; }
  .dk-field-row { flex-direction: column; align-items: flex-start; }
  .dk-field-row input { width: 100%; }
}

/* ---- Admin panels (/auth/admin, /auth/app-admin/<slug>) — same theme
   tokens, kept as plain tables/forms rather than the dk-card treatment
   since these are dense operational screens, not the Dashboard. ---- */
.admin-page {
  max-width: 960px;
  margin: 0 auto;
}
.admin-page h1 { font-size: 1.4rem; margin: 0 0 0.5rem; }
.admin-page h2 { font-size: 1rem; margin: 1.75rem 0 0.75rem; }

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--dk-surface, #17171b);
  border: 1px solid var(--dk-border, #2a2a2f);
  border-radius: 8px;
  overflow: hidden;
}
th, td {
  border-bottom: 1px solid var(--dk-border, #2a2a2f);
  padding: 0.55rem 0.7rem;
  text-align: left;
  vertical-align: top;
  font-size: 0.85rem;
}
th { color: var(--dk-muted, #8c8b90); font-weight: 600; }
tr:last-child td { border-bottom: none; }

.inline-form {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  margin: 0.15rem 0;
}
.inline-form button, .admin-page form button {
  font-family: var(--dk-font-display);
  font-size: 0.8rem;
  padding: 0.35rem 0.7rem;
  border-radius: 6px;
  border: 1px solid var(--dk-border, #2a2a2f);
  background: var(--dk-surface-2, #202024);
  color: var(--dk-text, #f5f4f2);
  cursor: pointer;
}
.inline-form button:hover, .admin-page form button:hover {
  border-color: var(--dk-accent, #ff3b66);
}
.admin-page input[type="text"],
.admin-page input[type="email"],
.admin-page input[type="date"],
.admin-page select {
  font: inherit;
  font-size: 0.82rem;
  padding: 0.35rem 0.55rem;
  border-radius: 6px;
  border: 1px solid var(--dk-border, #2a2a2f);
  background: var(--dk-bg, #0a0a0c);
  color: var(--dk-text, #f5f4f2);
}

code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.82rem;
  background: var(--dk-surface-2, #202024);
  border: 1px solid var(--dk-border, #2a2a2f);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
}