/*
 * Additions to the prototype's stylesheet, kept in a separate file so
 * css/app.css stays byte-for-byte identical to AVSCNC_CRM.html and can be
 * diffed against it.
 *
 * Only two things live here: the sign-in screen, which the prototype had no
 * need for, and the banner that marks a panel still showing demo data. Both
 * reuse the prototype's palette (#3d6d99 on #f4f4f4) and its type scale, so
 * nothing looks bolted on.
 */

/* The app is hidden until the session is known, so a signed-out visitor never
   sees a flash of someone's dashboard before the sign-in screen replaces it. */
.wrap[hidden],
.sign-in[hidden] {
  display: none !important;
}

/* ---------------------------------------------------------------- sign in */

.sign-in {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
  background: #f4f4f4;
}
.sign-in-box {
  width: 340px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-top: 3px solid #3d6d99;
  border-radius: 4px;
  overflow: hidden;
}
.sign-in-head {
  padding: 18px 18px 14px;
  border-bottom: 1px solid #f0f0f0;
}
.sign-in-brand {
  font-size: 17px;
  font-weight: 900;
  font-style: italic;
  color: #3d6d99;
}
.sign-in-tag {
  font-size: 10px;
  color: #aaa;
  margin-top: 2px;
  font-style: italic;
}
.sign-in-body {
  padding: 14px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sign-in-body label {
  font-size: 10px;
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: block;
  margin-bottom: 3px;
}
.sign-in-body input {
  width: 100%;
  font-size: 13px;
  padding: 7px 9px;
  border: 1px solid #ddd;
  border-radius: 3px;
}
.sign-in-body input:focus {
  outline: none;
  border-color: #3d6d99;
}
.sign-in-body .btn {
  justify-content: center;
  padding: 8px 12px;
  font-size: 13px;
}
.sign-in-note {
  font-size: 10px;
  color: #bbb;
  text-align: center;
  line-height: 1.6;
}

/* --------------------------------------------------------- demo-data mark */

/*
 * A panel whose numbers are still the prototype's invented ones carries this
 * banner until it is wired to the database. It is deliberately loud: a figure
 * on an accounting screen that looks like a real balance and is not is worse
 * than an empty screen, and these pages are going in front of a client.
 */
.demo-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 3px;
  font-size: 12px;
  margin-bottom: 10px;
  font-weight: 600;
  background: #fff3e0;
  border: 1px solid #f0c060;
  color: #996600;
}
.demo-note b {
  font-weight: 800;
}

/*
 * A screen this role cannot open is not in the menu.
 *
 * !important because setRole() sets style.display on a few of these buttons
 * directly -- Employee master and Approvals -- and an inline style beats a
 * stylesheet rule. Permission is the stronger claim of the two, so it wins.
 */
.nav-btn[data-no-access],
.sb-section[data-no-access] {
  display: none !important;
}

/* Who is signed in, under "Logged in as" in the sidebar. */
.sb-user {
  font-size: 10px;
  color: #999;
  margin-top: 2px;
  margin-bottom: 6px;
  line-height: 1.5;
  word-break: break-word;
}
.sb-user b {
  color: #555;
  display: block;
  font-size: 11px;
}