/* ==========================================================================
   Base — resets, global element defaults, page shell (footer, auth-card).
   ========================================================================== */

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--accent) 25%, transparent);
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px;
}

/* --------------------------------------------------------------------------
   Auth/profile card — shared shell for Account, Profile, Wiki, FileManager
   & Paste views. Same card-on-subtle-background contrast trick as
   php-admin-tool's `body:has(.form-signin) { background-color: var(--bg-subtle); }`.
   -------------------------------------------------------------------------- */

html:has(.auth-card),
body:has(.auth-card) {
    background-color: var(--bg-subtle) !important;
}

.auth-card {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 2rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* Every page's content sits in an .auth-card — its 2rem padding eats a third
   of a 375px phone's width on each side. Trim it on narrow viewports so
   tables, forms and button rows have room to actually fit. */
@media (max-width: 576px) {
    .auth-card {
        padding: 1.25rem;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
}

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

/* QR codes are always black-on-white — frame them so they stay readable
   (and don't look like a rendering glitch) against a dark surface. */
.qr-code-frame {
    display: inline-block;
    background-color: #ffffff;
    padding: 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.qr-code-frame img {
    display: block;
    width: 200px;
    height: 200px;
    max-width: 100%;
}

.totp-key-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.totp-key-value {
    word-break: break-all;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* Set on <html> for the very first paint of a fresh navigation only (see the inline
   script in _Layout.cshtml) — without this, a brief correct-color mismatch during that
   first paint (e.g. html:has(.auth-card) not matching yet) gets smoothed into a visible
   200ms flash by body's background-color transition below, instead of resolving instantly. */
html.no-transition,
html.no-transition *,
html.no-transition *::before,
html.no-transition *::after {
    transition: none !important;
}

html, body {
    background-color: var(--bg) !important;
    color: var(--text) !important;
}

body {
    transition: background-color var(--transition-base), color var(--transition-base);
}

a {
    color: var(--link);
}

a:hover,
a:focus {
    color: var(--accent-hover);
}

code, pre {
    background-color: var(--bg-subtle);
    color: var(--text);
}

hr {
    border-color: var(--border);
    opacity: 1;
}