/* The portal's own layout, carried over from the React portal (App.css,
   LoginForm.css, LandingPage.css) so the Blazor portal looks the same. */
/* .app, .empty-state, .form-group, .error-message and .hint are platform
   components now — atlas-components.css, taken by all six tools. 1 block(s)
   removed. Small rules are exactly the ones nobody hoists, so they sit
   duplicated for years and quietly disagree (ACT-87). */



















/* .user-info is atlas-appbar.css's: same two declarations plus the line-height,
   the flex behaviour and the min-width that let the block truncate instead of
   pushing the bar wide. This copy shadowed none of that but restated enough of
   it to look authoritative. */

.user-menu-trigger {
  cursor: pointer;
}



/* POSITION ONLY. Surface, edge, corner, lift and every item rule come from
   .atlas-popup in atlas-fluent.css, so this menu and BIReports' and the report
   views menu are one thing. What was here — `white`, #1f2937, #eee, #f3f4f6 and
   a hand-rolled shadow — was a fourth description of a panel the platform
   already had, and it is why they never quite matched (ACT-85). */
.user-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--space-3);
  min-width: 180px;
  z-index: 1000;
  padding: var(--space-1);
}



/* .user-name / .user-role are painted by atlas-appbar.css, for every tool, at
   BIReports' values. The copies that were here were the portal's own — weight
   600 at 0.8rem on literal white — and they are what made this header the odd
   one out. Deleted rather than tokenised: a second declaration of a platform
   rule is the drift, whatever colours it names (ACT-79). */

.logout-btn {
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: background-color 0.2s;
}



.app-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}



.login-container {
  width: 100%;
  max-width: 400px;
}



/* A THIRD OF THE VERTICAL PADDING IT HAD. 50px above the first field and 10px
   below the last put 60px of nothing around a 400px column, and the card came
   out 553px tall for six controls. Horizontal is --space-6 rather than the 30px
   literal it was; the sides did not need to move, but a number typed into an app
   stylesheet is how the next one drifts. */
/* --space-6 above the logo, --space-3 below the last link. Not symmetric on
   purpose: the logo is a 120px block that needs room to sit in, and the link is
   a line of 13px text that does not. Matching the two by the numbers put 25px
   under a single underlined line, which reads as the card trailing off.

   The bottom is a --space-1 short of --space-3 because the link carries that
   much margin of its own, so the two sum to --space-3 exactly. */
.login-card {
    padding: var(--space-6) var(--space-6) calc(var(--space-3) - var(--space-1));
}



.login-logo-section {
  text-align: center;
  margin-bottom: var(--space-3);
}



.login-logo {
  width: 120px;
  height: 120px;
  object-fit: contain;
}



@media (max-width: 768px) {


  .app-main {
    padding: 10px;
  }

  .login-card {
    padding: 20px;
  }
}



/* --- One-line result of an action taken from the header --------------------
 * Today that is only "Add a device": the email either went or it did not, and
 * the dashboard has nowhere else to say so.
 *
 * The branch this came back from drew it with inline hex — a #e6f4ea green and
 * a #fdecea pink, neither of which is on the platform. Success and danger are
 * the status tokens, and the red is Pomegranate like everywhere else. */
.app-message {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  max-width: 600px;
  margin: var(--space-4) auto;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
  color: var(--color-success);
  font-size: var(--font-size-body);
}



.app-message--error {
  background: var(--color-danger-bg);
  border-color: var(--color-danger-border);
  color: var(--color-danger);
}



.app-message__close {
  background: none;
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  color: inherit;
}


/* .app, .empty-state, .form-group, .error-message and .hint are platform
   components now — atlas-components.css, taken by all six tools. 3 block(s)
   removed. Small rules are exactly the ones nobody hoists, so they sit
   duplicated for years and quietly disagree (ACT-87). */

.login-form-container {
  width: 100%;
}


/* The field and the button are the PLATFORM's: fill, edge, radius, height,
   type and every state come from atlas-fluent.css, exactly as they do inside the
   tools. This screen had its own — a pale #f8f9fa field with a Bootstrap-blue
   focus edge, under a 48px near-black button with 4px corners — which is why the
   first screen anyone sees looked nothing like the four behind it. All that is
   left here is width. */
.form-control {
  width: 100%;
}


/* The actions column takes the width of its widest child — "Sign in with a
   passkey" — and centres itself. Both buttons then fill that column, so they
   are equal to each other and no wider than the longer label needs, instead of
   both spanning the whole form. */
.login-actions {
  display: flex;
  flex-direction: column;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  /* --button-gap IS THE PLATFORM'S OWN KNOB, so this tightens the clearance
     instead of fighting it. atlas-fluent.css gives every button
     margin-block: var(--button-gap, 0.5em) so two buttons never sit hard against
     each other; at 8px a side that was 32px inside a six-control column. Setting
     the variable here keeps the rule intact and scopes the change to this stack. */
  --button-gap: var(--space-1);
}


.login-button {
  width: 100%;
}


.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}


/* The platform gives every .form-group --space-5 below it, which is right on a
   settings page and too much in a two-field sign-in. Scoped to this form; the
   platform default is untouched. */
.login-form .form-group {
  margin-bottom: var(--space-2);
}


@media (max-width: 768px) {
  .login-form-container {
    padding: 0 10px;
  }
}


/* ACT-60 — the passwordless sign-in button, and the rule between it and the
   password form. Restored with the button itself: the deploy that replaced this
   app with a build from the repo dropped both, because the repo had never
   carried the passkey-alone path that dev01 was serving. */
.login-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin: var(--space-2) 0;
}


.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1 1;
  height: 1px;
  background: var(--color-border);
}

.landing-page {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 40px 20px;
}

.welcome-section {
  margin-bottom: 32px;
}

.welcome-section h2 {
  color: var(--color-text-strong);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 4px 0;
}

.welcome-subtitle {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin: 0;
}

.applications-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* The tile is a <fluent-button>. Its layout and its box are on ::part(control)
   and ::part(content) in atlas-fluent.css — a host rule reaches neither, which
   is why display:flex, gap and padding sat here doing nothing while the tile
   rendered as an ordinary 30px button with its contents spilling out. */

.app-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-2);
  border-radius: var(--radius);
}

.app-content {
  flex: 1;
  min-width: 0;
}

.app-content h3 {
  margin: 0 0 2px 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-strong);
}

.app-description {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.app-arrow {
  flex-shrink: 0;
  color: var(--color-text-subtle);
  transition: color 0.15s;
}

/* ACT-69 — a tool this user is not entitled to. Shown, not hidden: the point is
   that people can see what exists and ask for it. Muted rather than removed, no
   pointer affordance, and no hover lift, so it reads as unavailable before it is
   clicked. THE BOX ITSELF IS UNCHANGED; only its contents recede, which keeps the
   grid rhythm identical whether a tile is active or not — greying the card's own
   surface turns the row into a block of filled panels and loses that.

   Styling sits on the host and on the inner elements, NOT on ::part(control) —
   the tile's box lives on the part and restating it here is how this file ended
   up with rules that reached nothing (see the note at the top). */
fluent-button.application-card.is-unavailable {
  cursor: default;
}

fluent-button.application-card.is-unavailable::part(control) {
  cursor: default;
}

.is-unavailable .app-icon {
  opacity: 0.45;
}

.is-unavailable .app-content h3,
.is-unavailable .app-description {
  color: var(--color-text-subtle);
}

/* THE LOCKED TILE'S TOOLTIP. Text comes from data-tooltip so it stays with the
   tile metadata in LandingPage.jsx and never has to be duplicated here.
   A CSS bubble rather than the native title attribute: the blurb is a sentence
   or two and the browser's own tooltip renders it as one long unstyled strip
   after a delay nobody controls.
   Colours are the shell's — this is the same dark surface the app bar uses, not
   a second set of greys invented for one bubble (ACT-70). */
.application-card.is-unavailable[data-tooltip] {
  position: relative;
}

.application-card.is-unavailable[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 20px;
  right: 20px;
  top: calc(100% - 6px);
  z-index: 10;
  background: var(--color-shell-bg);
  color: var(--color-on-dark);
  font-size: 0.8rem;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  padding: 8px 10px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s 0.25s, visibility 0.15s 0.25s;
}

.application-card.is-unavailable[data-tooltip]:hover::after,
.application-card.is-unavailable[data-tooltip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

/* Carries the same words to a screen reader, which cannot read a ::after. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 768px) {
  .landing-page {
    padding: 24px 16px;
  }

  fluent-button.application-card::part(control) {
    padding: var(--space-3);
  }
}