/*
 * Overrides layered on top of the Digimax template's own CSS (style.css /
 * responsive.css, untouched, loaded before this file).
 *
 * Two jobs:
 * 1. Fill in the two things the template needs that we don't have rights to
 *    reproduce (stock photography, the Flaticon custom icon font) with
 *    close, honest substitutes — the template's own gradient colours, and
 *    Font Awesome (free, CDN-hosted, no licensing issue).
 * 2. Restyle the TOOL's functional UI (stat cards, tables, badges, buttons,
 *    forms in app.html and the report pages) to match the template's look —
 *    Poppins/Roboto, the purple palette, pill buttons, card shadows —
 *    without touching any element ID or class the tool's JS depends on to
 *    function. Nothing here renames or removes a functional selector.
 */

/* ===========================================================================
   Hero
   =========================================================================== */
.welcome-area {
  min-height: 640px;
  background: linear-gradient(135deg, rgb(16, 5, 77) 0%, rgb(69, 16, 138) 100%) !important;
}
.welcome-area {
  height: 600px;
  z-index: 1;
}

.breadcrumb-area {
  background: linear-gradient(-45deg, #af52ed 0%, #8830df 100%) !important;
  height: 320px !important;
}

.cta-area {
  background: linear-gradient(135deg, #be63f9 0%, #0449c4 100%) !important;
}

/* No background-image or colour is defined anywhere in the template for
   this section (unlike welcome/breadcrumb/cta above) — without this, the
   white text inside it would be invisible against a blank background. */
.review-area {
  background: linear-gradient(-45deg, #af52ed 0%, #8830df 100%) !important;
}

/* ===========================================================================
   Header — real logo, permanently on the brand gradient (see previous note:
   the supplied logo is a white-only asset, so the header can't do the
   template's usual transparent-to-white sticky swap without a second
   colour variant of the logo).
   =========================================================================== */
header#header,
.navbar {
  background: linear-gradient(90deg, #10054d 0%, #45108a 100%);
  position: relative;
}
.navbar .navbar-brand-sticky { display: none; }
.navbar-nav.items .nav-link { color: rgba(255,255,255,.88); }
.navbar-nav.items .nav-link:hover, .navbar-nav.items .nav-link.active { color: #fff; }
.umt-logo-mark { height: 80px; width: auto; display: block; }
.umt-logo-footer { height: 80px; filter: brightness(0);}


/* ===========================================================================
   Flaticon substitution — the template's custom icon font needs webfont
   files we don't have. Font Awesome (loaded from CDN) fills the same
   `single-service > span` slot; this sizes/centres the <i> the same way the
   template's own ::before glyph would have been sized.
   =========================================================================== */
.single-service > span > i {
  font-size: 2.2rem;
  line-height: 4.5rem;
}

/* ===========================================================================
   Hero visual (recovery-curve panel) — unchanged from before
   =========================================================================== */
.umt-hero-visual {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  padding: 28px 28px 18px;
}
.umt-hero-caption { color: rgba(255,255,255,.65); font-size: 13px; display: flex; justify-content: space-between; margin-top: 12px; }

/* ===========================================================================
   Legal page typography (privacy policy)
   =========================================================================== */
.umt-legal { max-width: 780px; margin: 0 auto; padding: 80px 15px 100px; }
.umt-legal h2 { font-size: 22px; margin: 36px 0 12px; }
.umt-legal h2:first-of-type { margin-top: 0; }
.umt-legal p, .umt-legal li { color: #555; font-size: 15.5px; line-height: 1.75; }
.umt-legal ul { padding-left: 20px; }
.umt-legal-updated { color: #999; font-size: 14px; margin-top: -8px; }
.umt-contact-email-btn { font-size: 15px; }

/* ===========================================================================
   Tool UI restyle — app.html + the four report pages.
   Selectors below are the tool's REAL functional classes (see lib/styles.css)
   — restyled here, never renamed, so every id="..." the JS reaches for via
   getElementById still resolves exactly as before.
   =========================================================================== */
/*
 * The template's own style.css sets every plain <p> to Roboto site-wide
 * (marketing pages included, not just the app). Overriding it here once,
 * rather than in the .umt-app-scoped block below, so it's consistent
 * everywhere rather than just inside the tool itself.
 */
/*
 * Bootstrap's own body{} rule (and the template's) both default to a
 * Roboto-first stack. The .umt-app-scoped rule below only protects app
 * pages; this catches everything else (marketing pages), so any text that
 * isn't inside a <p> or an explicitly-styled heading doesn't fall back to
 * Bootstrap's default.
 */
body {
  font-family: 'Poppins', sans-serif;
}

p {
  font-family: 'Poppins', sans-serif;
}

body.umt-app {
  font-family: 'Poppins', sans-serif;
  background: #f7f4fc;
  padding: 0 !important;
  margin: 0 !important;
}
.umt-app .container { max-width: 1200px; margin: 0 auto; padding: 40px 15px; }
.umt-app h1:not(.footer-title) { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 30px; letter-spacing: -0.5px; color: #222; }
.umt-app h2:not(.footer-title) { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 22px; color: #222; }
.umt-app h3:not(.footer-title) { font-family: 'Poppins', sans-serif; font-weight: 600; }
.umt-app .subtitle { color: #10054d; }

/*
 * Every "body text" utility class gets an explicit font-family/size/colour
 * here. Before this, only headings were forced to Poppins — .muted, .small,
 * .stat-sub etc. had no rule of their own, so they silently inherited
 * whatever font-family happened to cascade down from their container
 * (Roboto if inside a <p>, thanks to the template's global `p{}` rule;
 * something else entirely if inside a <div> or <span>, which that rule
 * doesn't touch). Two visually-identical labels could end up on different
 * fonts purely by accident of which HTML tag they happened to be. This
 * makes every one of them explicit, regardless of tag.
 */
.umt-app p,
.umt-app .muted,
.umt-app .small,
.umt-app .stat-sub,
.umt-app label,
.umt-app td,
.umt-app th,
.umt-app code {
  font-family: 'Poppins', sans-serif;
}
.umt-app .muted { font-family: 'Poppins', sans-serif; color: #10054d; font-size: 14px; }
.umt-app .small { font-family: 'Poppins', sans-serif; color: #10054d; font-size: 13px; }
.umt-app .stat-sub { font-family: 'Poppins', sans-serif; font-size: 13px; color: #10054d }
.umt-app label { font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; color: #10054d }
.umt-app td, .umt-app th { font-family: 'Poppins', sans-serif; font-size: 14px; color: #10054d; }
.umt-app p { font-family: 'Poppins', sans-serif; font-size: 15px; color: #10054d; line-height: 1.6; }
/* .badge is deliberately Poppins (matches buttons/nav) — see rule further down. */

.umt-app .nav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.umt-app .nav a {
  padding: 9px 18px; background: #fff; border: 1px solid #eee; border-radius: 100px;
  text-decoration: none; color: #444; font-size: 14px; font-weight: 500;
  font-family: 'Poppins', sans-serif; transition: all .3s ease;
}
.umt-app .nav a:hover { box-shadow: 0 3px 20px rgba(0,0,0,.08); }
.umt-app .nav a.active {
  background: linear-gradient(-45deg, #af52ed 0%, #8830df 100%); color: #fff; border-color: transparent;
}

.umt-app .panel {
  background: #F2D6FF; border: none; border-radius: 14px; padding: 28px;
  box-shadow: 0 3px 20px rgba(0,0,0,.06); margin-bottom: 24px;
}

.umt-app .stat, .umt-app .stat.health-card {
  background: #fff; border: none; border-radius: 14px; padding: 22px;
  box-shadow: 0 3px 20px rgba(0,0,0,.06); transition: all .3s ease;
}
.umt-app .stat:hover { box-shadow: 0 8px 30px rgba(0,0,0,.1); transform: translateY(-3px); }
.umt-app .stat-label { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: .04em; color: #999; }
.umt-app .stat-value { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 26px; }
.umt-app .stat-value:not(.improved):not(.declined):not(.same) { color: #222; }

.umt-app button:not(.umt-mobile-toggle) {
  background: linear-gradient(-45deg, #af52ed 0%, #8830df 100%);
  color: #fff; border: 0; border-radius: 100px; padding: 12px 24px;
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px;
  cursor: pointer; transition: all .3s ease;
}
.umt-app button:hover:not(:disabled):not(.umt-mobile-toggle) { box-shadow: 0 10px 25px rgba(136,48,223,.25); }
.umt-app button.secondary { background: #fff; color: #444; border: 1px solid #ddd; }
.umt-app button:disabled { background: #ddd; color: #999; box-shadow: none; }

.umt-app input[type=date], .umt-app input[type=file], .umt-app input[type=text], .umt-app select {
  border-radius: 10px; border: 1px solid #e5e5e5; font-family: 'Poppins', sans-serif;
}

.umt-app .badge { font-family: 'Poppins', sans-serif; font-weight: 600; border-radius: 100px; }
.umt-app .badge-good { background: rgba(52,255,146,.15); color: #0a8f4c; }
.umt-app .badge-bad { background: rgba(252,87,59,.15); color: #c23a24; }
.umt-app .badge-warn { background: rgba(255,210,0,.18); color: #8a6d00; }
.umt-app .badge-critical { background: #45108a; color: #fff; }

.umt-app .table-wrap { border: none; border-radius: 14px; box-shadow: 0 3px 20px rgba(0,0,0,.06); }
.umt-app th { font-family: 'Poppins', sans-serif; font-weight: 600; background: #faf8fd; }

.umt-app .status-pill { font-family: 'Poppins', sans-serif; }
.umt-app .milestone-card, .umt-app .business-impact-alert { border-radius: 14px; }