@charset "utf-8";
/* ============================================================================
   ARXEON DESIGN SYSTEM — "PRISM"
   04 · WEBFORMS COMPATIBILITY LAYER
   Requires: arxeon.tokens.css, arxeon.base.css, arxeon.components.css
   ----------------------------------------------------------------------------
   ASP.NET WebForms server controls emit markup that a hand-written design
   system does not anticipate: inputs come out as <input type="submit">,
   validators arrive with an inline style="color:Red" that outranks any class,
   and list controls wrap their items in containers of their own.

   Rather than assume a specific render shape, this layer works three ways:
     · ELEMENT-LEVEL rules keyed on things that are always true
       (input[type=submit], input[type=file], select, table).
     · DEFENSIVE rules that match more than one possible container shape,
       so they hold whichever wrapper the control emits.
     · A RUNTIME UPGRADER in arxeon.webforms.js that rewrites checkboxes and
       radios into the .ax-check structure after render — this is the path
       that is guaranteed correct, because it reads the DOM instead of
       predicting it.

   ── CssClass cheat-sheet ──────────────────────────────────────────────────
     asp:TextBox           CssClass="ax-input"      (or ax-textarea)
     asp:DropDownList      CssClass="ax-native-select"  + data-ax-select to upgrade
     asp:Button            CssClass="ax-btn ax-btn--primary"
     asp:LinkButton        CssClass="ax-btn ax-btn--secondary"
     asp:CheckBox          CssClass="ax-wf-check"
     asp:CheckBoxList      CssClass="ax-wf-list"
     asp:RadioButtonList   CssClass="ax-wf-list"
     asp:FileUpload        CssClass="ax-wf-file"
     asp:GridView          CssClass="ax-table"  (wrap in .ax-table-wrap)
     asp:Panel             CssClass="ax-card"
     validators            CssClass="ax-error"   (inline colour is overridden below)
     asp:ValidationSummary CssClass="ax-wf-summary"
   ========================================================================= */


/* ── 1 · BUTTONS RENDERED AS <input> ────────────────────────────────────────
   asp:Button emits <input type="submit">. An <input> is a replaced element:
   it cannot host ::before or ::after, so the beam sweep and the loading
   spinner in .ax-btn are silently dropped. Everything else is restated here
   so the control still looks identical.                                   */

input[type="submit"].ax-btn,
input[type="button"].ax-btn,
input[type="reset"].ax-btn {
  display: inline-block;
  overflow: visible;
  text-align: center;
  line-height: calc(var(--ax-control-h) - 2px);
  padding-block: 0;
  -webkit-appearance: none;
  appearance: none;
}
input[type="submit"].ax-btn--sm { line-height: calc(var(--ax-control-h-sm) - 2px); }
input[type="submit"].ax-btn--lg { line-height: calc(var(--ax-control-h-lg) - 2px); }
input[type="submit"].ax-btn:hover { transform: translateY(-1px); }
input[type="submit"].ax-btn::-moz-focus-inner { border: 0; padding: 0; }

/* asp:LinkButton renders <a href="javascript:__doPostBack(...)"> and keeps
   the anchor's default underline/colour — reset it when styled as a button. */
a.ax-btn { text-decoration: none; }

/* Postback in flight: arxeon.webforms.js adds this to the clicked control. */
.ax-btn.is-posting { pointer-events: none; opacity: .72; }


/* ── 2 · VALIDATORS ─────────────────────────────────────────────────────────
   asp:RequiredFieldValidator and friends write style="color:Red" straight
   onto the element. An inline style beats every class selector, so !important
   is the only correct tool here — the one place in this system it is used. */

span.ax-error,
.ax-wf-validator {
  color: var(--ax-danger) !important;
  display: inline-flex;
  align-items: flex-start;
  gap: var(--ax-sp-3);
  font-size: var(--ax-fs-xs) !important;
  font-weight: var(--ax-fw-medium);
  line-height: 1.5;
  letter-spacing: var(--ax-tr-tiny);
}
/* The framework toggles display/visibility inline. Honour both without
   re-showing a hidden validator. */
span.ax-error[style*="visibility:hidden"],
span.ax-error[style*="visibility: hidden"] { visibility: hidden !important; }

.ax-wf-summary {
  color: var(--ax-danger) !important;
  padding: var(--ax-sp-6) var(--ax-sp-7);
  border-radius: var(--ax-r-md);
  background: rgb(var(--ax-danger-rgb) / .07);
  border: 1px solid rgb(var(--ax-danger-rgb) / .22);
  font-size: var(--ax-fs-sm);
}
.ax-wf-summary ul { margin: 0; padding-inline-start: var(--ax-sp-7); }
.ax-wf-summary li { margin-block: var(--ax-sp-2); }

/* asp:Login / CreateUserWizard failure text also arrives red and inline. */
.ax-wf-failure { color: var(--ax-danger) !important; font-size: var(--ax-fs-sm); }


/* ── 3 · CHECKBOX / RADIO — defensive CSS ───────────────────────────────────
   asp:CheckBox, asp:CheckBoxList and asp:RadioButtonList each wrap their
   items in a container of their own choosing. These rules match the shape
   rather than the exact tag, so they hold either way; arxeon.webforms.js
   then upgrades the same markup to the full animated control.            */

.ax-wf-check,
.ax-wf-list { font-size: var(--ax-fs-sm); color: var(--ax-text-body); }

/* Flow layout: input + label pairs, optionally separated by <br>. */
.ax-wf-check input[type="checkbox"],
.ax-wf-check input[type="radio"],
.ax-wf-list  input[type="checkbox"],
.ax-wf-list  input[type="radio"] {
  inline-size: 18px;
  block-size: 18px;
  margin: 0 var(--ax-sp-4) 0 0;
  accent-color: var(--ax-spec-2);   /* correct look even before the upgrade */
  vertical-align: -3px;
  cursor: pointer;
}
.ax-wf-check label,
.ax-wf-list  label {
  cursor: pointer;
  margin-inline-end: var(--ax-sp-7);
  color: inherit;
}
/* Table layout: asp:*List with RepeatLayout="Table" emits a real table. */
.ax-wf-list table { border-collapse: separate; border-spacing: 0 var(--ax-sp-3); }
.ax-wf-list td { padding-inline-end: var(--ax-sp-7); vertical-align: middle; }
.ax-wf-list br { line-height: var(--ax-sp-6); }

/* Once upgraded, the wrapper stops laying anything out itself. */
.ax-wf-list.is-upgraded { display: flex; flex-wrap: wrap; gap: var(--ax-sp-5) var(--ax-sp-8); }
.ax-wf-list.is-upgraded.ax-wf-list--stack { flex-direction: column; gap: var(--ax-sp-5); }
.ax-wf-list.is-upgraded table,
.ax-wf-list.is-upgraded tbody,
.ax-wf-list.is-upgraded tr,
.ax-wf-list.is-upgraded td { display: contents; }
.ax-wf-list.is-upgraded br { display: none; }


/* ── 4 · FILE UPLOAD ────────────────────────────────────────────────────────
   asp:FileUpload emits <input type="file">, whose button is a shadow part.
   ::file-selector-button is the standard hook and is safe to style.       */

.ax-wf-file, input[type="file"].ax-input {
  inline-size: 100%;
  padding: 0;
  block-size: var(--ax-control-h);
  border-radius: var(--ax-r-sm);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--ax-ink-100), var(--ax-ink-100)) padding-box,
    var(--ax-edge-quiet) border-box;
  color: var(--ax-text-muted);
  font-size: var(--ax-fs-xs);
  line-height: calc(var(--ax-control-h) - 2px);
  cursor: pointer;
}
.ax-wf-file::file-selector-button,
input[type="file"].ax-input::file-selector-button {
  block-size: calc(var(--ax-control-h) - 2px);
  margin-inline-end: var(--ax-sp-6);
  padding-inline: var(--ax-sp-7);
  border: 0;
  border-start-start-radius: var(--ax-r-sm);
  border-end-start-radius: var(--ax-r-sm);
  background: var(--ax-ink-300);
  color: var(--ax-text-strong);
  font-family: inherit;
  font-size: var(--ax-fs-xs);
  font-weight: var(--ax-fw-semibold);
  cursor: pointer;
  transition: background var(--ax-d-fast) var(--ax-ease);
}
.ax-wf-file:hover::file-selector-button { background: var(--ax-ink-400); }
.ax-wf-file:focus-visible { box-shadow: var(--ax-ring); outline: none; }


/* ── 5 · GRIDVIEW / DATALIST / REPEATER TABLES ──────────────────────────────
   GridView emits <tr> directly under <table> unless UseAccessibleHeader is
   on, so the header row cannot be reached through thead. Target the first
   row and the framework's own row classes as well.                       */

table.ax-table > tbody > tr:first-child > th,
table.ax-table > tr:first-child > th,
table.ax-table th {
  padding: var(--ax-sp-5) var(--ax-sp-6);
  text-align: start;
  font-family: var(--ax-font-mono);
  font-size: var(--ax-fs-3xs);
  font-weight: var(--ax-fw-medium);
  letter-spacing: var(--ax-tr-micro);
  text-transform: uppercase;
  color: var(--ax-text-subtle);
  background: var(--ax-ink-150);
  border-block-end: 1px solid var(--ax-line);
  white-space: nowrap;
}
table.ax-table th a { color: inherit; text-decoration: none; }
table.ax-table th a:hover { color: var(--ax-cyan); }
table.ax-table td { padding: var(--ax-sp-6); border-block-end: 1px solid var(--ax-line-soft); }

.ax-wf-alt   { background: rgb(var(--ax-white-rgb) / .022); }
.ax-wf-sel   { background: rgb(var(--ax-cyan-rgb) / .10); color: var(--ax-text-strong); }
.ax-wf-pager td { padding: var(--ax-sp-5) var(--ax-sp-6); background: var(--ax-ink-150); }
.ax-wf-pager a, .ax-wf-pager span {
  display: inline-grid; place-items: center;
  min-inline-size: 30px; block-size: 30px;
  margin-inline-end: var(--ax-sp-2);
  border-radius: var(--ax-r-xs);
  font-size: var(--ax-fs-xs);
  color: var(--ax-text-muted);
  text-decoration: none;
}
.ax-wf-pager a:hover { background: rgb(var(--ax-white-rgb)/.07); color: var(--ax-text-strong); }
.ax-wf-pager span { background: var(--ax-grad-carry); color: var(--ax-text-on-spec); font-weight: var(--ax-fw-bold); }

.ax-wf-empty { padding: var(--ax-sp-11); text-align: center; color: var(--ax-text-subtle); font-size: var(--ax-fs-sm); }


/* ── 6 · LOGIN / IDENTITY SCAFFOLDING ───────────────────────────────────────
   The Individual Accounts template ships tables and <b> labels inside the
   account pages. Neutralise them so the account pages can be rebuilt with
   this system without fighting leftovers.                                */

.ax-auth table { inline-size: 100%; }
.ax-auth table td { padding: 0 0 var(--ax-sp-6); vertical-align: top; }
.ax-auth b, .ax-auth strong { font-weight: var(--ax-fw-semibold); color: var(--ax-text-strong); }
.ax-auth hr { block-size: 1px; background: var(--ax-line); margin-block: var(--ax-sp-8); }

/* asp:LoginView / LoginStatus emit bare anchors. */
.ax-wf-loginstatus a { color: var(--ax-text-muted); text-decoration: none; font-size: var(--ax-fs-sm); }
.ax-wf-loginstatus a:hover { color: var(--ax-cyan); }


/* ── 7 · UPDATEPANEL ────────────────────────────────────────────────────────
   During an async postback the panel keeps its old content on screen.
   Dim it rather than collapse it, so the page never jumps.               */

.ax-wf-updating { position: relative; pointer-events: none; }
.ax-wf-updating::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  background: rgb(10 10 10 / .55);
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
  animation: ax-fade-in var(--ax-d-base) var(--ax-ease) both;
}
@keyframes ax-fade-in { from { opacity: 0; } to { opacity: 1; } }

.ax-wf-progress {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  z-index: 6;
  translate: -50% -50%;
}


/* ── 8 · MISC FRAMEWORK OUTPUT ──────────────────────────────────────────── */

/* ScriptManager writes a hidden div wrapper at the top of the form; it has
   no class, so it is reached structurally. Height must stay zero or it
   introduces a phantom gap above the header. */
form[id] > div:first-child:not([class]) { line-height: 0; font-size: 0; }
input[type="hidden"] { display: none !important; }

/* asp:Image / asp:ImageButton */
img.ax-img { border-radius: var(--ax-r-md); }
input[type="image"] { cursor: pointer; }

/* asp:Calendar and other legacy table controls get a neutral base so they
   are never actively broken-looking before they are replaced. */
.ax-wf-legacy table { inline-size: 100%; font-size: var(--ax-fs-sm); }
.ax-wf-legacy td, .ax-wf-legacy th { padding: var(--ax-sp-3) var(--ax-sp-4); }

/* Anything the framework renders that this system has not claimed still
   inherits readable colour rather than the browser default black-on-black. */
.ax-wf-scope, .ax-wf-scope * { color: inherit; }