/* crm.css - site styles, loaded after Bootstrap so these win */

:root {
  --bg: #f4f5f7;
  --card: #fff;
  --muted: #6b7280;
  --line: #e3e6eb;
  --new: #f59e0b;
  --ok: #16a34a;
  --bad: #dc2626;
}

/* Page frame: footer stays at the bottom on short pages */
body {
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }

/* ---------- navigation bar ---------- */

/* Same orange-to-yellow gradient as the myinfo.com menu bar */
.navbar-myinfo {
  background: linear-gradient(#ffa751, #ffe259);
  min-height: 50px;                      /* same as myinfo.com: 50px high, no padding */
  padding-top: 0;
  padding-bottom: 0;
}
.navbar-myinfo .navbar-brand { padding-top: 0; padding-bottom: 0; }
.navbar-logo img { height: 50px; width: auto; display: block; }   /* same size as on myinfo.com */
.brand-crm {
  margin-left: 14px;
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
  color: #1d1d1d;
}
.brand-crm:hover, .brand-crm:focus { color: #000; }

.navbar-myinfo .nav-link { font-weight: 500; color: rgba(0, 0, 0, .75); }
.navbar-myinfo .nav-link:hover,
.navbar-myinfo .nav-link:focus { color: #000; }
.navbar-myinfo .nav-link.active { color: #000; border-bottom: 2px solid #000; }
.navbar-myinfo .navbar-toggler { border-color: rgba(0, 0, 0, .35); }
.navbar-myinfo .dropdown-menu { border: 0; box-shadow: 0 8px 24px rgba(0, 0, 0, .15); }
.navbar-myinfo .dropdown-item.active,
.navbar-myinfo .dropdown-item:active { background: #ffa751; color: #000; }

@media (max-width: 991.98px) {           /* stacked mobile menu */
  .navbar-myinfo .nav-link.active { border-bottom: 0; font-weight: 700; }
  .navbar-myinfo .d-flex { padding: 8px 0 4px; }
}

/* ---------- content cards ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}
.card-box {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 5px solid var(--new);
  border-radius: 8px;
  padding: 12px;
}

/* ---------- footer ---------- */

.site-footer {
  padding: 16px 0;
  border-top: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  font-size: 14px;
  text-align: left;
}

.m5t {
    font-size: 0.8em;
}

table.m5t {
    margin: 2px;
    padding: 2px;
    text-align: left;
    border-collapse: collapse;
}

table.m5t td, table.m5t th {
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 1px;
    padding-bottom: 1px;
    border: 1px solid blue;
    background-color: white;
}