@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
  --sob-mint: #D8E8E6;
  --sob-mint-light: #F2F7F6;
  --sob-mint-dark: #B8D6D1;
  --sob-charcoal: #3B4246;
  --sob-charcoal-light: #525B60;
  --sob-gold: #EBB328;
  --sob-gold-hover: #D9A21B;
  --sob-border: #C8DCD9;
  --sob-white: #FFFFFF;
}

html {
  font-size: 15px;
  position: relative;
  min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--sob-charcoal);
  background-color: var(--sob-mint-light);
  margin-bottom: 60px;
}

/* Header & Navbar */
.navbar-sob {
  background-color: var(--sob-mint) !important;
  border-bottom: 1px solid var(--sob-border);
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}

.navbar-sob .nav-link {
  color: var(--sob-charcoal) !important;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.45rem 0.85rem !important;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.navbar-sob .nav-link:hover,
.navbar-sob .nav-link.active {
  color: #0D5C53 !important;
  background-color: rgba(255, 255, 255, 0.55);
}

.navbar-sob .dropdown-menu {
  border-radius: 14px;
  padding: 0.5rem;
  min-width: 230px;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
}

.navbar-sob .dropdown-item {
  border-radius: 8px;
  transition: all 0.15s ease-in-out;
}

.navbar-sob .dropdown-item:hover {
  background-color: var(--sob-mint-light);
  color: #0D5C53;
  transform: translateX(4px);
}

.phone-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  border: 1.5px solid var(--sob-charcoal);
  border-radius: 50px;
  color: var(--sob-charcoal);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: all 0.2s ease;
}

.phone-badge:hover {
  background-color: var(--sob-charcoal);
  color: var(--sob-white);
}

/* Hero Section */
.hero-sob {
  background-color: var(--sob-mint);
  border-radius: 0 0 32px 32px;
  padding: 4rem 1rem;
  position: relative;
  overflow: hidden;
}

.hero-sob-watermark {
  position: absolute;
  right: -5%;
  bottom: -20%;
  width: 450px;
  opacity: 0.15;
  pointer-events: none;
}

.hero-title {
  font-weight: 700;
  font-size: 3rem;
  color: var(--sob-charcoal);
  line-height: 1.15;
}

.hero-subtitle {
  color: var(--sob-charcoal-light);
  font-size: 1.25rem;
  font-weight: 400;
}

/* Custom Buttons */
.btn-sob-primary {
  background-color: var(--sob-charcoal);
  color: var(--sob-white);
  font-weight: 600;
  border: none;
  padding: 0.6rem 1.5rem;
  border-radius: 50px;
  transition: all 0.2s ease;
}

.btn-sob-primary:hover {
  background-color: #24292C;
  color: var(--sob-white);
  transform: translateY(-1px);
}

.btn-sob-gold {
  background-color: var(--sob-gold);
  color: var(--sob-charcoal);
  font-weight: 600;
  border: none;
  padding: 0.6rem 1.5rem;
  border-radius: 50px;
  transition: all 0.2s ease;
}

.btn-sob-gold:hover {
  background-color: var(--sob-gold-hover);
  color: var(--sob-charcoal);
  transform: translateY(-1px);
}

.btn-sob-outline-gold {
  background-color: transparent;
  color: var(--sob-charcoal);
  border: 2px solid var(--sob-gold);
  font-weight: 600;
  padding: 0.5rem 1.5rem;
  border-radius: 50px;
  transition: all 0.2s ease;
}

.btn-sob-outline-gold:hover {
  background-color: var(--sob-gold);
  color: var(--sob-charcoal);
}

/* Cards & Tables */
.card-sob {
  background-color: var(--sob-white);
  border: 1px solid var(--sob-border);
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(59, 66, 70, 0.04);
}

.table-sob {
  margin-bottom: 0;
}

.table-sob thead {
  background-color: var(--sob-mint-light);
}

.table-sob th {
  color: var(--sob-charcoal);
  font-weight: 600;
  font-size: 0.95rem;
  border-bottom: 2px solid var(--sob-border);
  padding: 1rem;
}

.table-sob td {
  padding: 1rem;
  vertical-align: middle;
  border-bottom: 1px solid #EEF5F4;
}

.table-sob tbody tr:hover {
  background-color: #F8FCFC;
}

/* Badges */
.badge-sob-mint {
  background-color: var(--sob-mint);
  color: var(--sob-charcoal);
  font-weight: 600;
}

.badge-sob-gold {
  background-color: var(--sob-gold);
  color: var(--sob-charcoal);
  font-weight: 600;
}

/* Radio Switcher Pill */
.radio-pill-container {
  background-color: var(--sob-white);
  border: 1px solid var(--sob-border);
  border-radius: 50px;
  padding: 0.35rem;
  display: inline-flex;
  gap: 0.25rem;
}

.radio-pill-item {
  margin: 0;
}

.radio-pill-item input[type="radio"] {
  display: none;
}

.radio-pill-item label {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--sob-charcoal-light);
}

.radio-pill-item input[type="radio"]:checked + label {
  background-color: var(--sob-charcoal);
  color: var(--sob-white);
  box-shadow: 0 2px 8px rgba(59, 66, 70, 0.15);
}

/* Form Controls */
.form-control:focus, .form-select:focus {
  border-color: var(--sob-gold);
  box-shadow: 0 0 0 0.25rem rgba(235, 179, 40, 0.25);
}

/* Rich Themed Section Cards for Forms */
.section-card {
  background-color: #FAFCFC;
  border: 1px solid #D2E4E1;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(45, 80, 75, 0.03);
  overflow: hidden;
  transition: all 0.2s ease-in-out;
}

.section-card:hover {
  border-color: #B2D8D2;
  box-shadow: 0 6px 18px rgba(45, 80, 75, 0.06);
}

.section-header-bar {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.section-header-mint {
  background: linear-gradient(90deg, #E6F3F1 0%, #F5FAFA 100%);
  border-left: 4px solid #206E66;
}

.section-header-gold {
  background: linear-gradient(90deg, #FFF9EA 0%, #FFFDF7 100%);
  border-left: 4px solid var(--sob-gold);
}

.section-header-blue {
  background: linear-gradient(90deg, #EEF4FD 0%, #F8FAFF 100%);
  border-left: 4px solid #2B6CB0;
}

.section-header-grey {
  background: linear-gradient(90deg, #F0F4F4 0%, #F8FAF9 100%);
  border-left: 4px solid #3B4246;
}

/* Styled Readonly Inputs */
.form-control-readonly {
  background-color: #F3FAF8 !important;
  border: 1px solid #C5E2DC !important;
  color: #1A4D46 !important;
  font-weight: 600;
}

.form-control-sob {
  background-color: #FFFFFF;
  border: 1px solid #C8DDD9;
  color: var(--sob-charcoal);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.form-control-sob:focus {
  background-color: #FFFFFF;
  border-color: var(--sob-gold);
  box-shadow: 0 0 0 3px rgba(235, 179, 40, 0.2);
}

/* Footer */
.footer-sob {
  background-color: var(--sob-mint);
  border-top: 1px solid var(--sob-border);
  color: var(--sob-charcoal);
  padding: 1.5rem 0;
}

/* Fractional Spacing Utilities (Support for .5 spacing) */
.py-0\.5 { padding-top: 0.125rem !important; padding-bottom: 0.125rem !important; }
.py-1\.5 { padding-top: 0.375rem !important; padding-bottom: 0.375rem !important; }
.py-2\.5 { padding-top: 0.625rem !important; padding-bottom: 0.625rem !important; }
.px-1\.5 { padding-left: 0.375rem !important; padding-right: 0.375rem !important; }
.px-2\.5 { padding-left: 0.625rem !important; padding-right: 0.625rem !important; }
.px-3\.5 { padding-left: 0.875rem !important; padding-right: 0.875rem !important; }
.p-1\.5 { padding: 0.375rem !important; }
.p-2\.5 { padding: 0.625rem !important; }
.p-3\.5 { padding: 0.875rem !important; }
.me-0\.5 { margin-right: 0.125rem !important; }
.me-1\.5 { margin-right: 0.375rem !important; }
.mt-0\.5 { margin-top: 0.125rem !important; }
.gap-1\.5 { gap: 0.375rem !important; }

/* Ultra-subtle Box Shadow */
.shadow-2xs {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

/* Journeys dashboard and reports (Pages/Shared/_Dashboard.cshtml, Pages/Reports) */
.dash-card { border-radius: 16px; padding: 0.9rem 1rem; display: block; text-decoration: none; color: var(--sob-charcoal); height: 100%; transition: transform .15s ease, box-shadow .15s ease; }
.dash-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(59, 66, 70, .08); color: var(--sob-charcoal); }
.dash-card.active { outline: 2px solid var(--sob-gold); }
.dash-card .num { font-size: 1.9rem; font-weight: 800; line-height: 1.1; }
.dash-card .lbl { font-size: .78rem; font-weight: 600; color: var(--sob-charcoal-light); }
.dash-alert { border-radius: 16px; overflow: hidden; }
.dash-alert > summary { list-style: none; cursor: pointer; padding: .8rem 1rem; display: flex; align-items: center; gap: .75rem; }
.dash-alert > summary::-webkit-details-marker { display: none; }
.dash-alert-red { border: 1px solid #f5c2c0; } .dash-alert-red > summary { background: #C0392B; color: #fff; }
.dash-alert-orange { border: 1px solid #f6d3a8; } .dash-alert-orange > summary { background: #FFF4E5; color: #9a5300; }
.dash-alert .dash-list a { display: flex; gap: .75rem; padding: .55rem 1rem; border-top: 1px solid #f1f1f1; text-decoration: none; color: var(--sob-charcoal); font-size: .85rem; }
.dash-alert .dash-list a:hover { background: #fafafa; }
.dash-chip { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid var(--sob-border); border-radius: 50px; padding: .35rem .8rem; font-size: .82rem; text-decoration: none; color: var(--sob-charcoal); background: #fff; }
.dash-chip:hover, .dash-chip.active { border-color: var(--sob-gold); background: #FFF9EA; color: var(--sob-charcoal); }
.dash-chip .cnt { background: var(--sob-charcoal); color: #fff; border-radius: 50px; padding: 0 .5rem; font-weight: 700; font-size: .75rem; }
.dash-bar-row { display: grid; grid-template-columns: minmax(90px, 38%) 1fr auto; align-items: center; gap: .5rem; text-decoration: none; color: var(--sob-charcoal); font-size: .8rem; padding: .2rem .25rem; border-radius: 8px; }
.dash-bar-row:hover { background: var(--sob-mint-light); color: var(--sob-charcoal); }
.dash-bar-row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-bar { height: 12px; border-radius: 0 6px 6px 0; min-width: 4px; }
.dash-donut-seg { cursor: pointer; transition: opacity .15s; }
.dash-donut-seg:hover { opacity: .8; }
.dash-legend a { display: flex; align-items: center; gap: .4rem; text-decoration: none; color: var(--sob-charcoal); font-size: .8rem; padding: .1rem .25rem; border-radius: 6px; }
.dash-legend a:hover { background: var(--sob-mint-light); }
.dash-legend .sw { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.dash-cal-item { display: block; text-decoration: none; color: var(--sob-charcoal); border-bottom: 1px solid #EEF5F4; padding: .45rem 0; font-size: .82rem; }
.dash-cal-item:last-child { border-bottom: 0; }
.dash-u { font-size: .7rem; font-weight: 700; border-radius: 50px; padding: .15rem .55rem; white-space: nowrap; }
.dash-u-overdue { background: #FDECEA; color: #B42318; } .dash-u-critical { background: #FDECEA; color: #C0392B; }
.dash-u-warning { background: #FFF4E5; color: #9a5300; } .dash-u-upcoming { background: #FFF9EA; color: #8a6510; } .dash-u-far { background: #EAF4F3; color: #1f6f6f; }
.dash-progress { height: 8px; border-radius: 50px; background: #E2ECE9; overflow: hidden; min-width: 70px; }
.dash-progress > div { height: 100%; background: linear-gradient(90deg, #00A896, #0D5C53); }
.dash-filters .form-label { font-size: .72rem; font-weight: 700; color: var(--sob-charcoal-light); margin-bottom: .2rem; }
@media print {
    .hero-sob, .dash-filters, .no-print, nav, footer { display: none !important; }
    .dash-alert:not([open]) .dash-list { display: none; }
}

/* Menu links stay on one line (the menu collapses below 1200px). */
.navbar-sob .navbar-nav .nav-link { white-space: nowrap; }

/* 1200-1599 px: the full top menu is tight — a little less padding between
   links, and the account button shows only the initial (the name is in its menu). */
@media (min-width: 1200px) and (max-width: 1599.98px) {
  #navbarMainContent .nav-link.px-3 { padding-left: 0.6rem !important; padding-right: 0.6rem !important; }
  .nav-user-name { display: none !important; }
}
/* the Home link comes back from 1500 px (the logo goes home too) */
@media (min-width: 1200px) and (max-width: 1499.98px) {
  .nav-home { display: none !important; }
}