/*
 * ALPNEXUM platform chrome
 *
 * This is the canonical source for the authenticated product header and
 * platform brand geometry. Run scripts/sync_design_assets.ps1 after edits.
 * Portal and product modules may change only the mark letter and product
 * colour; dimensions, typography, spacing and actions stay identical.
 */
:root {
  --alx-platform-blue: #145fbd;
  --alx-platform-blue-dark: #102642;
  --alx-portal-mark: linear-gradient(145deg, #102642, #1c76d2 72%, #64b7ff);
  --alx-portal-mark-shadow: 0 5px 12px #1c76d233;
  --alx-time-mark: linear-gradient(145deg, #0d776e, #1da58f 72%, #6ad9c5);
  --alx-time-mark-shadow: 0 5px 12px #168c7b33;
  --alx-inventory-mark: linear-gradient(145deg, #5c341c, #9a5f2e 72%, #d49a62);
  --alx-inventory-mark-shadow: 0 5px 12px #7b4a2833;
  --alx-infrastructure-mark: linear-gradient(145deg, #a94f12, #d9772b 72%, #f3b06d);
  --alx-infrastructure-mark-shadow: 0 5px 12px #c96b2633;
  --alx-payroll-mark: linear-gradient(145deg, #6f3ca7, #a45dcc 72%, #d79be9);
  --alx-payroll-mark-shadow: 0 5px 12px #8c4fba33;
  --alx-admin-mark: linear-gradient(145deg, #31465d, #567b9e);
  --alx-admin-mark-shadow: 0 5px 12px #415f7b33;
  --alx-platform-ink: #17243b;
  --alx-platform-muted: #68788b;
  --alx-platform-line: #dce5ee;
  --alx-platform-surface: #fff;
  /* Shared component tokens. These aliases are intentionally consumed by
     Portal, Time user pages and Django administration during migration. */
  --alx-blue: var(--alx-platform-blue);
  --alx-blue-dark: var(--alx-platform-blue-dark);
  --alx-bg: #f5f8fc;
  --alx-ink: var(--alx-platform-ink);
  --alx-muted: var(--alx-platform-muted);
  --alx-line: var(--alx-platform-line);
  --alx-card: var(--alx-platform-surface);
  --alx-card-border: #dfe7f1;
  --alx-control-border: #c9d7e5;
  --alx-success-background: #e5f6ee;
  --alx-success-ink: #116443;
  --alx-error-background: #fff0ef;
  --alx-error-ink: #b42318;
  --alx-card-radius: 16px;
  --alx-control-radius: 10px;
  --alx-card-padding: 20px;
  --alx-field-gap: 8px;
  --alx-field-label-size: 13px;
  --alx-state-padding: 16px;
  --alx-dashboard-card-radius: 18px;
  --alx-dashboard-card-padding: 22px;
  --alx-dashboard-grid-gap: 16px;
  --alx-dashboard-shadow: 0 8px 24px #1e426312;
  --alx-page-gutter: clamp(16px, 3vw, 32px);
  --alx-content-max: 1120px;
  --alx-font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --alx-body-size: 16px;
  --alx-body-line-height: 1.5;
  --alx-eyebrow-size: 12px;
  --alx-title-size: 40px;
  --alx-section-title-size: 28px;
  --alx-card-title-size: 18px;
  --alx-button-height: 40px;
  --alx-mobile-button-height: 44px;
  --alx-header-button-height: 34px;
  --alx-button-size: 14px;
  --alx-primary-gradient: linear-gradient(100deg, #155cb8, #2988de);
  --alx-primary-gradient-hover: linear-gradient(100deg, #124e9c, #2477c5);
  --alx-primary-shadow: 0 9px 18px #206fc533;
  --alx-focus-color: #2a84df;
  --alx-focus-ring: #2a84df33;
  --alx-header-height: 68px;
  --alx-header-mobile-height: 64px;
  --alx-mark-size: 28px;
  --alx-mark-radius: 9px;
  --alx-brand-gap: 8px;
  --alx-header-action-gap: 14px;
  --alx-header-content-max: 1056px;
  --alx-dashboard-tablet-breakpoint: 1000px;
  --alx-mobile-breakpoint: 760px;
  --alx-admin-tablet-breakpoint: 1024px;
}

/* Product accents stay consistent across the user pages and their
   administration. */
.time-page,
.time-admin-page {
  --alx-blue: #0d776e;
  --alx-blue-dark: #09584f;
  --alx-primary-gradient: var(--alx-time-mark);
  --alx-primary-gradient-hover: linear-gradient(100deg, #09584f, #168c7b);
  --alx-primary-shadow: 0 9px 18px #168c7b33;
  --alx-focus-color: #168c7b;
  --alx-focus-ring: #168c7b33;
}

.inventory-page,
.inventory-admin-page {
  --alx-blue: #7b4a28;
  --alx-blue-dark: #5c341c;
  --alx-primary-gradient: var(--alx-inventory-mark);
  --alx-primary-gradient-hover: linear-gradient(100deg, #5c341c, #9a5f2e);
  --alx-primary-shadow: 0 9px 18px #7b4a2833;
  --alx-focus-color: #9a5f2e;
  --alx-focus-ring: #9a5f2e33;
}

.infrastructure-page,
.infrastructure-admin-page {
  --alx-blue: #155b85;
  --alx-blue-dark: #0d3f61;
  --alx-primary-gradient: var(--alx-infrastructure-mark);
  --alx-primary-gradient-hover: linear-gradient(100deg, #0d3f61, #227eb0);
  --alx-primary-shadow: 0 9px 18px #227eb033;
  --alx-focus-color: #227eb0;
  --alx-focus-ring: #227eb033;
}

/* Reserve the desktop scrollbar channel on short and long pages alike. This
   prevents the complete header and card grid from shifting during navigation. */
html { scrollbar-gutter: stable; }

/* The administrative pages can be shorter than a dashboard. Reserve the same
   desktop scrollbar channel so navigation never moves the whole page 15 px. */
@media (min-width: 761px) {
  html { overflow-y: scroll; }
}

/* Every authenticated surface inherits one platform type stack. Product
   styles may set colour or size, but must not switch the fallback font. */
body { font-family: Inter, ui-sans-serif, system-ui, sans-serif; }

/* Keep focus, fields and feedback states predictable when a route does not
   have a product-specific component stylesheet.  These rules deliberately
   do not set widths or margins, so dense administration forms keep their
   layout while sharing the same keyboard and error treatment. */
:where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--alx-focus-color);
  outline-offset: 2px;
}

:where(input, select, textarea):disabled,
:where(button):disabled {
  cursor: not-allowed;
  opacity: .58;
}

.alx-feedback--success {
  border: 1px solid #bfe6d0;
  border-radius: var(--alx-control-radius);
  background: var(--alx-success-background);
  color: var(--alx-success-ink);
}

.alx-feedback--error {
  border: 1px solid #f1c5c1;
  border-radius: var(--alx-control-radius);
  background: var(--alx-error-background);
  color: var(--alx-error-ink);
}

/* Shared, opt-in component primitives. Existing page classes are migrated to
   these tokens progressively; the primitives prevent new one-off variants. */
.alx-surface {
  border: 1px solid var(--alx-card-border);
  border-radius: var(--alx-card-radius);
  background: var(--alx-card);
  box-shadow: 0 8px 24px #1e42630d;
}

.alx-control {
  min-height: var(--alx-button-height);
  border: 1px solid var(--alx-control-border);
  border-radius: var(--alx-control-radius);
  color: var(--alx-ink);
  font: inherit;
}

.alx-control:focus-visible {
  border-color: var(--alx-focus-color);
  outline: 2px solid var(--alx-focus-ring);
  outline-offset: 0;
}

.alx-primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--alx-button-height);
  padding: 0 14px;
  border: 0;
  border-radius: var(--alx-control-radius);
  background: var(--alx-primary-gradient);
  box-shadow: var(--alx-primary-shadow);
  color: #fff;
  font: inherit;
  font-size: var(--alx-button-size);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.alx-primary-action:hover,
.alx-primary-action:focus-visible { background: var(--alx-primary-gradient-hover); }

/* Shared content components. These are deliberately independent of a
   dashboard or a product: forms, tables and application states must look the
   same in Portal, Time and every future module. Product CSS may arrange them,
   but it may not replace their field, table or feedback geometry. */
.alx-form {
  display: grid;
  gap: 16px;
}

.alx-field {
  display: grid;
  gap: var(--alx-field-gap);
  min-width: 0;
}

.alx-field > label,
.alx-field__label {
  color: var(--alx-ink);
  font-size: var(--alx-field-label-size);
  font-weight: 700;
  line-height: 1.3;
}

.alx-field :where(input, select, textarea),
:where(.alx-form) :where(input, select, textarea) {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--alx-button-height);
  padding: 8px 10px;
  border: 1px solid var(--alx-control-border);
  border-radius: var(--alx-control-radius);
  background: var(--alx-card);
  color: var(--alx-ink);
  font: inherit;
  line-height: var(--alx-body-line-height);
}

.alx-field textarea,
.alx-form textarea { min-height: 96px; resize: vertical; }

.alx-field :where(input[type="checkbox"], input[type="radio"]),
.alx-form :where(input[type="checkbox"], input[type="radio"]) {
  width: auto;
  min-height: auto;
  padding: 0;
}

.alx-field__help { color: var(--alx-muted); font-size: 13px; line-height: 1.4; }
.alx-field__error { color: var(--alx-error-ink); font-size: 13px; font-weight: 700; line-height: 1.4; }

.alx-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--alx-card-border);
  border-radius: var(--alx-card-radius);
  background: var(--alx-card);
  box-shadow: 0 8px 24px #1e42630d;
}

.alx-table { width: 100%; border-collapse: collapse; color: var(--alx-ink); }
.alx-table th,
.alx-table td { padding: 12px; border-bottom: 1px solid var(--alx-line); text-align: left; vertical-align: top; }
.alx-table th { background: #edf4fa; color: #315d75; font-size: 13px; font-weight: 700; }
.alx-table tr:last-child td { border-bottom: 0; }

.alx-empty-state,
.alx-loading-state,
.alx-error-state {
  padding: var(--alx-state-padding);
  border: 1px solid var(--alx-card-border);
  border-radius: var(--alx-card-radius);
  background: var(--alx-card);
  color: var(--alx-muted);
}

.alx-loading-state { display: grid; place-items: center; min-height: 120px; }
.alx-error-state { border-color: #f1c5c1; background: var(--alx-error-background); color: var(--alx-error-ink); }

@media (max-width: 760px) {
  .alx-field :where(input, select, textarea),
  :where(.alx-form) :where(input, select, textarea) { min-height: var(--alx-mobile-button-height); }
  .alx-table th,
  .alx-table td { padding: 10px; }
}

.alx-product-header {
  box-sizing: border-box;
  container-name: alx-header;
  container-type: inline-size;
  width: 100%;
  min-height: var(--alx-header-height);
  height: var(--alx-header-height);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--alx-platform-line);
  color: var(--alx-platform-ink);
  /* The header must not inherit a product-local fallback stack.  Portal and
     modules therefore render every text action with the same platform font. */
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

.alx-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--alx-brand-gap);
  min-width: 0;
  color: var(--alx-platform-blue);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.alx-brand-mark {
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  flex: 0 0 var(--alx-mark-size);
  width: var(--alx-mark-size);
  height: var(--alx-mark-size);
  border-radius: var(--alx-mark-radius);
  background: var(--alx-mark-background, var(--alx-portal-mark));
  box-shadow: var(--alx-mark-shadow, var(--alx-portal-mark-shadow));
  color: #fff;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
}

.alx-brand-mark--time {
  --alx-mark-background: var(--alx-time-mark);
  --alx-mark-shadow: var(--alx-time-mark-shadow);
}

.alx-brand-mark--inventory {
  --alx-mark-background: var(--alx-inventory-mark);
  --alx-mark-shadow: var(--alx-inventory-mark-shadow);
}

.alx-brand-mark--infrastructure {
  --alx-mark-background: var(--alx-infrastructure-mark);
  --alx-mark-shadow: var(--alx-infrastructure-mark-shadow);
}

.alx-brand-mark--payroll {
  --alx-mark-background: var(--alx-payroll-mark);
  --alx-mark-shadow: var(--alx-payroll-mark-shadow);
}

/* Product colour is centralized here. Cards may change their dimensions, but
   the same module must never acquire a different colour in another surface. */
.app-icon.alx-module-color--portal { background: var(--alx-portal-mark); }
.app-icon.alx-module-color--time { background: var(--alx-time-mark); }
.app-icon.alx-module-color--inventory { background: var(--alx-inventory-mark); }
.app-icon.alx-module-color--infrastructure { background: var(--alx-infrastructure-mark); }
.app-icon.alx-module-color--payroll { background: var(--alx-payroll-mark); }
.app-icon.app-administration-icon { background: #476782; }
.app-administration .app-icon { background: #476782; }

.alx-brand-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alx-header-actions,
.alx-account-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--alx-header-action-gap);
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
}

.alx-header-actions form,
.alx-account-actions form { margin: 0; }

.alx-account-link {
  color: var(--alx-platform-blue);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.alx-display-name {
  max-width: 12rem;
  overflow: hidden;
  color: var(--alx-platform-ink);
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alx-logout {
  box-sizing: border-box;
  min-height: 34px;
  height: 34px;
  margin: 0;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: #edf4ff;
  box-shadow: none;
  color: var(--alx-platform-blue);
  cursor: pointer;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
}

.alx-logout:hover,
.alx-logout:focus-visible {
  background: #dcecff;
  color: #124e9c;
}

/* Shared platform footer. Every rendered Portal, Time and Time administration
   page ends with this component; individual pages must not create variants. */
.alx-platform-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin-top: 40px;
  padding: 18px 0;
  border-top: 1px solid var(--alx-platform-line);
  color: #7b8ca2;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
}

@media (max-width: 760px) {
  :root {
    --alx-title-size: 32px;
    --alx-section-title-size: 24px;
    --alx-button-height: var(--alx-mobile-button-height);
  }

  .alx-primary-action { min-height: var(--alx-mobile-button-height); }

  .alx-platform-footer {
    display: block;
    margin-top: 32px;
    padding: 16px 0;
    line-height: 2;
  }

  .alx-platform-footer span { display: block; }
  .alx-product-header {
    min-height: var(--alx-header-mobile-height);
    height: var(--alx-header-mobile-height);
    gap: 8px;
  }

  .alx-header-actions,
  .alx-account-actions { gap: 8px; }

  .alx-display-name,
  .alx-module-return .alx-brand-label { display: none; }

  .alx-product-header .alx-logout {
    flex: 0 0 34px;
    min-width: 34px;
    width: 34px;
    padding-inline: 0;
    overflow: hidden !important;
    color: transparent !important;
    font-size: 0 !important;
    position: relative;
  }

  .alx-product-header .alx-logout::before {
    content: "\2197";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--alx-platform-blue);
    font-size: 16px;
  }
}

@media (max-width: 420px) {
  .alx-account-link { display: none; }
  .alx-brand { font-size: 12px; }
}

/* The in-app browser and split-screen windows can make the header narrower
   than the viewport. Container rules therefore protect the actual available
   header width and prevent the logout action from being clipped. */
@container alx-header (max-width: 760px) {
  .alx-header-actions,
  .alx-account-actions { gap: 8px; }

  .alx-display-name,
  .alx-module-return .alx-brand-label { display: none; }

  .alx-product-header .alx-logout {
    flex: 0 0 34px;
    position: relative;
    min-width: 34px;
    width: 34px;
    padding-inline: 0;
    overflow: hidden !important;
    color: transparent !important;
    font-size: 0 !important;
  }

  .alx-product-header .alx-logout::before {
    content: "\2197";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--alx-platform-blue);
    font-size: 16px;
  }
}

@container alx-header (max-width: 420px) {
  .alx-account-link { display: none; }
  .alx-brand { font-size: 12px; }
}

/* The second, organization-owned header row is shared by Portal, Time and
   future modules. Product branding stays in the first row; this row only
   identifies the active customer organization and never substitutes A/T/I/P. */
.alx-organization-header {
  box-sizing: border-box;
  width: 100%;
  height: 52px;
  min-height: 52px;
  border: 0;
  background: transparent;
  color: var(--alx-platform-ink);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

.alx-organization-header__inner {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(100%, calc(var(--alx-header-content-max) + 56px));
  height: 52px;
  min-height: 52px;
  margin: 0 auto;
  /* Stand-alone pages use the same 28px inset as the product header. Pages
     inside a padded shell override this to zero so the two marks align. */
  padding: 0 28px;
}

.alx-organization-header__logo {
  box-sizing: border-box;
  flex: 0 0 auto;
  display: block;
  max-width: 100%;
  height: 40px;
  max-height: 40px;
  width: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  /* Uploaded logos may contain a solid white canvas. Blend that canvas into
     the light platform background while keeping the logo itself unchanged. */
  mix-blend-mode: multiply;
  object-fit: contain;
}

@media (max-width: 760px) {
  .alx-organization-header__inner {
    padding-inline: 16px;
  }
}

/* The Time dashboard already owns the page gutter.  Keeping a second inset
   here was the source of the 28px logo drift visible only on that route. */
.alx-dashboard-shell > .alx-organization-header .alx-organization-header__inner {
  padding-inline: 0;
}

/* Django administration pages render their header inside #container, while
   user-facing pages use their own shells.  Every administration subpage must
   therefore share the full-width 28px product-mark edge instead of falling
   back to the centered content frame based on an app-specific body class. */
body #container > .alx-organization-header .alx-organization-header__inner,
body.admin-page .alx-organization-header .alx-organization-header__inner,
body.closure-admin-page .alx-organization-header .alx-organization-header__inner,
body.app-organization .alx-organization-header .alx-organization-header__inner {
  width: 100%;
  margin-inline: 0;
  padding-inline: 28px;
}

@media (max-width: 760px) {
  body #container > .alx-organization-header .alx-organization-header__inner,
  body.admin-page .alx-organization-header .alx-organization-header__inner,
  body.closure-admin-page .alx-organization-header .alx-organization-header__inner,
  body.app-organization .alx-organization-header .alx-organization-header__inner {
    padding-inline: 16px;
  }
}