/* fastinvoicingservices.com -- app styles layered over Bootstrap 5 */

:root {
  --fi-green:      #1f7a3d;
  --fi-green-dark: #17612f;
  --fi-green-soft: #e8f4ec;
}

body { -webkit-tap-highlight-color: transparent; }

/* ---------------------------------------------------------------- navbar */
.app-navbar {
  background: var(--fi-green);
  box-shadow: 0 1px 3px rgb(0 0 0 / 12%);
}
.app-navbar .nav-link            { color: rgb(255 255 255 / 78%); }
.app-navbar .nav-link:hover,
.app-navbar .nav-link.active     { color: #fff; }
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-right: .25rem;
  border-radius: .4rem;
  background: #fff;
  color: var(--fi-green);
  font-size: .8rem;
  font-weight: 700;
}

/* ------------------------------------------------------- auth (login/register) */
.auth-body {
  min-height: 100vh;
  background: linear-gradient(160deg, var(--fi-green) 0%, var(--fi-green-dark) 55%, #0f3d1e 100%);
}
.auth-main {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem 1rem;
  flex-direction: column;
}
.auth-card {
  width: 100%;
  max-width: 27rem;
  border: 0;
  border-radius: 1rem;
  box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 25%);
}
.auth-main .alert { width: 100%; max-width: 27rem; }

/* ------------------------------------------------------------ stat tiles */
.stat-card {
  border: 0;
  border-radius: .85rem;
  box-shadow: 0 1px 2px rgb(16 24 40 / 6%), 0 1px 3px rgb(16 24 40 / 10%);
}
.stat-card .stat-label {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #667085;
}
.stat-card .stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
}
.stat-card .stat-meta { font-size: .8125rem; color: #667085; }
.stat-accent { height: .25rem; border-radius: .85rem .85rem 0 0; }

.panel {
  border: 0;
  border-radius: .85rem;
  box-shadow: 0 1px 2px rgb(16 24 40 / 6%), 0 1px 3px rgb(16 24 40 / 10%);
}

/* Comfortable touch targets -- this gets used one-handed in a truck. */
@media (max-width: 576px) {
  .btn, .form-control, .form-select { min-height: 2.75rem; }
  .stat-card .stat-value { font-size: 1.5rem; }
}