:root {
  --ink: #15202b;
  --muted: #5b6b7a;
  --surface: #ffffff;
  --page: #f0f3f7;
  --accent: #1a5f6e;
  --accent-dark: #134851;
  --nav: #0d2a33;
  --line: #d5dee6;
  --google-border: #dadce0;
}

html, body {
  min-height: 100%;
}

body {
  background:
    radial-gradient(ellipse 80% 50% at 0% -10%, #d7e6ec 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 0%, #dde8e4 0%, transparent 50%),
    var(--page);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  font-family: "Segoe UI", "Candara", "Calibri", sans-serif;
}

main { flex: 1 0 auto; }
.site-footer { flex-shrink: 0; }

.app-nav {
  background: var(--nav);
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
}

.brand-mark-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.4rem;
  background: #2a8a9a;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.brand-mark-lg {
  width: 3.25rem;
  height: 3.25rem;
  font-size: 0.85rem;
}

.brand-text {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.login-body {
  background:
    linear-gradient(160deg, #0d2a33 0%, #1a5f6e 45%, #e8eef2 45%, #f0f3f7 100%);
}

.login-wrap {
  min-height: calc(100vh - 2rem);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 0;
}

.login-card {
  width: 100%;
  max-width: 26rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  padding: 2rem 1.75rem;
  box-shadow: 0 12px 40px rgba(13, 42, 51, 0.12);
}

.login-brand { text-align: center; }

.btn-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  background: #fff;
  border: 1px solid var(--google-border);
  color: #3c4043;
  font-weight: 500;
  padding: 0.7rem 1rem;
  border-radius: 0.5rem;
}

.btn-google:hover,
.btn-google:focus {
  background: #f8f9fa;
  border-color: #c6c9ce;
  color: #202124;
}

.google-icon { flex-shrink: 0; }

.surface {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  box-shadow: 0 1px 2px rgba(13, 42, 51, 0.04);
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.65rem;
}

.home-hero h1 { letter-spacing: -0.02em; }

.avatar-sm, .avatar-md, .avatar-lg {
  border-radius: 50%;
  object-fit: cover;
  background: #d9e4e8;
}

.btn-primary {
  background-color: var(--accent);
  border-color: var(--accent);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--accent-dark);
  border-color: var(--accent-dark);
}

.badge-pin { background: var(--accent); }

.link-tile-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  background: #e4eef0;
  color: var(--accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.quick-link-card:hover,
.resource-tile:hover,
.link-tile:hover {
  border-color: #b7c9d1;
}

.stretched-link-title {
  color: inherit;
  text-decoration: none;
}
.stretched-link-title:hover { color: var(--accent-dark); }

.content-body { line-height: 1.65; }

.site-footer {
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,0.65);
}

.table thead th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}

.updates-list li:last-child {
  border-bottom: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

a { color: var(--accent-dark); }

.status-scheduled { background-color: #3d6b99; }
.status-in-progress { background-color: #0d6e6e; }
.status-delayed { background-color: #b86b1a; }
.status-completed { background-color: #2f7a46; }
.status-cancelled { background-color: #8a3a3a; }

.user-menu-btn {
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
  padding: 0.25rem 0.55rem;
}
.user-menu-btn:hover,
.user-menu-btn:focus,
.user-menu-btn.show {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

@media (max-width: 991.98px) {
  .navbar .order-lg-last {
    margin-left: auto;
  }
}