/* =====================================================================
   ABC Global Solutions — Bootstrap 5.3 brand theme
   Clean, modern, friendly. Brand blue kept from the original identity.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root {
  --brand-50:  #f0f6fc;
  --brand-100: #dcebf7;
  --brand-200: #b9d7ee;
  --brand-300: #8ebbdf;
  --brand-400: #5f9ac9;
  --brand-500: #3f7cae;
  --brand-600: #326492;
  --brand-700: #2b5277;
  --brand-800: #274563;
  --brand-900: #1a2f45;
  --brand: var(--brand-600);
  --growth: #2e7d5b;
  --growth-100: #e3f2eb;
  --amber-100: #fdf3e0;
  --amber-700: #9a6b1f;

  --bs-body-font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --bs-body-color: #22303c;
  --bs-body-bg: #f7f9fb;
  --bs-border-color: #e3e9ef;
  --bs-link-color-rgb: 50, 100, 146;
  --bs-link-hover-color-rgb: 43, 82, 119;
}

body { font-family: var(--bs-body-font-family); background: var(--bs-body-bg); color: var(--bs-body-color); }

h1, h2, h3, h4, h5, .display-3, .display-4, .display-5, .navbar-brand, .fw-heading {
  font-family: 'Plus Jakarta Sans', var(--bs-body-font-family);
  font-weight: 700;
  letter-spacing: -.015em;
}

/* ---- Bootstrap component recolors (5.3 CSS vars) ---- */
.btn-primary {
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-700);
  --bs-btn-hover-border-color: var(--brand-700);
  --bs-btn-active-bg: var(--brand-800);
  --bs-btn-active-border-color: var(--brand-800);
  --bs-btn-disabled-bg: var(--brand-300);
  --bs-btn-disabled-border-color: var(--brand-300);
}
.btn-outline-primary {
  --bs-btn-color: var(--brand);
  --bs-btn-border-color: var(--brand-300);
  --bs-btn-hover-bg: var(--brand-50);
  --bs-btn-hover-color: var(--brand-700);
  --bs-btn-hover-border-color: var(--brand-400);
  --bs-btn-active-bg: var(--brand-100);
  --bs-btn-active-color: var(--brand-800);
  --bs-btn-active-border-color: var(--brand-400);
}
.text-primary { color: var(--brand) !important; }
.bg-primary { background-color: var(--brand) !important; }
.bg-brand-soft { background-color: var(--brand-50); }
.border-primary { border-color: var(--brand-300) !important; }
.text-bg-primary { background-color: var(--brand) !important; }

.badge.text-bg-light { background-color: var(--brand-50) !important; color: var(--brand-700); }
.badge.text-bg-success { background-color: var(--growth) !important; }

.form-control:focus, .form-select:focus {
  border-color: var(--brand-400);
  box-shadow: 0 0 0 .25rem rgba(63, 124, 174, .18);
}
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }

.nav-pills { --bs-nav-pills-link-active-bg: var(--brand); }
.pagination { --bs-pagination-active-bg: var(--brand); --bs-pagination-active-border-color: var(--brand); }

/* ---- Cards ---- */
.card { border: 1px solid var(--bs-border-color); border-radius: 1rem; }
.card-lift { transition: transform .18s ease, box-shadow .18s ease; }
.card-lift:hover { transform: translateY(-3px); box-shadow: 0 .75rem 1.75rem rgba(26, 47, 69, .10); }
.shadow-soft { box-shadow: 0 .35rem 1.25rem rgba(26, 47, 69, .07); }

.rounded-4 { border-radius: 1rem !important; }
.icon-circle {
  width: 48px; height: 48px; flex: none;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--brand-50); color: var(--brand-600);
  font-size: 22px;
}

/* ---- Navbar ---- */
.navbar-abc {
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bs-border-color);
}
.navbar-abc .nav-link { font-weight: 500; color: #3c4c5c; }
.navbar-abc .nav-link:hover, .navbar-abc .nav-link.active { color: var(--brand); }
.brand-mark {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: #fff; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 15px;
}
.brand-sub { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #7b8a99; font-weight: 600; }

/* ---- Hero banner ---- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1000px 460px at 85% -10%, rgba(95, 154, 201, .35), transparent 60%),
    radial-gradient(700px 400px at -10% 110%, rgba(46, 125, 91, .25), transparent 55%),
    linear-gradient(140deg, var(--brand-900) 0%, var(--brand-800) 55%, var(--brand-700) 100%);
  color: #fff;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.5), transparent 70%);
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero h1 { font-weight: 800; letter-spacing: -.02em; }
.hero .lead { color: rgba(255, 255, 255, .82); }
.hero .btn-light { font-weight: 600; color: var(--brand-800); }
.hero .btn-outline-light { --bs-btn-border-color: rgba(255,255,255,.45); font-weight: 600; }
.hero-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .9rem; border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  font-size: .85rem; font-weight: 500;
}
.hero-stat .n { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1; }
.hero-stat .l { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.65); }
.hero-panel {
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 1.25rem;
  backdrop-filter: blur(6px);
}
.hero-panel .step-dot {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.16); font-weight: 700; font-size: .9rem;
}

/* ---- Section helpers ---- */
.section { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.section-eyebrow {
  display: inline-block; font-size: .8rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand-600); margin-bottom: .75rem;
}

/* ---- Dashboard shell ---- */
.dash-wrap { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; }
.dash-side {
  background: #fff; border-right: 1px solid var(--bs-border-color);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; padding: 1.1rem .9rem;
}
.side-label { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #93a1b0; padding: 1.1rem .8rem .4rem; }
.side-nav .nav-link {
  display: flex; align-items: center; gap: .65rem;
  color: #45566b; font-weight: 500; font-size: .95rem;
  padding: .55rem .8rem; border-radius: .65rem; margin-bottom: 2px;
}
.side-nav .nav-link i { font-size: 1.1rem; color: #8195a8; }
.side-nav .nav-link:hover { background: var(--brand-50); color: var(--brand-700); }
.side-nav .nav-link.active { background: var(--brand); color: #fff; }
.side-nav .nav-link.active i { color: rgba(255,255,255,.85); }
.dash-main { min-width: 0; display: flex; flex-direction: column; }
.dash-top {
  display: flex; align-items: center; gap: 1rem;
  padding: .9rem clamp(1rem, 3vw, 2rem);
  background: rgba(255,255,255,.9); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bs-border-color);
  position: sticky; top: 0; z-index: 40;
}
.dash-top h1 { font-size: 1.25rem; margin: 0; }
.dash-body { padding: clamp(1.25rem, 3vw, 2rem); max-width: 1280px; width: 100%; }
@media (max-width: 991.98px) {
  .dash-wrap { grid-template-columns: 1fr; }
  .dash-side { position: static; height: auto; }
}

/* ---- Journey stepper ---- */
.journey { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.journey-step {
  background: #fff; border: 1px solid var(--bs-border-color); border-radius: 1rem;
  padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .5rem;
}
.journey-step .num {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand-700); font-weight: 700; font-size: .9rem;
}
.journey-step h3 { font-size: 1rem; margin: 0; }
.journey-step.done { border-color: #bfe0d0; background: var(--growth-100); }
.journey-step.done .num { background: var(--growth); color: #fff; }
.journey-step .state { font-size: .8rem; font-weight: 600; color: #8795a5; }
.journey-step.done .state { color: var(--growth); }

/* ---- Video cards ---- */
.video-frame {
  aspect-ratio: 16/9; width: 100%;
  border-radius: .85rem; overflow: hidden;
  background: linear-gradient(140deg, var(--brand-900), var(--brand-700));
  display: grid; place-items: center; color: #fff;
}
.video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---- Validation (ASP.NET MVC classes → Bootstrap look) ---- */
.field-validation-error { display: block; font-size: .82rem; color: #b02a37; margin-top: .25rem; }
.input-validation-error { border-color: #dc3545 !important; }
.input-validation-error:focus { box-shadow: 0 0 0 .25rem rgba(220, 53, 69, .15) !important; }
.validation-summary-errors { color: #b02a37; background: #fdf0f1; border: 1px solid #f5c2c7; border-radius: .65rem; padding: .7rem 1rem; font-size: .9rem; }
.validation-summary-errors ul { margin: 0; padding-left: 1.1rem; }
.validation-summary-valid { display: none; }

/* ---- Footer ---- */
.site-footer { background: var(--brand-900); color: rgba(255,255,255,.8); }
.site-footer a { color: rgba(255,255,255,.75); text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer .footer-title { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: .9rem; }