/* ============================================================
   Simple.css -- login / standalone pages

   Builds on the tokens and base styles in ChappTrack.css, which
   login.aspx links FIRST. This file no longer @imports it: an
   @import URL cannot carry the "?v=" cache-busting token, so an
   edited ChappTrack.css would have stayed cached on this page.
   Both sheets are linked explicitly instead -- which also avoids
   the extra blocking round trip @import costs.
   ============================================================ */

/* The login page has no master page, so it supplies its own
   page padding and centres the card vertically. */
body {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 100vh;
   padding: var(--space-xl) var(--space-md);
}

/* ---------- Card ---------- */

table.Main.LoginCard {
   width: 100% !important;
   max-width: 380px;
   margin: 0 auto;
   background-color: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-lg);
   overflow: hidden;
}

table.Main.LoginCard td.Main {
   background-color: transparent;
   padding: 0;
   vertical-align: middle;
}

/* neutralise the master-page footer rule inherited from ChappTrack.css */
table.Main.LoginCard > tbody > tr:last-child > td.Main {
   border-top: 0;
   padding-top: 0;
}

/* ---------- Header ---------- */

table.Main.LoginCard td.LoginHead {
   padding: var(--space-lg) var(--space-lg) var(--space-md);
   border-bottom: 1px solid var(--color-border-subtle);
   text-align: center;
   white-space: nowrap;
}

/* inline SVG key -- transparent, and picks up the theme colour via
   currentColor (which is why it is inlined rather than an <img>) */
table.Main.LoginCard td.LoginHead .LoginKey {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 34px;
   height: 34px;
   margin-right: var(--space-sm);
   background-color: var(--color-primary-muted);
   border-radius: var(--radius-pill);
   color: var(--color-primary-hover);
   vertical-align: middle;
}

table.Main.LoginCard td.LoginHead .LoginKey svg {
   display: block;
}

table.Main.LoginCard td.LoginHead .LabelText {
   color: var(--color-text-heading);
   font-size: var(--font-size-lg);
   font-weight: 600;
   vertical-align: middle;
}

/* ---------- Fields ---------- */

table.Main.LoginCard td.LoginLabel {
   width: 34%;
   padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-lg);
   text-align: right;
   white-space: nowrap;
}

table.Main.LoginCard td.LoginField {
   width: 66%;
   padding: var(--space-sm) var(--space-lg) var(--space-sm) 0;
}

/* first field row gets a little breathing room under the header */
table.Main.LoginCard > tbody > tr:nth-child(2) > td.Main {
   padding-top: var(--space-lg);
}

table.Main.LoginCard td.LoginField input[type="text"],
table.Main.LoginCard td.LoginField input[type="password"] {
   width: 100%;
}

/* the login labels are single words, so drop the global uppercase
   treatment and keep them quiet and readable */
table.Main.LoginCard td.LoginLabel .Label {
   color: var(--color-text-secondary);
   font-size: var(--font-size-sm);
   font-weight: 600;
   letter-spacing: 0;
   text-transform: none;
}

/* ---------- Validation message ---------- */

#lblInvalidLogin {
   display: inline-block;
   padding: 6px 10px;
   background-color: var(--color-error-bg);
   border: 1px solid var(--color-error-border);
   border-radius: var(--radius-sm);
   color: var(--color-error);
   font-size: var(--font-size-sm);
   font-weight: 600;
   letter-spacing: 0;
   text-transform: none;
}

/* ---------- Footer / submit ---------- */

table.Main.LoginCard td.LoginFoot {
   padding: var(--space-md) var(--space-lg) var(--space-lg);
   text-align: right;
}

table.Main.LoginCard td.LoginFoot input[type="submit"] {
   min-width: 110px;
}

/* ---------- Narrow screens ---------- */

@media (max-width: 420px) {
   body {
      align-items: flex-start;
      padding: var(--space-md) var(--space-sm);
   }

   table.Main.LoginCard td.LoginLabel {
      width: auto;
      padding: var(--space-sm) 0 2px var(--space-md);
      text-align: left;
   }

   table.Main.LoginCard td.LoginField {
      padding: 0 var(--space-md) var(--space-sm);
   }

   /* stack label above field */
   table.Main.LoginCard td.LoginLabel,
   table.Main.LoginCard td.LoginField {
      display: block;
      width: auto;
   }

   table.Main.LoginCard td.LoginHead,
   table.Main.LoginCard td.LoginFoot {
      padding-left: var(--space-md);
      padding-right: var(--space-md);
   }
}