/* ==========================================================================
   APP V4 -> v11 product app system
   Source of truth: landing-v11.html + 67-landing-v11.css.
   This file intentionally changes the logged-in app surfaces, not only
   colors: shell, sidebar, dashboard cards, controls, tables, empty states.
   ========================================================================== */

html[data-design="v2"] body.app-v4 {
  --np: #0e8f83;
  --na: #0e8f83;
  --nb: #0e8f83;
  --ng: #08766e;
  --nv: #0e8f83;
  --bg: #f7faf9;
  --s1: rgba(255,255,255,.78);
  --s2: rgba(255,255,255,.58);
  --s3: rgba(238,247,244,.78);
  --s4: #eef8f6;
  --b1: rgba(37,50,61,.10);
  --b2: rgba(37,50,61,.16);
  --b3: rgba(37,50,61,.24);
  --t1: #11161b;
  --t2: #53606b;
  --t3: #7b8794;
  --t4: #9aa5b1;
  --r: var(--radius-md);
  --r2: var(--radius-lg);
  --r3: var(--radius-lg);
  --sh: 0 30px 90px rgba(25,39,54,.14), 0 8px 22px rgba(25,39,54,.08);
  --sh2: 0 18px 54px rgba(25,39,54,.11);
  --body-bg:
    linear-gradient(150deg, #ffffff 0%, rgba(80,214,196,.04) 60%, #ffffff 100%);
  --nav-bg: rgba(255,255,255,.68);
  background: var(--body-bg) !important;
  color: var(--t1);
  position: relative;
}

/* Dark mode mirror — same token names, deep-emerald palette.
   Loads after 62-app-relaunch.css so this block wins for body backgrounds. */
html[data-design="v2"][data-theme="dark"] body.app-v4 {
  --np: #14b6a8;
  --na: #0e8f83;
  --nb: #14b6a8;
  --ng: #11b5a6;
  --nv: #14b6a8;
  --bg: #03130F;
  --s1: rgba(255,255,255,.065);
  --s2: rgba(255,255,255,.04);
  --s3: rgba(255,255,255,.07);
  --s4: rgba(255,255,255,.035);
  --b1: rgba(167,243,208,.14);
  --b2: rgba(167,243,208,.22);
  --b3: rgba(167,243,208,.32);
  --t1: #F6FFFB;
  --t2: #DDFBF0;
  --t3: #A7BDB3;
  --t4: #789086;
  --sh: 0 30px 90px rgba(0,0,0,.55), 0 8px 22px rgba(0,0,0,.45);
  --sh2: 0 18px 54px rgba(0,0,0,.50);
  --body-bg:
    radial-gradient(circle at 16% 6%, rgba(14,143,131,.22), transparent 32%),
    radial-gradient(circle at 88% 10%, rgba(80,214,196,.16), transparent 30%),
    linear-gradient(150deg, #03130F 0%, #051B16 60%, #03130F 100%);
  --nav-bg: rgba(7,31,25,.78);
  background: var(--body-bg) !important;
  color: var(--t1);
}

html[data-design="v2"][data-theme="dark"] body.app-v4::before {
  background:
    linear-gradient(100deg, rgba(20,184,166,.18), transparent 32%, rgba(80,214,196,.14) 68%, transparent),
    repeating-linear-gradient(90deg, rgba(167,243,208,.040) 0 1px, transparent 1px 104px),
    repeating-linear-gradient(0deg, rgba(167,243,208,.030) 0 1px, transparent 1px 104px) !important;
}

html[data-design="v2"][data-theme="dark"] body.app-v4 nav.nav {
  background:
    linear-gradient(145deg, rgba(7,31,25,.88), rgba(7,31,25,.66)),
    linear-gradient(120deg, rgba(20,184,166,.10), transparent 42%, rgba(14,143,131,.10)) !important;
  border: 1px solid rgba(167,243,208,.14) !important;
  box-shadow: 0 18px 54px rgba(0,0,0,.55) !important;
}

html[data-design="v2"][data-theme="dark"] body.app-v4 .nav-brand,
html[data-design="v2"][data-theme="dark"] body.app-v4 .nav-user,
html[data-design="v2"][data-theme="dark"] body.app-v4 .icon-btn {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(167,243,208,.14) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.40) !important;
}

html[data-design="v2"][data-theme="dark"] body.app-v4 .ntab:hover,
html[data-design="v2"][data-theme="dark"] body.app-v4 .ntab.active,
html[data-design="v2"][data-theme="dark"] body.app-v4 .ndropitem:hover,
html[data-design="v2"][data-theme="dark"] body.app-v4 .ndropitem.active,
html[data-design="v2"][data-theme="dark"] body.app-v4 .mob-drawer-item.mob-active,
html[data-design="v2"][data-theme="dark"] body.app-v4 .mobile-more-item.is-active {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(20,184,166,.28) !important;
  color: #F6FFFB !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.40) !important;
}

html[data-design="v2"] body.app-v4::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(100deg, rgba(14,143,131,.08), transparent 32%, rgba(14,143,131,.10) 68%, transparent),
    repeating-linear-gradient(90deg, rgba(17,22,27,.024) 0 1px, transparent 1px 104px),
    repeating-linear-gradient(0deg, rgba(17,22,27,.018) 0 1px, transparent 1px 104px);
}

html[data-design="v2"] body.app-v4 nav.nav {
  background:
    linear-gradient(145deg, rgba(255,255,255,.86), rgba(255,255,255,.62)),
    linear-gradient(120deg, rgba(14,143,131,.07), transparent 42%, rgba(14,143,131,.08)) !important;
  border: 1px solid rgba(255,255,255,.74) !important;
  box-shadow: 0 18px 54px rgba(25,39,54,.10) !important;
  backdrop-filter: blur(28px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.2) !important;
}

@media (min-width: 641px) {
  html[data-design="v2"] body.app-v4 nav.nav {
    top: 14px !important;
    left: 14px !important;
    bottom: 14px !important;
    height: calc(100vh - 28px) !important;
    border-radius: 12px !important;
  }
}

html[data-design="v2"] body.app-v4 .nav-brand,
html[data-design="v2"] body.app-v4 .nav-user,
html[data-design="v2"] body.app-v4 .icon-btn {
  background: rgba(255,255,255,.58) !important;
  border: 1px solid rgba(37,50,61,.10) !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 24px rgba(25,39,54,.05) !important;
}

html[data-design="v2"] body.app-v4 .ntab,
html[data-design="v2"] body.app-v4 .ndropitem,
html[data-design="v2"] body.app-v4 .mob-drawer-item,
html[data-design="v2"] body.app-v4 .mobile-more-item {
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  color: var(--t2) !important;
}

html[data-design="v2"] body.app-v4 .ntab:hover,
html[data-design="v2"] body.app-v4 .ntab.active,
html[data-design="v2"] body.app-v4 .ndropitem:hover,
html[data-design="v2"] body.app-v4 .ndropitem.active,
html[data-design="v2"] body.app-v4 .mob-drawer-item.mob-active,
html[data-design="v2"] body.app-v4 .mobile-more-item.is-active {
  background: rgba(255,255,255,.72) !important;
  border-color: rgba(14,143,131,.20) !important;
  color: var(--t1) !important;
  box-shadow: 0 10px 24px rgba(25,39,54,.06) !important;
}

html[data-design="v2"] body.app-v4 .brand-icon,
html[data-design="v2"] body.app-v4 .nav-av,
html[data-design="v2"] body.app-v4 .nav-icon,
html[data-design="v2"] body.app-v4 .ci,
html[data-design="v2"] body.app-v4 .dash-qa-ico {
  background: linear-gradient(135deg, #0e8f83, #0e8f83) !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(17,119,128,.22) !important;
}

html[data-design="v2"] body.app-v4 .page,
html[data-design="v2"] body.app-v4 .mb-dash,
html[data-design="v2"] body.app-v4 .mb-dash__main,
html[data-design="v2"] body.app-v4 .mb-dash__scroll,
html[data-design="v2"] body.app-v4 .content {
  background: transparent !important;
}

html[data-design="v2"] body.app-v4 .mb-dash__topbar,
html[data-design="v2"] body.app-v4 .mb-cal__topbar,
html[data-design="v2"] body.app-v4 .mb-cust__topbar,
html[data-design="v2"] body.app-v4 .mb-req__topbar,
html[data-design="v2"] body.app-v4 .mb-fin__hd,
html[data-design="v2"] body.app-v4 .ch {
  background: rgba(255,255,255,.60) !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 44px rgba(25,39,54,.08) !important;
  backdrop-filter: blur(22px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.16) !important;
}

html[data-design="v2"] body.app-v4 .mb-kpi,
html[data-design="v2"] body.app-v4 .mb-schedule,
html[data-design="v2"] body.app-v4 .mb-map-card,
html[data-design="v2"] body.app-v4 .mb-requests,
html[data-design="v2"] body.app-v4 .mb-fin__card,
html[data-design="v2"] body.app-v4 .mb-fin__amount-display,
html[data-design="v2"] body.app-v4 .mb-fin__side,
html[data-design="v2"] body.app-v4 .card,
html[data-design="v2"] body.app-v4 .panel,
html[data-design="v2"] body.app-v4 .set-card,
html[data-design="v2"] body.app-v4 .pop-card,
html[data-design="v2"] body.app-v4 .table-wrap,
html[data-design="v2"] body.app-v4 .ibox {
  background:
    linear-gradient(145deg, rgba(255,255,255,.82), rgba(255,255,255,.58)),
    linear-gradient(120deg, rgba(14,143,131,.08), transparent 40%, rgba(14,143,131,.08)) !important;
  border: 1px solid rgba(255,255,255,.74) !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 54px rgba(25,39,54,.10) !important;
  backdrop-filter: blur(20px) saturate(1.14) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.14) !important;
}

html[data-design="v2"] body.app-v4 .mb-kpi__label,
html[data-design="v2"] body.app-v4 .kpi-label,
html[data-design="v2"] body.app-v4 .fl {
  color: var(--t2) !important;
  letter-spacing: 0 !important;
}

html[data-design="v2"] body.app-v4 .mb-kpi__value,
html[data-design="v2"] body.app-v4 .mb-fin__amount-value,
html[data-design="v2"] body.app-v4 .kpi-val,
html[data-design="v2"] body.app-v4 [id$="-total"],
html[data-design="v2"] body.app-v4 [id$="-display"] {
  color: var(--t1) !important;
  text-shadow: none !important;
}

html[data-design="v2"] body.app-v4 .btn-primary,
html[data-design="v2"] body.app-v4 .btn-cta,
html[data-design="v2"] body.app-v4 .btn-submit,
html[data-design="v2"] body.app-v4 .btn-p,
html[data-design="v2"] body.app-v4 .mb-btn--primary,
html[data-design="v2"] body.app-v4 button.primary {
  background: linear-gradient(135deg, #0e8f83, #0e8f83) !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: #fff !important;
  box-shadow: 0 18px 38px rgba(17,119,128,.22) !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
}

html[data-design="v2"] body.app-v4 .btn-n,
html[data-design="v2"] body.app-v4 .mb-btn:not(.mb-btn--primary),
html[data-design="v2"] body.app-v4 .btn-act,
html[data-design="v2"] body.app-v4 .icon-btn {
  background: rgba(255,255,255,.74) !important;
  border: 1px solid rgba(37,50,61,.12) !important;
  border-radius: 8px !important;
  color: var(--t1) !important;
  box-shadow: 0 8px 18px rgba(25,39,54,.05) !important;
}

html[data-design="v2"] body.app-v4 input:not([type="checkbox"]):not([type="radio"]),
html[data-design="v2"] body.app-v4 textarea,
html[data-design="v2"] body.app-v4 select {
  background: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(37,50,61,.12) !important;
  border-radius: 10px !important;
  color: var(--t1) !important;
}

html[data-design="v2"] body.app-v4 input:focus,
html[data-design="v2"] body.app-v4 textarea:focus,
html[data-design="v2"] body.app-v4 select:focus {
  outline: none !important;
  border-color: rgba(14,143,131,.44) !important;
  box-shadow: 0 0 0 4px rgba(14,143,131,.14) !important;
}

html[data-design="v2"] body.app-v4 table,
html[data-design="v2"] body.app-v4 thead th {
  background: rgba(255,255,255,.64) !important;
}

html[data-design="v2"] body.app-v4 tbody tr:hover {
  background: rgba(14,143,131,.08) !important;
}

html[data-design="v2"] body.app-v4 .badge,
html[data-design="v2"] body.app-v4 .pill,
html[data-design="v2"] body.app-v4 .nbadge,
html[data-design="v2"] body.app-v4 .mb-pill {
  background: rgba(14,143,131,.12) !important;
  border: 1px solid rgba(14,143,131,.22) !important;
  color: #0e8f83 !important;
  border-radius: 8px !important;
}

html[data-design="v2"] body.app-v4 .empty,
html[data-design="v2"] body.app-v4 .empty-state,
html[data-design="v2"] body.app-v4 [data-mb-dash-empty] {
  background: rgba(255,255,255,.56) !important;
  border: 1px dashed rgba(14,143,131,.28) !important;
  border-radius: 12px !important;
  color: var(--t2) !important;
}

@media (max-width: 760px) {
  html[data-design="v2"] body.app-v4 nav.nav {
    border-radius: 0 0 24px 24px !important;
  }

  html[data-design="v2"] body.app-v4 .mb-kpi-row,
  html[data-design="v2"] body.app-v4 .mb-dash__grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  html[data-design="v2"] body.app-v4 .mb-kpi,
  html[data-design="v2"] body.app-v4 .card,
  html[data-design="v2"] body.app-v4 .panel {
    border-radius: 12px !important;
  }
}


/* ========================================================================== */
/* BLUE GLASS HARDENING - User app */
/* ========================================================================== */
html[data-design="v2"][data-theme="light"] body.app-v4{--np:#0e8f83!important;--na:#0e8f83!important;--nb:#0e8f83!important;--ng:#08766e!important;--nv:#0e8f83!important;--bg:#f7faf9!important;--s0:#f7faf9!important;--s1:rgba(255,255,255,.90)!important;--s2:rgba(255,255,255,.74)!important;--s3:rgba(238,247,244,.78)!important;--s4:#eef8f6!important;--body-bg:radial-gradient(circle at 18% -8%,rgba(14,143,131,.16),transparent 34%),radial-gradient(circle at 88% 8%,rgba(14,143,131,.08),transparent 30%),linear-gradient(145deg,#f8fdfb 0%,#f3faf7 44%,#eef8f6 100%)!important}
html[data-design="v2"][data-theme="light"] body.app-v4 nav.nav,html[data-design="v2"][data-theme="light"] body.app-v4 .nav-brand,html[data-design="v2"][data-theme="light"] body.app-v4 .nav-right,html[data-design="v2"][data-theme="light"] body.app-v4 .nav-user,html[data-design="v2"][data-theme="light"] body.app-v4 .ntab-group>.ndropdown,html[data-design="v2"][data-theme="light"] body.app-v4 .mob-drawer,html[data-design="v2"][data-theme="light"] body.app-v4 .mobile-more-sheet{background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.76)),linear-gradient(120deg,rgba(14,143,131,.075),transparent 50%)!important;border-color:rgba(37,50,61,.12)!important;box-shadow:0 22px 64px rgba(25,39,54,.10)!important}
html[data-design="v2"][data-theme="light"] body.app-v4 .ntab,html[data-design="v2"][data-theme="light"] body.app-v4 .ndropitem,html[data-design="v2"][data-theme="light"] body.app-v4 #nav-settings-btn,html[data-design="v2"][data-theme="light"] body.app-v4 #nav-logout-btn,html[data-design="v2"][data-theme="light"] body.app-v4 .mob-drawer-item,html[data-design="v2"][data-theme="light"] body.app-v4 .mobile-more-item{background:rgba(255,255,255,.64)!important;border:1px solid rgba(37,50,61,.10)!important;color:#53606b!important;box-shadow:none!important}
html[data-design="v2"][data-theme="light"] body.app-v4 .ntab:hover,html[data-design="v2"][data-theme="light"] body.app-v4 .ntab.active,html[data-design="v2"][data-theme="light"] body.app-v4 .ntab-group.open>.ntab,html[data-design="v2"][data-theme="light"] body.app-v4 .ndropitem:hover,html[data-design="v2"][data-theme="light"] body.app-v4 .ndropitem.active,html[data-design="v2"][data-theme="light"] body.app-v4 #nav-settings-btn:hover,html[data-design="v2"][data-theme="light"] body.app-v4 #nav-settings-btn.active,html[data-design="v2"][data-theme="light"] body.app-v4 #nav-logout-btn:hover,html[data-design="v2"][data-theme="light"] body.app-v4 .mob-drawer-item:hover,html[data-design="v2"][data-theme="light"] body.app-v4 .mob-drawer-item.mob-active,html[data-design="v2"][data-theme="light"] body.app-v4 .mobile-more-item:hover,html[data-design="v2"][data-theme="light"] body.app-v4 .mobile-more-item.is-active{background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(238,247,244,.88)),linear-gradient(120deg,rgba(14,143,131,.18),transparent 64%)!important;border-color:rgba(14,143,131,.32)!important;color:#0e8f83!important;box-shadow:0 14px 34px rgba(25,39,54,.08)!important}
html[data-design="v2"][data-theme="light"] body.app-v4 .nbadge,html[data-design="v2"][data-theme="light"] body.app-v4 .badge,html[data-design="v2"][data-theme="light"] body.app-v4 .pill,html[data-design="v2"][data-theme="light"] body.app-v4 .tag,html[data-design="v2"][data-theme="light"] body.app-v4 .mb-pill,html[data-design="v2"][data-theme="light"] body.app-v4 .mb-req__tab,html[data-design="v2"][data-theme="light"] body.app-v4 .mb-req__status{background:rgba(14,143,131,.12)!important;border-color:rgba(14,143,131,.26)!important;color:#0e8f83!important}
html[data-design="v2"][data-theme="light"] body.app-v4 input:focus,html[data-design="v2"][data-theme="light"] body.app-v4 textarea:focus,html[data-design="v2"][data-theme="light"] body.app-v4 select:focus{border-color:rgba(14,143,131,.58)!important;box-shadow:0 0 0 4px rgba(14,143,131,.16)!important}