/* Aud Auth server — Razor-specific styles on top of the shared skin.
   aud-ui.css (synced at build from src/UIs/react/razor-skin/) carries
   tokens + uc-* primitives; this file holds only what the MVC views need on
   top: page shell, form grid, ASP.NET validation class names, auth card
   spacing. Keep it small — component look belongs in aud-ui.css. */

/* ============================== Fonts ==============================
   The React app's families, self-hosted from wwwroot/fonts (OFL-1.1, copied from @fontsource; no CDN, the server runs
   on-prem without Internet). --uc-font-sans (and --uc-font-heading, the same family) and --uc-font-mono name them first, so the Razor pages match the app. */

@font-face {
  font-family: "Noto Sans Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/noto-sans-vietnamese-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Noto Sans Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/noto-sans-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Noto Sans Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/noto-sans-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Noto Sans Mono Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/noto-sans-mono-vietnamese-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Noto Sans Mono Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/noto-sans-mono-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Noto Sans Mono Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/noto-sans-mono-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================== Page shell ============================== */

.uc-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.25rem 1.5rem 2.5rem;
  width: 100%;
}
.uc-page.narrow {
  max-width: 720px;
}
.uc-narrow {
  max-width: 720px;
}

/* The shared .uc-topbar is built to sit inside .uc-main next to a sidebar;
   the Auth server has no sidebar, so it spans the viewport edge-to-edge. */
.uc-auth-topbar {
  position: sticky;
  top: 0;
}

.uc-auth-topbar .brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--uc-text);
  text-decoration: none;
  white-space: nowrap;
}
.uc-auth-topbar .brand .logo-img {
  height: 28px;
  width: auto;
  flex: 0 0 auto;
}
.uc-auth-topbar .brand .sub {
  font-weight: 400;
  color: var(--uc-muted);
}
.uc-auth-topbar .env-badge {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  background: var(--uc-warning-soft);
  color: var(--uc-warning-text);
  border: 1px solid var(--uc-warning-border);
}

/* Dropdown trigger: summary must look like a button/chip but is a <summary>. */
details.uc-dropdown > summary.uc-btn,
details.uc-dropdown > summary.uc-user-chip {
  list-style: none;
}
details.uc-dropdown > summary.uc-btn::-webkit-details-marker,
details.uc-dropdown > summary.uc-user-chip::-webkit-details-marker {
  display: none;
}
details.uc-dropdown[open] > summary.uc-btn {
  background: var(--uc-bg);
}

/* ============================== Forms ============================== */

/* Label-left form rows (replaces Bootstrap form-group row / col-sm-*). */
.uc-form-grid {
  display: grid;
  grid-template-columns: minmax(140px, 220px) minmax(0, 1fr);
  column-gap: 1rem;
  row-gap: 0.85rem;
  align-items: start;
}
.uc-form-grid > .uc-label {
  margin-bottom: 0;
  padding-top: 0.45rem;
}
.uc-form-grid > .form-cell {
  min-width: 0;
}
.uc-form-grid > .form-cell .uc-field-error {
  display: block;
}
.uc-form-grid > .form-offset {
  grid-column: 2;
}
.uc-form-grid > .form-full {
  grid-column: 1 / -1;
}
@media (max-width: 640px) {
  .uc-form-grid {
    grid-template-columns: 1fr;
    row-gap: 0.35rem;
  }
  .uc-form-grid > .uc-label {
    padding-top: 0;
  }
  .uc-form-grid > .form-offset {
    grid-column: 1;
  }
}

.uc-form-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.uc-actions-bar {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

/* ============================== ASP.NET validation ==============================
   Tag helpers emit fixed class names — map them onto the uc-* error look. */

.field-validation-valid {
  display: none;
}
.field-validation-error {
  display: block;
  color: var(--uc-danger);
  font-size: 0.75rem;
  margin-top: 0.25rem;
}
.uc-input.input-validation-error,
.uc-select.input-validation-error,
.uc-textarea.input-validation-error {
  border-color: var(--uc-danger);
}
.uc-input.input-validation-error:focus,
.uc-select.input-validation-error:focus,
.uc-textarea.input-validation-error:focus {
  border-color: var(--uc-danger);
  box-shadow: 0 0 0 3px var(--uc-ring-danger);
}
.validation-summary-errors {
  margin-bottom: 1rem;
}
.validation-summary-errors ul {
  margin: 0;
  padding: 0 0 0 1.1rem;
}
.validation-summary-valid {
  display: none;
}

/* ============================== Auth card (login flow) ============================== */

/* The login card of the kit (login2): heading, labelled fields, a full-width submit, links under it. */
.uc-auth-card h1 {
  font-family: var(--uc-font-heading);
  font-size: var(--uc-text-page);
  text-align: center;
  margin-bottom: var(--uc-space-4);
}
.uc-auth-card .uc-callout {
  margin-bottom: var(--uc-space-4);
}
.uc-auth-card .uc-auth-actions {
  display: flex;
  gap: var(--uc-space-2);
  margin-top: var(--uc-space-4);
}
.uc-auth-card .uc-auth-actions .grow {
  flex: 1;
}
.uc-auth-card .auth-links {
  margin-top: var(--uc-space-4);
  font-size: var(--uc-text-base);
  display: flex;
  justify-content: center;
  gap: var(--uc-space-2);
  flex-wrap: wrap;
}

/* ============================== Misc ============================== */

.uc-table-wrap {
  overflow-x: auto;
}
.uc-avatar.lg {
  width: 64px;
  height: 64px;
  font-size: 1.4rem;
}
.uc-muted {
  color: var(--uc-muted);
}
.uc-status-ok {
  color: var(--uc-success-text);
}
.uc-mono {
  font-family: var(--uc-font-mono);
  font-size: 0.82rem;
}
.uc-inline-form {
  display: inline;
}
.uc-mt {
  margin-top: 1rem;
}