@import url("/tokens.css");

/* Legacy attribute aliases kept for cached pages that still emit day/night. */
html[data-theme="day"] { color-scheme: light; }
html[data-theme="night"] { color-scheme: dark; }

/* Theme changes are animated briefly by theme.js. Reduced-motion users get no animation. */
html,
body {
  background-color: var(--page);
  color: var(--text);
  transition: background-color .3s ease, color .3s ease;
}

html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition-duration: 300ms !important;
  transition-timing-function: ease !important;
}

.theme-toggle {
  display: inline-grid;
  width: 40px;
  height: 40px;
  min-width: 40px;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  color: var(--text-muted);
  background: var(--surface-raised);
}

.topbar-actions { gap: 8px; }

.theme-toggle:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
  background: var(--surface-accent);
}

.theme-toggle .ui-icon,
.theme-toggle .lucide { width: 18px; height: 18px; }

[data-theme="dark"] body { background: var(--page); }

[data-theme="dark"] .topbar,
[data-theme="dark"] .admin-topbar {
  border-color: var(--line);
  background: rgba(15,20,25,.96);
}

[data-theme="dark"] .primary-public-nav {
  border-color: var(--line);
  background: rgba(42,52,65,.94);
}

[data-theme="dark"] .primary-public-nav a[aria-current="page"] {
  background: var(--surface);
  box-shadow: 0 3px 12px rgba(0,0,0,.18);
}

[data-theme="dark"] .announcement-bar,
[data-theme="dark"] .results-panel { background: rgba(26,34,44,.96); }

[data-theme="dark"] .workspace-grid,
[data-theme="dark"] .discovery-toolbar {
  border-color: var(--line);
}

[data-theme="dark"] .share-panel { border-color: var(--line); background: rgba(20,28,36,.96); }

[data-theme="dark"] .results-table tbody tr:hover { background: rgba(42,52,65,.8); }

[data-theme="dark"] .selection-preview,
[data-theme="dark"] .segmented-control label span,
[data-theme="dark"] .provider-badge {
  border-color: var(--line);
  background: var(--surface);
}

[data-theme="dark"] .captcha-row { background: rgba(42,52,65,.88); }

[data-theme="dark"] .error-directory,
[data-theme="dark"] .request-form-section input,
[data-theme="dark"] .request-form-section select,
[data-theme="dark"] .request-form-section textarea {
  border-color: var(--line);
  color: var(--text);
  background: var(--surface);
}

[data-theme="dark"] .settings-section,
[data-theme="dark"] .admin-overview,
[data-theme="dark"] .admin-auth-form,
[data-theme="dark"] .announcement-editor-item,
[data-theme="dark"] .resource-request-admin-item,
[data-theme="dark"] .account-card,
[data-theme="dark"] .folder-browser,
[data-theme="dark"] .settings-empty,
[data-theme="dark"] .admin-savebar {
  border-color: var(--line);
  color: var(--text);
  background: var(--surface);
}

[data-theme="dark"] .settings-field input,
[data-theme="dark"] .settings-field select,
[data-theme="dark"] .settings-field textarea,
[data-theme="dark"] .scope-account-select select,
[data-theme="dark"] .admin-auth-field input,
[data-theme="dark"] .credential-form textarea {
  border-color: var(--line-strong);
  color: var(--text);
  background: var(--surface-raised);
}

[data-theme="dark"] .resource-request-admin-description,
[data-theme="dark"] .toggle-field,
[data-theme="dark"] .scope-account-select,
[data-theme="dark"] .cache-status,
[data-theme="dark"] .security-notice,
[data-theme="dark"] .option-check span,
[data-theme="dark"] .selected-folder,
[data-theme="dark"] .account-creator {
  border-color: var(--line);
  color: var(--text-muted);
  background: var(--surface-muted);
}

[data-theme="dark"] .announcement-preview {
  border-color: var(--line);
  background: var(--bg-primary);
}

[data-theme="dark"] .announcement-preview-card {
  border-color: color-mix(in srgb, var(--warning) 34%, transparent);
  background: var(--warning-soft);
}

[data-theme="dark"] .announcement-preview-card strong { color: var(--warning); }
[data-theme="dark"] .announcement-preview-content { color: var(--text-secondary); }
[data-theme="dark"] .announcement-preview-content a { color: var(--warning); }

[data-theme="dark"] .button-secondary {
  border-color: var(--line-strong);
  color: var(--text);
  background: var(--surface);
}

[data-theme="dark"] .admin-identity,
[data-theme="dark"] .settings-label,
[data-theme="dark"] .settings-section h2,
[data-theme="dark"] .resource-request-admin-item h3 { color: var(--text); }

@media (max-width: 940px) {
  .theme-toggle { width: 38px; height: 38px; min-width: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  html,
  body,
  html.theme-transition,
  html.theme-transition * { transition-duration: .01ms !important; }
}

/* Mobile topbar: backdrop-filter creates a containing block that traps the fixed
   bottom nav inside the topbar (pinned at the viewport top over the logo and
   actions). Drop it below 940px so the nav truly floats at the viewport bottom. */
@media (max-width: 940px) {
  .topbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--bg-secondary);
  }

  /* Tighten the gap between page content and the footer on small screens. */
  .page-content { padding-bottom: 28px; }
  .help-page { padding-bottom: 40px; }

  /* Footer: copyright and uptime stack centered. The injected footer HTML flows
     inline (row + wrap) so links stay on the text line instead of fragmenting
     into a vertical list, and paddings only clear the floating bottom nav. */
  .site-footer {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    overflow-x: visible;
    padding-top: 14px;
    padding-bottom: 72px;
  }
  .site-footer .footer-copy {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
  .footer-uptime { text-align: center; }
}